实现美观、无障碍、高性能 UI 时的设计与前端落地规范

在没有现成设计系统时，从美学方向、排版、色彩、空间、动效、组件到无障碍，按优先级系统地实现并交付高品质界面。

适用场景

解决思路

1. 研究优秀界面为何「感觉对」：拆解自己欣赏的应用，分析其间距、时序、阴影权重，把「还行」与「出色」的差距归因到一个个具体的微决策。
2. 每个视觉决策都要能说清为什么这么做；如果无法解释某个选择的理由，就重新考虑它。
3. 在写第一行 CSS 前先选定一种大胆的美学方向并全力执行，不在风格之间骑墙：Brutally minimal（大量留白、等宽字体、极强对比、近乎零装饰）、Maximalist chaos（层叠纹理、冲突字号、密集信息、刻意的视觉噪声）、Retro-futuristic（CRT 辉光、等宽终端、扫描线、暗底霓虹）、Organic/natural（大地色、圆润形状、纸张纹理、手绘元素）、Luxury/refined（衬线标题、柔和低饱和配色、充足负空间、金色或奶油色点缀）、Editorial/magazine（夸张字号层级、满幅图像、破格网格）、Playful/bold（明亮原色、粗边框、夸张阴影、弹性动效）。
4. 让代码复杂度匹配视觉愿景：极繁设计需要分层背景、复杂网格结构、多套字体栈；极简设计需要外科手术式精度，因为没有东西可以藏拙，每个间距像素都更重要。
5. 无 DESIGN.md 时避开这些被滥用的默认值：Inter、Roboto、Arial、system-ui 作为展示字体，Space Grotesk，白底紫到蓝渐变，居中文字 + CTA + 库存插画的通用 hero 区。
6. 跨项目刻意变换选择：在浅色与深色主题、不同字体搭配、不同美学方向之间切换，绝不在多个项目上收敛到同一套外观。
7. 用 gradient mesh、噪声/颗粒叠加（filter: url(#noise)）、分层透明、细微背景图案、双色调图像处理来增加视觉纹理与深度。
8. 若项目根存在 DESIGN.md，其 token 与规范覆盖本技能全部默认值（包括字体与配色的 ban list）；只有没有设计系统、从零做美学决策时 ban list 才生效。
9. 按优先级栈顺序推进实现，高优先级不可妥协：Accessibility（CRITICAL）→ Performance（HIGH）→ Typography（HIGH）→ Layout & Spatial（HIGH）→ Color & Theme（MEDIUM）→ Motion & Interaction（MEDIUM）→ Polish & Details（LOW）。
10. 绝不为追求 LOW 级润色而跳过 CRITICAL/HIGH 项：一个动画精美但键盘无法操作的按钮是净负分。
11. 在 root layout 上应用字体平滑：html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }，因为 macOS 默认次像素渲染会让文字比设计意图更重。
12. 标题用 text-wrap: balance 均匀分配行宽，正文段落/li/dd/blockquote 用 text-wrap: pretty 避免孤词。
13. 所有动态更新的数字（价格、计数器、表格列、[data-numeric]）加 font-variant-numeric: tabular-nums，避免数字宽度变化引起布局抖动。
14. 正文字号最小 16px，任何可读内容不低于 14px；正文行高 1.5-1.75，大标题 1.1-1.3；正文用 max-width: 65ch 限制行长。
15. 采用一致的字体刻度并坚持使用：12 / 14 / 16 / 18 / 24 / 32 / 48 / 64。
16. 字体搭配用一款有辨识度的展示字体配一款精致的正文字体；层级靠字重：标题 600-700、正文 400、标签/UI 500。
17. 始终提供字体回退栈，例如 --font-display: "Instrument Serif", "Georgia", serif; --font-body: "Söhne", "Helvetica Neue", sans-serif; --font-mono: "JetBrains Mono", "Fira Code", monospace;。
18. 用 HSL 格式的 CSS 自定义属性定义语义 token：--background、--foreground、--primary、--primary-foreground、--secondary、--muted、--accent、--destructive、--border、--ring、--radius 等。
19. 组件中一律通过语义变量名引用颜色，绝不在组件里硬编码 hex 值。
20. 暗色模式不是「反转颜色」：使用去饱和、更亮的色调变体；背景变暗但不用纯黑 #000，文字变亮但不用纯白 #fff；暗色对比度要单独测试，浅色模式通过与暗色模式失败是两回事。
21. 对比度至少满足 WCAG AA：普通文本 4.5:1，大文本（18px+ 粗体或 24px+ 常规）3:1。
22. 绝不用颜色单独传达信息，始终搭配图标、标签或图案。
23. 用浏览器 devtools 的对比度检查器或 axe-core 验证配色。
24. 调色要有自信：用主导色配锐利点缀，选一到两个主角色让其余配色退后；平均分配的谨慎配色会显得扁平。
25. 嵌套圆角使用同心公式 outer_radius = inner_radius + padding，例如 .card { border-radius: 16px; padding: 8px; } 配 .card-inner { border-radius: 8px; }，父子同半径会显得臃肿。
26. 几何居中看起来不对时改为光学对齐：play/pause 图标、下拉箭头、非对称字形通常需要 1-2px 手动微调。
27. 用多层透明 box-shadow 制造自然深度而不是边框，例如叠加 0 1px 2px / 0 2px 4px / 0 4px 8px 均为 rgba(0,0,0,0.04)；单一硬阴影会显得虚假。
28. 给 img 与 video 加细微内描边以在多变背景上保持一致深度：outline: 1px solid rgba(0,0,0,0.06); outline-offset: -1px;。
29. 间距使用 4px / 8px 基准增量系统，所有值都是 4 的倍数：4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128。
30. 所有交互元素命中区最小 44x44px；视觉元素较小时用伪元素扩展，例如 .small-button::before { content: ""; position: absolute; inset: -8px; }。
31. 定义分层 z-index 刻度并只用这些值，不用任意数字：--z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-overlay: 40; --z-modal: 100; --z-toast: 1000;。
32. 按使用频率决定动画预算：每天 100+ 次（键盘快捷键、命令面板操作、标签切换）零动画、瞬时完成；每天数十次（hover、列表项导航、开关）移除或大幅压缩到 50-100ms 以内；偶发（模态、抽屉、toast、页面切换）用 150-300ms 标准动画；罕见/首次（引导、庆祝、空状态）可用 300-500ms 更精致的动效。
33. 不用内置的 ease / ease-in-out，定义自定义缓动曲线：--ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);。
34. 按时长参考表设置动画：按钮/开关 100-160ms、tooltip 125-200ms、下拉/popover 150-250ms、模态/抽屉 200-500ms、页面切换 250-400ms；UI 动画保持在 300ms 以内，绝不使用 ease-in（它把停顿前置，感觉拖沓）。
35. 出场动画比入场更柔和更快：250ms 的入场对应 150-200ms 的出场。
36. 多个元素进入视口时按语义分组错峰，间隔约 50-100ms，例如 .stagger-item 用 fadeSlideIn 300ms var(--ease-out) both，nth-child 依次 animation-delay: 0ms / 60ms / 120ms。
37. 缩放动画绝不从 scale(0) 开始，至少从 scale(0.9) 起并配合 opacity，例如 from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); }。
38. 每个可按压元素在 :active 时略微缩小，例如 button:active { transform: scale(0.97); }。
39. 交互状态变化用 CSS transition 而不是 keyframe 动画，因为 transition 可被中途打断而 keyframes 不能，这对 hover、开关和任何会被快速反复操作的元素很重要。
40. popover 的 transform-origin 要感知触发元素，从触发点生长而不是从中心；例外是模态，始终从中心出现。
41. 跳过后续 hover 的 tooltip 延迟：用户已经等过一次 tooltip 后，下一个立即显示。
42. 用 @media (prefers-reduced-motion: reduce) 把 *, *::before, *::after 的 animation-duration 与 transition-duration 压到 0.01ms !important，但不要完全取消 opacity 与颜色过渡，它们提供重要反馈。
43. 把 hover 动画包在 @media (hover: hover) and (pointer: fine) 内，避免触屏设备出现卡住的 hover 状态。
44. 用 Radix UI primitives 作为可访问的无样式基础组件，用 CVA（class-variance-authority）定义类型安全的变体（variant 如 default/destructive/outline/ghost，size 如 sm/default/lg）。
45. Button 实现规格：:active 时 transform: scale(0.97)；可见焦点环（绝不无替代地 outline: none）；loading 态用 spinner 替换标签并保持按钮尺寸；disabled 态 opacity: 0.5 配 pointer-events: none。
46. Card 实现规格：卡片与内部元素用同心圆角；用分层阴影而非边框做深度；hover 时轻微抬升（translateY(-1px) 加阴影增强）。
47. Dialog/Modal 实现规格：焦点陷阱（键盘无法逃到背后元素）；ESC 关闭、点击遮罩关闭；transform-origin: center 配 fade + scale 入场；加 aria-modal="true"、role="dialog"、aria-labelledby。
48. Form 实现规格：始终显示可见 label，绝不用 placeholder 代替标签；错误信息就近字段并用 aria-live="polite" 供屏幕阅读器读取；渐进披露，只在需要时显示高级字段；用 React Hook Form + Zod 做校验。
49. 主题实现走 shadcn 的 CSS variable（HSL）模式统一组件颜色；Next.js App Router 下把客户端交互组件包在服务端组件中使用。
50. 优先使用语义 HTML：button、nav、main、header、footer、article、section，再考虑 ARIA；button 自带键盘处理、焦点管理和屏幕阅读器语义，div onClick 则什么都没有。
51. 支持完整键盘操作：Tab / Shift+Tab 在可聚焦元素间移动，Enter / Space 激活按钮与链接，方向键在列表、菜单、标签、单选组内导航，Escape 关闭模态/popover/下拉，Home / End 跳到列表首末项。
52. 焦点管理：所有交互元素有可见焦点环，绝不无替代地 outline: none；模态内做焦点陷阱（Tab 在模态内循环而不是跑到背后）；模态/popover 关闭后把焦点还给触发元素；用 :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } 只对键盘用户显示焦点环。
53. 按需添加 ARIA：icon-only 按钮加 aria-label（如 aria-label="Close menu"）；aria-labelledby 关联标题与区域；aria-describedby 关联帮助文本或错误信息；动态内容更新用 aria-live="polite"；装饰元素加 aria-hidden="true"；可展开元素加 aria-expanded。
54. 图片与媒体：有意义的图片写描述性 alt（如 alt="Dashboard showing 23% revenue growth"），纯装饰图片用 alt=""；视频配字幕、音频配文字稿。
55. 提供导航辅助：把 skip link 放在首个可聚焦元素位置，隐藏直到聚焦（如 a href="#main-content" class="sr-only focus:not-sr-only"）；标题层级 h1 到 h6 顺序递进不跳级，每页只有一个 h1。
56. 触控目标最小 44x44px，相邻触控目标间距至少 8px，小视觉元素用不可见 padding 或伪元素扩展可点区域。
57. 无障碍测试：CI 中跑 axe-core、Lighthouse 无障碍分保持 90+；做一次纯键盘走查；用 VoiceOver（macOS）或 NVDA（Windows）测屏幕阅读器；放大到 200% 检查布局不破版不重叠。
58. 交付前跑 Typography 检查：字体平滑已应用、标题用 text-wrap: balance、动态数字用 tabular-nums。
59. 交付前跑 Color 检查：所有颜色经语义 token 引用且组件内无硬编码 hex、对比度达 WCAG AA、暗色模式单独测对比度。
60. 交付前跑 Spatial 检查：嵌套圆角同心、间距一致遵循 4px/8px 刻度、交互元素 44x44px 命中区、该用阴影处不用边框。
61. 交付前跑 Motion 检查：动画频率匹配使用频率（高频动作零动画）、全局无 transition: all（只列具体属性）、多元素入场分组错峰、尊重 prefers-reduced-motion。
62. 交付前跑 Accessibility 检查：所有交互元素键盘可达、键盘导航时焦点环可见、语义 HTML 优先于 ARIA、动态内容更新带 aria-live。

适用边界 · 注意事项

• 项目根已有 DESIGN.md 时，其 token 与规范覆盖本技能的默认值和 ban list，不要套用本技能的美学选择。
• 本技能的字体与配色 ban list 只适用于没有设计系统、从零做美学决策的场景；已有设计系统指定 Inter 或紫渐变时应照做。
• 不涉及 UI 实现的任务（纯后端、CLI、数据管道等）不适用。