Hallmark 微交互设计规范让 AI 生成的界面在细节上真正被设计过【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark微交互microinteraction是 2026 年反 AI-slop反生成式廉价感设计体系中最常被忽视的环节——绝大多数设计 Skill 会纠正排版与配色却几乎没有 Skill 纠正那些小而重复、一旦做对界面就像被设计过、一旦做错就像被机器生成的时刻。本文以 Hallmark 的微交互规范 为主体逐条讲解其触发—规则—反馈—循环的完整配方、时长与缓动准则、默认动效策略、20 个 AI 生成特征与主题感知的动效乘法器并结合本仓库 site/css/tokens.css 中的动效令牌、site/js/main.js 与 site/examples/tally/app.js 的真实实现为你提供一份可直接复制到任何前端项目的微交互施工手册。读完后你将掌握一套可落地执行、附带无障碍基线、能通过 69 项 slop-test 中动效相关闸门的微交互工程方法论。一、什么是微交互一次事件四个组成部分微交互的定义来自交互设计学者 Dan Saffer一个微交互就是一次事件由四个部分组成——触发trigger→ 规则rules→ 反馈feedback→ 循环与模式loops/modes。触发Trigger什么动作启动这次交互是用户手势pointer down、focus、hover还是系统事件数据加载完成、错误发生。规则Rules触发之后系统如何决定行为包括前置条件、状态变更与边界情况。反馈Feedback用户能看到、听到或感觉到的回应——位移、颜色、文字变化。循环与模式Loops/Modes交互在持续状态下如何重复或改变自身例如光标闪烁、数据滚动刷新。判断一个界面是否被设计过往往不看大结构而看这四个部分是否有任何一个被做错。四部分全对即使页面其余部分毫无特别之处整体也会传达出这是人手做的东西任何一部分出错界面立刻显得未打磨。Hallmark 对此的立场非常明确静默成功是品味的标志。一个成功的操作不配获得一条Done!toast——如果用户能看到结果比如一行被删除、一行文字已保存就不再需要确认。Toast 只保留给失败场景以及效果被自身隐藏的动作。二、六条核心原则动效有意图否则就砍掉动效必须有意图否则就该被裁切Motion has intent or motion is cut。每一个动画都必须承担澄清、引导或确认中的至少一个职责。如果你无法说出某段过渡在传达什么信息它就是装饰而装饰就是 slop。这条原则在 Hallmark 中上升到禁用项级别——见 motion.md 的 Bans 一节禁止ease浏览器默认平庸、禁止linear除进度条与加载指示器、禁止 bounce/elastic/overshoot 缓动、禁止动画width/height/top/left/margin/padding、禁止预置will-change、禁止视差、禁止自定义光标。静默成功Silent success。可见结果本身就是反馈只有失败和效果不可见的动作才需要额外通知。仓库首页的复制按钮就是这一原则的活教材copyFromSource()在成功复制后只是把按钮状态翻转为copiedlabel 换成 Copied不弹任何 toast见 site/js/main.js。乐观更新 可回滚Optimism with rollback。用户动作触发后立即更新 UI请求在后台发送失败时动画回滚并提供 Undo。往返延迟round-trip latency是感知杀手等服务器返回再刷新界面会让每个操作都显得迟钝。克制而非以克制为人设。Hallmark 不是不要动效而是在正确的位置放正确的动效。拖拽手柄在抓取时弹入聚焦是好动效页面上每张卡片 hover 都脉冲是 slop。减少动效reduced motion是一等公民不是事后补丁。每个交互都要显式定义自己的 reduced-motion 行为。默认策略把空间位移折叠为透明度交叉淡化时长 ≤ 150ms保留功能状态变化如进度条仍然运转只是放慢。键盘优先hover 其次。每个 hover 暗示必须有对应的 focus 等价物不存在 hover-only 的交互。三、何时默认开动效默认开/默认关的原型清单Hallmark 的整体立场偏向裁切动效但某些页面原型没有动效反而会显得残缺——它们视觉上过于繁忙或过于以数字为驱动完全静止会读起来像一张截图而不是一个界面。对这些原型Skill 会自动配套 2–3 个有目的的小微交互无需用户开口要求。默认开启Default-onBento Grid · Stat-Led · Workbench · Marquee Hero · Conversational FAQ默认关闭Default-offEditorial · Manifesto · Letter · Quote-Led · Type Specimen · Long Document · Index-First · Letter对于默认开启的原型从下面的菜单中选择两个或三个原语即可——每页动效原语永远不超过三个。微交互何时上线配方数字揭示Number revealStat-Led 首屏、任何位置的头条数字IntersectionObserver在进入视口时触发requestAnimationFrame在 1.2–1.6s 内从 0 数到目标值使用--ease-out。Reduced-motion跳过动画直接渲染终值。价格卡片上浮Pricing card lift价格层级卡片:hover时translateY(-3px) 阴影升级180ms--ease-out。激活态60ms 内回到translateY(0)按压感。CTA 悬停上浮CTA hover lift主 CTA 按钮translateY(-1.5px) 背景渐变淡入。200ms--ease-out。激活态 60ms。跑马灯滚动Marquee scrollMarquee Hero、客户 logo 条keyframes marquee的translateX(-100%)持续 40–60s 无限循环悬停暂停。Reduced-motion停止滚动展示前三个条目。错峰揭示Stagger reveal用户证言、功能卡片、画廊IntersectionObserver在每张卡片上触发100ms 错峰opacity 0 → 1 translateY(8px → 0)--ease-out400ms。只播一次——滚动回来绝不再触发。推荐档位脉冲Recommended-tier pulse中间价位档一次性keyframes pulse-border2s进入视口时只跑一次。克制做法边框上 opacity 0.4 → 1 → 0.4。不要循环。光标闪烁Caret blink只允许在一段待输入的命令内部安装代码、终端导航、代码 mockup——绝不能作为独立装饰在 1ch 宽块上keyframes blink1ssteps(2)无限循环放在命令行末尾读作接下来你该输入什么的暗示。Reduced-motion实心块不闪烁。硬性规则光标必须位于pre classcode…▮/pre或 N8 终端导航行内部——绝不能作为悬浮在 hero 里的独立span。数据更新数字跳动Number tick on data update仪表盘实时数值见下文数字跳动配方。默认动效的五条硬规则每个动画都尊重prefers-reduced-motion: reduce——要么完全跳过要么以 0.01s 运行。每页最多三个不同的动画原语。计数器 hover 上浮 跑马灯 三个。不要再加第四个。再加一个就好的诱惑正是 slop 的引力。低于40rem视口不启用任何滚动联动动画沿用 component-cookbook.md § Mobile collapse 的既有移动端规则——移动端滚动有自己的物理特性分层动画会与之对抗因此在 40rem 以下必须禁用。除连续循环跑马灯、环境呼吸、光标闪烁外任何动画时长不超过 2s。如果删掉这个动画会有人注意到吗测试仍然适用——但对于默认开启的原语答案是会页面会显得像截图一样僵硬品牌会显得单薄。永不默认开动效的清单正文滚动揭示。阅读不是电影体验。背景渐变位移。分散注意力。光标跟随物cursor followers。永远是 slop。逐节 fade-up 错峰。选一次编排好的入场而不是十二次。Tab 内容横向滑动。只允许交叉淡化见下文 Tab 切换配方。当页面属于默认关闭的原型Editorial、Manifesto 等时动效是可选加入的——必须用户明确要求。静止本身就是这些页面的品牌。仓库首页的 Terminal 主题文案即此立场的体现No animations. The page is what it is.见 site/js/main.js 的 terminal copy fixture。四、时长准则从这套桶里选不要发明新的桶用途80–120ms即时反馈按钮按压 tick、复选框状态、按键回显。大脑把这一窗口内的一切都读作立即。150–200mshover 状态过渡、focus 环出现、单属性淡化、tooltip 出现出现前要有延迟——见下文。250–300ms模态框 / 下拉 / 面板打开、内容淡入、校验图标缩放进入、Tab 内容交叉淡化。400–500msToast 滑入、页面加载区块揭示、复杂多属性过渡、手风琴展开。0ms正确答案的频率高得惊人。focus 状态、键盘导航、错误出现——很多东西根本不该动画。退场时长是相应进场时长的 60–75%。300ms 的进场配 200ms 的退场绝不能反过来。这条时长准则在仓库中被落成令牌。看 site/css/tokens.css:root { --dur-micro: 120ms; /* button press, toggle tick, color shift */ --dur-short: 220ms; /* hover lift, tooltip, menu open */ --dur-long: 420ms; /* modal, drawer, accordion, page reveal */ }注意三个语义化时长恰好落在 80–120 / 150–250 / 300–500 三档内而不是凭空捏造的数值。--dur-short: 220ms稍高于 200ms 桶上限--dur-long: 420ms落在 400–500 桶内——它们是每档的工程取值。在实际 CSS 中transition声明应直接引用这些令牌例如 site/css/components.css 中的transition: background-color var(--dur-micro) var(--ease-out)。五、缓动准则三条曲线覆盖约 90% 的 UI 动效令牌化这三条曲线然后永远不要自由发挥:root { /* Entering elements — decelerate into place */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Exiting elements — accelerate away */ --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* State toggles — symmetrical */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Material 3 standard alternative — slightly less aggressive */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); }这三条曲线同样以命名令牌的形式存在于 site/css/tokens.css 中--ease-out、--ease-in、--ease-in-out--ease-standard为可选补充。配合 motion.md 的原则只动画transform与opacity——两者由 GPU 合成不会触发 layout其余一切属性动画都是潜在的性能 bug。这也是为什么下文所有配方里位移永远用transform: translateY()而绝不直接动画top/margin。弹簧物理只服务于物理交互弹簧物理只替代缓动曲线用于物理性交互——拖拽释放、滑动关闭、选择器滚轮吸附、令人满意的按压弹跳。除此之外一律用 ease。弹簧配置感受用途stiffness: 50, damping: 20柔和、无过冲平静的揭示几乎等于 easestiffness: 180, damping: 22干脆、轻微过冲拖拽释放开关手柄stiffness: 280, damping: 26硬、极小回弹选择器吸附类触觉按钮按压stiffness: 400, damping: 40非常硬、无回弹位置校正严格说不是弹簧禁用曲线ease浏览器默认——平淡且无工艺感除进度条和无限加载器之外的linear任何过冲超过约 110% 的曲线如cubic-bezier(0.34, 1.56, 0.64, 1)及其同类。回弹bounce已经过时且是模板化作品的信号。这条禁令在仓库中同样被执行——slop-test 第 31 关的抽象背景闸门之外slop-test.md 中的第 11 关直接禁止transition-all第 29 关要求每个动画都有 reduced-motion 回退第 16 关禁止 focus 环渐变出现。六、配方全集触发 → 变化 → 时长 → 缓动 → 无障碍每个配方包含五要素触发、什么在变、时长、缓动、无障碍注记。如果这里缺少某个配方回到核心原则去推导它而不是从记忆中捡一个现成的。1. 按钮按压Button press触发指针按下pointer down。变化按压时transform: scale(0.98)松开恢复基础样式。时长按下 100ms弹回 150ms。缓动进入--ease-in退出--ease-out。无障碍focus 环始终保持可见永远不要动画 focus 环的存在与否。.btn { transition: background-color var(--dur-short) var(--ease-out), transform 100ms var(--ease-out); } .btn:hover { background: var(--color-ink); color: var(--color-paper); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }注意第二行过渡只写了background-color和transform两个属性——这正是对禁transition-all禁令的合规写法。site/css/components.css 中甚至有注释/* explicit properties — never transition: all */。2. 输入聚焦 标签上浮Input focus label float触发focus 事件。变化border-bottom 颜色、标签上滑并缩小、可选的轻微背景着色。时长 200ms缓动--ease-out。关键变化发生在用户输入之前——Stripe / Linear 用它来确认字段是活的。无障碍只用:focus-visible而非:focusreduced-motion 下去掉滑动、只保留颜色变化。3. 表单校验Form validation触发字段被触碰过一次后的 blur即 touched 模式之后每次 input 重新校验。绝不从一开始就每次击键校验——那是敌意设计。变化图标 200ms--ease-out缩放进入、边框着色、辅助文本替换。错误信息三段式哪里错了、为什么错、怎么修。4. Toast 通知触发动作完成或失败。堆叠在视口一角新 toast 把已有的往一个方向推已有 toast 在新 toast 到达时不得重新定位。时长滑入 400ms--ease-out驻留 4–6s滑出 300ms--ease-in。hover/focus 时暂停自动消失。少用如果动作效果可见一行被删除你能看到那行没了就不给 toast。错误永远配 toast 并带重试/撤销。这条toast 不得推移已有内容的规则在 slop-test 第 19 关与 anti-patterns.md § Toasts that shift layout 中都有对应条目——堆叠在视口一角、fixed 定位已有 toast 不因新 toast 到达而移动。5. 模态框开合Modal open / close触发显式用户动作点击、快捷键。打开背景 300ms--ease-out淡入内容 0.96 → 1.0 缩放 opacity 0 → 1300ms--ease-out。关闭220ms--ease-in缩放 1.0 → 0.98opacity → 0。用原生dialog元素——它免费提供 focus trap 和::backdrop。背景加inert。首个 focus 给第一个可交互元素不是关闭按钮。Reduced-motion仅 opacity 交叉淡化150ms。6. 下拉 / 菜单Dropdown / menu触发点击或快捷键。打开180ms--ease-out若条目 ≤ 8 个可加 30ms 错峰。关闭140ms--ease-in。外部点击与 Escape 均可关闭light-dismiss。可用 Popover API。锚点定位距视口边缘 16px 内时翻转方向。仓库首页的主题下拉正是这一配方的实现——见 site/js/main.js触发器切换hidden、外部点击关闭、Escape 关闭并把焦点还给触发器themeTrigger.focus()且通过aria-expanded暴露状态。7. Tooltip触发鼠标悬停800–1000ms 延迟防止随便晃过鼠标就闪现或键盘 focus0ms 延迟——键盘用户是有意到达这里的永远不要延迟他们。动画150ms--ease-outopacity。WCAG 1.4.13 三要件可悬停指针能移上去而不消失、持久不会因意外移动消失、可关闭Escape。仓库首页的 T 键换主题 引导 tooltip 实现了可关闭 自动隐藏 延迟出现5s 延迟、8s 自动隐藏、240ms 淡出见 site/js/main.js——首次出现后写入 localStorage永不复发。8. Tab 切换触发点击或方向键。下划线transform: translateX()滑动 宽度过渡250ms--ease-out。出场内容淡出 100ms--ease-in入场内容 150ms--ease-out淡入并延迟 50ms。绝不动画 Tab 内容的高度——若 Tab 会改变高度用grid-template-rows: 0fr → 1fr。9. 数字跳动Number tick触发数据加载完成。计数器在 400ms 内从 0 数到目标值--ease-out作用于数值而非元素。用Intl.NumberFormat保证区域正确的分隔符。无障碍用aria-livepolite播报最终值绝不逐跳播报。Reduced-motion跳过跳动直接显示终值。仓库中的实时实现见 site/examples/tally/app.js一个 1.1s 间隔的活计数器用toLocaleString(en-US)格式化对应Intl.NumberFormat的角色且整体被if (!reduceMotion)守卫包裹——reduced-motion 用户直接拿到静态值。10. 复制到剪贴板Copy-to-clipboard触发点击。变化按钮 label 换成带勾选图标的 Copied2.5s 后还原。没有 toast——label 变化本身就是反馈。若用户提前移走指针在mouseleave时恢复。btn.addEventListener(click, async () { await navigator.clipboard.writeText(value); btn.dataset.state copied; setTimeout(() delete btn.dataset.state, 2500); });.copy-btn[data-statecopied] .copy-btn__label::after { content: ✓ Copied; } .copy-btn[data-statecopied] .copy-btn__label * { opacity: 0; }仓库首页的实现与之同构但更完整copyFromSource()先写剪贴板失败时降级到隐藏 textarea execCommand(copy)然后把data-statecopied打到源码块和按钮上2400ms 后清除并设置aria-livepolite让辅助技术感知状态变化绑定逻辑用data-copy-bound防止模板重挂载后重复绑定见 site/js/main.js。CSS 侧用[data-statecopied]属性选择器切换 label见 site/css/components.css。11. 拖拽手柄Drag handle触发hover1–2s 延迟——Notion 模式。变化手柄经 opacity 过渡显现光标切到grab。抓取中光标grabbing50% 透明度的幽灵元素跟随指针放置指示线1px、强调色跟踪最近的合法放置目标。释放吸附用 spring stiffness 280 / damping 26。无障碍行聚焦时可方向键重排用aria-live播报拖拽状态。12. 乐观更新 回滚Optimistic update with rollback触发任何有确定正确本地预测的动作开关、点赞、归档、重排。流程状态立即变更、该行可见地更新异步请求在后台发出。成功什么都不发生——静默成功是品味的标志。失败200ms 颜色回滚动画 一条带一个 Undo 按钮的 toasttoast 在用户仍可能需要它的期间不自动消失。const prevState item.completed; item.completed !prevState; render(); try { await api.update(item); } catch { item.completed prevState; render(); toast({ tone: error, message: Couldnt save., action: { label: Try again, run: retry } }); }对应地anti-patterns.md § Confirmation dialogs 明确禁止可逆动作的确认对话框——Are you sure you want to delete this? 应替换为乐观删除 5–10s Undo toast模态确认只保留给不可逆的破坏性操作且要用输入名称确认而不是点 OK。13. 边输入边搜索Search-as-you-type触发input 事件。请求前debounce 250msdebounce 期间显示一个细微指示边框透明度或 label 颜色偏移。用mark高亮结果中的匹配。无障碍debounce 稳定后以aria-livepolite播报结果数量绝不每次击键都播报。14. 命令面板导航Command palette navigation触发⌘K 或/。打开瞬时无动画。方向键移动选中项——指示器在行间过渡高亮元素的transform: translateY()上 120ms--ease-out但条目本身不移动。Enter 确认Escape 关闭。条目只在首次打开时错峰淡入筛选变化时绝不错峰。文本输入全程保持聚焦。这是 Linear / Raycast / Vercel 模式。15. 页面加载揭示Page-load reveals一次编排好的入场。按 DOM 索引错峰总计封顶约 500ms。用IntersectionObserver绝不用 scroll 监听器。首次揭示之后不再有任何滚动动画——让页面就那么待着。特定主题Atelier、Salon、Newsprint完全跳过揭示——这是正确行为不是 bug。对应地仓库首页的 site/js/main.js 注释直接声明Reveal/scroll-in animations are disabled by design — every.revealelement renders in its final state on load so scrolling reads clean.七、20 个命名式 AI 特征生成代码的微交互签名以下是 AI 生成代码的微交互签名。SKILL.md 中的 slop-test 会逐条检查它们命中任何一条都视为关键发现critical finding。anti-patterns.md § Microinteraction tells 与 slop-test.md 第 11、16、29 关均引用本清单。transition-all每个属性都在动画包括本该瞬时的visibility、display、focus 环。必须明确列出属性。该 class 在 Hallmark 输出中被禁用。万物hover:scale-105每张卡片 hover 都上浮无阴影变化、无缓动指定、无目的。这是 AI 反射性的让它交互起来手势。修复每个元素只选一个信号——1px 位移或颜色偏移或下划线加粗绝不四者兼施。弹跳过冲缓动cubic-bezier(0.34, 1.56, 0.64, 1)及其同类用在 UI 元素上。过冲只留给真正的物理交互拖拽释放。多个 hover 效果同时发生一张卡片 hover 时平移 缩放 阴影 变色 旋转。只选一个信号。hover 时的渐变背景动画渐变色在色彩空间里滑动。分散注意力、昂贵、不传达任何信息。修复砍掉或选一个即时发生的颜色变化。文字发光晕环为霓虹感加厚重text-shadow——破坏对比度、损害可读性。光标跟随圆点滞后于指针的拖尾圆点。毫无贡献还会诱发前庭系统不适。每个可交互元素都有自定义光标与操作系统惯例冲突用户学不到任何关于可点击性的信息。无控件的自动轮播WCAG 2.2.2 违规永远如此。修复仅手动前进或 hover/focus 暂停或默认禁用自动播放。滚动视差不同图层以不同速度移动。前庭诱因很少服务于内容。对布局属性应用transition动画width、height、padding、margin、top、left——每一帧都触发 reflow。用transform或grid-template-rows: 0fr → 1fr。万物皆滚动淡入错峰每个区块都在进入视口时淡入页面永远静不下来。只选一次编排好的入场。庆祝式成功 toast用户刚保存了一个看得见已保存的东西还弹 Done!。静默成功才是品味。可逆动作的确认对话框确定要删除这个吗换成乐观删除 Undo toast。没有最小可见时长的 spinner动作 80ms 内完成spinner 闪一下就消失。要么延迟显示150ms要么设最小可见时长300ms。布局已知时用骨架屏优于 spinner。hover 和 focus 的 tooltip 延迟相同hover 应延迟 800–1000msfocus 应立即出现。二者意图不同。focus 环动画进入环在 200ms 内淡入过渡开始期间键盘用户没有任何指示。focus 环永远瞬时出现。不要过渡outline或box-shadow。纯颜色状态变化报错时字段变红无图标、无文本、无边框样式变化。违反 WCAG 1.4.1且对约 8% 的男性色觉缺陷人群不可读。toast 推移已有内容新 toast 把页面往下推消失时又弹回来。堆叠到视口一角别推移布局。触摸设备上的 hover 延迟:hover状态触摸用户永远到达不了因为没有等价的 focus / 点击行为。每个 hover 暗示都必须有 focus 状态、可被粗指针点击访问。八、主题感知的微交互同一个按压在 Brutal 里更响在 Atelier 里更轻微交互要随主题适配。同一个按钮按压在 Brutal 里比在 Atelier 里更响。对每个主题应用一个时长乘数主题时长倍率缓动风味备注Specimen1.0×--ease-out默认。克制。Midnight0.9×--ease-out干脆、技术感。Brutal0.75×--ease-out更锐快速、果断。无弹簧。Garden1.2×--ease-out平静。欢迎弹簧。Atelier1.3×--ease-out非常柔和慷慨几乎没有移动。Newsprint0×无静态。印刷隐喻。Terminal0×无除了命令内部的光标闪烁N8 导航、安装代码印刷 等宽隐喻。没有独立闪烁光标——光标只在用户会输入的地方闪烁。Manifesto0.7×--ease-out锐咔嗒就位。Salon1.4×--ease-out非常柔和最软。Linen1.2×--ease-out平静。Almanac0.85×--ease-out功能性像一本工具书。Sport0.7×--ease-out锐快速斜体能量。如果主题的时长倍率是 0×你就不做任何动画页面完全不动。这是深思熟虑的设计选择不是坏了。所有列出的主题均在 site/css/tokens.css 中有对应的完整令牌块从 Specimen 到 Sport 乃至 Bloom、Coral、Violet、Aurora、Halo、Plume、Editorial 共 22 个主题你可以打开该文件核对每个主题的 paper 明度、accent 色相与字体族从而推断其动效性格应落在乘数表的哪一档。九、无障碍基线每个配方上线前必须通过的检查本文件中的每一个配方在发布前都必须通过以下检查prefers-reduced-motion: reduce被尊重。空间位移折叠为 ≤ 150ms 的 opacity 交叉淡化。功能性状态变化进度条、spinner放慢但保留。仓库中从 site/js/main.js 的matchMedia((prefers-reduced-motion: reduce)).matches守卫用于禁用主题切换的 View Transition到 site/examples/tally/app.js 对计数器与 hover-tilt 的整体if (!reduceMotion)包裹再到 site/css/components.css 的media (prefers-reduced-motion: reduce)块——三层都是这一基线的事实落点。Focus 环 2–3px、对比度 ≥ 3:1、绝不动画进出、通过:focus-visible出现在每个可交互元素上。触摸表面的点击目标 ≥ 44 × 44 CSS px。状态不得仅靠颜色传达——必须配图标、文本或图案。无高于 3Hz 的闪烁。即使微弱的脉冲动画也需要频率上限。每个 hover 暗示都有键盘等价物无例外。异步状态更新使用aria-live但用polite而非assertive——除非关乎安全关键信息。这些要求与 SKILL.md § Disciplines 中每个可交互元素都要实现全部 8 种状态default · hover ·:focus-visible·:active· disabled · loading · error · success的状态纪律互相咬合状态不是可选增强而是与动效配方同级的交付物。十、拿不准就砍掉多数页面动效过多而非过少发布前遍历你输出中的每一个动画问自己如果这个动画变成瞬时的会发生什么如果答案是什么都不会发生——用户根本注意不到删除它。如果答案是用户会丢失关于什么发生了变化的信息保留它。伸手去拿一个静态的答案是品味的标志伸手去拿更多动效是 AI 的默认。这条判据与 motion.md 的宣言一致一次编排好的时刻胜过十个零碎的小时刻——以及动效的语言时长三桶、指数缓出、只动transform/opacity和微交互的词汇本文件的所有配方一起构成了 Hallmark 完整的动效纪律。最终通过与否由 slop-test.md 的第 11、16、29、31 等闸门在发布前把关——每一道动效闸门的答案都必须是否。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考