:focus-visible 必须瞬间出现：Hallmark 键盘优先交互的细节

:focus-visible 必须瞬间出现Hallmark 键盘优先交互的细节【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 是一款为 Claude Code、Cursor 和 Codex 打造的反 AI 味设计技能它不仅管配色和字体还死磕交互细节——其中最硬的一条规则是:focus-visible焦点环必须 0 毫秒瞬间出现严禁任何淡入动画。对键盘用户来说这一毫秒之差就是能用和迷路的分界线。为什么焦点环是键盘用户的生命线 用鼠标的人靠悬浮反馈找按钮用键盘的人只靠焦点环认路。Tab 键每按一次焦点环跳到下一个可交互元素告诉用户我现在在哪、接下来去哪。Hallmark 在 microinteractions.md 里把交互原则写成键盘优先悬浮第二Keyboard first, hover second每一个悬浮效果都必须有对应的焦点表现任何交互都不允许仅悬浮可见。规则一用:focus-visible别用:focus在 interaction-and-states.md 的八状态清单里Focus 是独立的一级状态要求用:focus-visible而不是:focus伪类行为适合场景:focus鼠标点击也会触发表单输入框点击后要显示焦点:focus-visible仅键盘/程序化聚焦时触发按钮、链接等鼠标用户不受干扰这样键盘用户每次 Tab 都能看到清晰的环鼠标用户点击按钮时屏幕干干净净——两种输入方式互不打架。规则二0 毫秒出现绝不淡入 ⚡这是全文最核心的一条。Hallmark 的时机规范表The timing canon里专门列了一个0 ms档位并写明0 ms——正确答案 surprisingly often常常是它。焦点状态、键盘导航、错误提示——很多东西根本不应该有动画。在 microinteractions.md 第 218 行 的AI 生成代码 20 个微交互签名中第 17 条赫然在列会淡入的焦点环——环在 200ms 内淡入键盘用户在动画开头那段毫无指示。焦点环必须瞬间出现。永远。为什么反直觉的零动画反而是高级感因为焦点环是定位信号不是装饰。就像红绿灯必须瞬时切换一样任何过渡时间都意味着用户有一段盲区。SKILL.md 第 453 行 的构建规范同样强调Never animate the rings appearance永远不要动画化焦点环的出现。规则三2–3px 宽度 3:1 对比度光瞬间出现还不够环还得看得清。Hallmark 给出的量化标准宽度2–3px太细看不见太粗像选中态对比度≥ 3:1且要同时相对元素本身和页面背景都达标偏移距元素 2px环不贴边、不遮内容色号使用独立的--color-focus令牌⚠️ 一个隐蔽的坑焦点环颜色如果和按钮背景色相同比如都用了强调色环会直接消失。Hallmark 的对比纪律章节专门列出了这条失败模式——焦点色必须与元素和页面双通过3:1 检测。规则四预留焦点槽位页面不抖动 新手常犯的另一个错误输入框平时border: 1px聚焦时边框变 2px——整个页面瞬间向下推 1px这叫布局位移layout shift是没调过的典型信号。Hallmark 的解法很优雅输入框的border-width在所有状态下恒定 1px默认、悬浮、聚焦、报错、禁用预先声明outline: 2px solid transparent——焦点环的插槽一直存在聚焦时只把透明色换成焦点色几何形状一个像素都不动状态变化只允许走background-color、outline、box-shadow三条通道永远不动border-width、padding、height。八状态清单交互元素的出厂标准Hallmark 把每个交互元素的状态要求从 AI 常见的 2 个默认悬浮拉满到8 个写在 SKILL.md 第 77 行 且明确标注mandatory, not advisory强制非建议状态触发时机处理要点Default静止基础样式Hover指针悬停仅限有悬浮设备的媒体查询内颜色微调、1px 位移Focus键盘聚焦:focus-visible0ms 出现Active按压中变暗 下沉 1pxDisabled不可交互透明度 0.5 说明为何禁用Loading处理中内联 spinner标签保持可读Error失败红框 图标 文字 aria-invalidSuccess完成绿色确认自动消失配套还有 slop-test.md 的 65 道门禁把关第 28 门检查是否有元素缺少:focus-visible/:active/:disabled样式第 47 门专门检查焦点环对比度。任一不过代码不许交付。实战三步给现有项目补上焦点环 ️不需要重写样式按这个顺序检查即可搜索outline: none——凡是没有替代焦点样式的裸outline: none是 Hallmark 认定的最常见可访问性 bug直接审计失败补:focus-visible规则——2–3px 实线 2px 偏移 独立焦点色不加任何transition跑一次hallmark audit——该动词会对照反模式清单给现有代码打分输出待办清单而不改动一行代码详见 verbs/audit.md更多可复制的配方和示例页面可以浏览 docs/recipes.md 与 site/_tests/ 下 13 组完整测试页。小结键盘优先不是口号而是可量化的工程纪律✅ 用:focus-visible让环只出现在键盘用户需要的时候✅0ms 出现——焦点环是定位信号动画化 制造盲区✅ 2–3px 宽度、3:1 双对比度、预留透明 outline 槽位✅ 八状态齐全少一个都算没做完这些规则正是 Hallmark 让AI 生成的界面和人做过的界面拉开差距的地方——焦点环那一下瞬间亮起就是最不起眼的品质信号。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考