Hallmark 微交互清单静默成功、乐观更新Undo、800ms 悬停提示【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark如果你用 AI 写过前端页面一定见过这种 UI每张卡片悬停都放大、每次保存都弹 Done!、转圈加载器闪一下就消失——看着热闹却透着浓浓的AI 生成味。Hallmark 正是一款专为 Claude Code、Cursor、Codex 打造的反 AI 味Anti-AI-slop设计技能它的 微交互参考文档 给出了一份可直接抄作业的微交互设计清单什么时候该静默、什么时候该给 Undo、悬停提示为何要等 800ms。本文带你逐条读懂这三条最有价值的规则外加一套计时与缓动基准。为什么细节决定像人做的还是像生成的Hallmark 把一个微交互拆成四个部分借鉴 Saffer 的模型触发Trigger→ 规则Rules→ 反馈Feedback→ 循环/模式Loops/Modes任何一环出错界面就显得粗糙四环全对哪怕页面其他部分平平无奇也会让人觉得这是被精心做出来的。它的总原则只有一句动效必须有意图否则就删掉。如果说不清一段过渡在传达什么它就是装饰装饰即 slopAI 味。 ——microinteractions.md 原则章节三条核心规则静默成功、乐观更新Undo、800ms 悬停提示规则一静默成功Silent Success成功的操作不配一个 Done! 提示。如果用户亲眼看到结果行被删掉了、状态变了就不需要额外确认。Toast 应该留给失败以及效果不可见的操作。Hallmark 甚至把为可见成功的操作弹庆祝性 toast列入了它的 Slop 测试 检查门第 17 条——答是就算不合格。典型正例复制到剪贴板按钮文案自己切换成 Copied ✓2.5 秒后还原全程零 toast——文案变化本身就是反馈。保存表单直接保存不打扰用户。规则二乐观更新 失败回滚 Undo用户点了完成UI 应立刻变化请求在后台慢慢发立即修改界面状态用户零等待成功→什么都不做。静默成功这正是品味的标志失败→ 用 200ms 动画回滚颜色同时弹一个带Undo / 重试按钮的提示且提示不自动消失。往返延迟是感知杀手Round-trip latency is a perception killer。 ——乐观更新配方配套理念在 interaction-and-states.md 里叫Undo over confirm可逆操作跳过你确定吗确认框直接执行给用户 5–10 秒的 Undo 窗口。只有真正不可逆的破坏性操作删账号、删表才保留确认而且要让用户输入被删对象的名字而不是点一下 OK。规则三悬停提示 800ms 延迟键盘聚焦 0ms 延迟Tooltip 是新手最容易写错的地方Hallmark 给出了两个截然不同的延迟触发方式延迟原因鼠标悬停800–1000ms防止光标随便扫过时提示疯狂闪烁键盘聚焦0ms键盘用户是刻意到达这里的永远不要让他们等动画本身只需 150ms--ease-out淡入。同时必须满足 WCAG 1.4.13提示框可以移上去指针移入后不消失、持久不会因误移就消失、可关闭Escape。把悬停和聚焦设成相同延迟会被 Slop 测试第 18 条 直接点名。计时与缓动基准别自己发明时长Hallmark 规定时长只能从五个档位里选出口时长约为入口的 60–75%时长档适用场景80–120ms即时反馈按钮按压、勾选框、键盘回显150–200ms悬停态过渡、聚焦环出现、Tooltip 淡入250–300ms弹窗/下拉打开、内容淡入、Tab 交叉淡化400–500msToast 滑入、页面加载揭示、手风琴展开0ms别小看它聚焦环、错误出现——很多元素根本不该动画缓动曲线同样只准用这三条进入用--ease-out: cubic-bezier(0.16, 1, 0.3, 1)退出用--ease-in状态切换用--ease-in-out。弹簧物理只留给真实物理交互拖拽释放、滑块吸附。浏览器默认的ease、以及带 156% 过冲的弹跳曲线在 微交互文档 里是明令禁止的——弹跳是过时的它暴露了模板化工作。AI 生成 UI 的 20 个微交互破绽Hallmark 把 LLM 默认产出的微交互坏习惯总结成了命名破绽清单完整 20 条挑几条最常见的自查transition-all——所有属性都在动包括本该瞬间完成的可见性切换。必须显式列出属性名全页hover:scale-105——每张卡片都悬停放大、无阴影配合、无缓动这是 AI 的条件反射同一元素叠加多个悬停效果——位移缩放阴影变色一起上选一个信号就够了聚焦环慢慢淡入——聚焦环必须瞬间出现键盘用户在过渡开始时不能失去指示器转圈加载器无最短显示时间——80ms 就完成的动作让 spinner 闪一下要么延迟 150ms 再显示要么保证至少显示 300ms新 Toast 把页面内容挤下去——Toast 要在角上堆叠绝不改变布局。无障碍底线动效是一等公民不是事后补丁prefers-reduced-motion必须覆盖每个动效空间位移塌缩为 ≤150ms 的透明度过渡功能性状态变化进度条保留键盘优先悬停第二每个悬停暗示都要有:focus-visible等价物不允许纯悬停交互聚焦环 2–3px、对比度 ≥3:1、永不动画进出触摸端点击目标 ≥44×44px状态变化不能只靠颜色约 8% 的男性有色觉差异。值得留意的是动效还要随主题变音量Brutal 主题时长 ×0.75 干脆利落Salon 主题 ×1.4 轻柔缓慢而 Newsprint 与 Terminal 主题是0×——整页不动那不是 bug是设计决策。完整映射见 主题感知表。拿不准的时候删掉它Hallmark 给所有动效的最终验收测试是一句话如果这个动画变成瞬间完成会发生什么如果答案是没人会注意到——删掉。如果答案是用户会丢失什么变了的信息——留下。大多数页面的动效是太多了而不是太少。倾向静态是品味的信号而再加一点动效才是 AI 的默认冲动。去哪里看完整规则 微交互配方全集20 个 recipe按钮按压、弹窗、命令面板、拖拽把手等microinteractions.md交互元素的八状态清单default/hover/focus/active/disabled/loading/error/successinteraction-and-states.md动效语言时长、缓动、编排motion.md60 条 Slop 测试检查门slop-test.md技能主文件安装与用法SKILL.md把这三条规则——静默成功、乐观更新Undo、800ms 悬停提示——装进你的肌肉记忆再配合计时档位表和破绽自查清单你的页面就会从AI 生成的变成有人做的。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考