UI/UX 剧本
优秀的界面来自三件事的协同：清晰的观点（用户、任务、感受）、一致的体系（设计令牌 + 组件）以及成百上千的正确细节（状态、动效、可访问性、文案）。本剧本编排了一套技能体系，覆盖每个部分。
任何 UI 任务的工作流
根据规模调整：按钮微调只需第 5–7 步；全新应用则需要全部步骤。
- 简报 — 用户是谁、任务是什么（动词）、什么环境/设备、应该有什么感觉（具体词语）。从代码库和需求中推断；仅在关键约束未知（平台、现有品牌、受众）时提出一个问题。
- 方向 — 在编码之前确定审美和交互特征。为此屏幕类型查看 2–4 个真实参考（
ui-stack-advisor/references/inspiration.md）。 - 系统 — 设计令牌和 DESIGN.md（
design-system-builder；颜色通过color-theory）。已有项目？阅读并遵循其系统；扩展它，不要分叉。 - 栈 — 组件/动效库（
ui-stack-advisor）。使用无障碍原语；不要手动实现对话框、菜单、组合框、日期选择器、通知条。 - 构建 — 先结构和层次（布局、排版、间距），然后颜色，最后细节。使用真实内容，而非占位符文本。所有状态：加载、空态、错误、部分、成功、禁用、长内容。
- 动效 — 仅在动效有目的时使用（反馈、连续性、状态变化）；参见动效技能。
- 通过查看验证 — 渲染它（开发服务器 + Playwright/Chrome MCP/模拟器），在真实尺寸（390、768、1280+；小手机、平板）下检查，两种主题，仅键盘操作，200% 缩放 / 最大动态字体。批量修复看到的问题。
- 审查 — 运行下面的预发布清单或一个审查技能。
什么任务用什么技能（路由）
| 需求 | 加载的技能 |
|---|---|
| 落地页、营销页的审美方向，独特的视觉设计 | frontend-design |
| 产品 UI（仪表盘、SaaS、后台、工具），带持久设计记忆 | interface-design |
| 设计系统、令牌、主题化、多平台令牌、DESIGN.md | design-system-builder |
| 选取/推导颜色、色板、深色模式颜色、对比度、色盲安全 | color-theory（生成）· better-colors（审计） |
| 排版：比例、折行、字体特性、截断 | better-typography |
| 布局：分组、对齐、响应式、国际化空间 | better-layout |
| 打磨：圆角、阴影、图标、光学对齐 | better-ui |
| 可访问性审查/修复（WCAG 2.2） | better-accessibility |
| UX 文案、标签、错误、空状态 | better-writing |
| 全屏排名审查（以上所有维度） | better-interface · 分支/PR 审查：interface-review |
| 选择组件/动效/微件库 | ui-stack-advisor |
| 动效哲学、缓动、时长、弹性、组件感觉 | emil-design-eng |
| 构建网页动效 | animate · 多个元素一起动：choreograph |
| 审查/审计/修复卡顿动效 | review-animations · improve-animations · animation-performance |
| Apple 风格的流畅动效、手势、材质（网页或原生） | apple-design |
| 移动网页感觉像原生（PWA、触摸、100vh、安全区域） | mobile-native |
| React Native / Expo 设计与审查 | mobile-design · 动效：animate-expo · Expo 插件技能：expo-native-ui, expo-ui, expo-design-system, expo-animation, expo-router |
| shadcn/ui 细节 | shadcn（Vercel 插件） |
| 组件变体 / 状态画廊 / 压力测试 | variant · state-machine · break（用户调用） |
| 图表与仪表盘数据可视化 | dataviz |
| Figma ↔ 代码 | Figma MCP 技能（figma-design-to-code, figma-generate-library, …） |
冲突规则：当两个技能意见不一致时，项目的现有 DESIGN.md/系统 优先；然后是用户的需求；再然后是更具体的技能（例如在 Expo 应用中，animate-expo 优先于 emil-design-eng）。不要在一个任务上堆叠多个审美方向技能——只选一个（frontend-design 或 interface-design）。
标准速查表
可访问性（WCAG 2.2 AA — 美国 (ADA/508)、欧盟（《欧洲无障碍法案》，2025 年 6 月生效）及许多其他地区的法律基线）
- 文本对比度 4.5:1，大号文本及 UI 组件/有意义的图形 3:1
- 所有内容可通过键盘操作；可见焦点（2.4.7）不被粘性 UI 遮挡（2.4.11）；逻辑顺序
- 目标尺寸 ≥ 24×24 CSS px（2.5.8）—— 设计为 44×44
- 拖拽有单指针替代方案（2.5.7）
- 每个输入都有标签，错误以文本形式标明，不单独依赖颜色传达信息
- 文本可缩放 200% / 在 320px 宽度下重排且无水平滚动（1.4.10）
- 尊重减少动效；无闪烁 > 3 次/秒；自动移动的内容 > 5 秒后可暂停
- 一致帮助位置（3.2.6），无冗余重新输入（3.3.7），无障碍认证——无认知测试，允许粘贴/密码管理器（3.3.8）
- 优先使用语义化 HTML；仅当需要填补缺口时使用 ARIA。原生：iOS 访问标签/特征；Android/Compose contentDescription/semantics；RN accessiblityLabel/accessibilityRole
平台
- iOS（HIG）：44×44pt 目标，标签栏用于顶级导航（≤5），带返回手势的导航堆栈，带有 detents 的 sheet，SF Symbols，Dynamic Type，语义化颜色，Liquid Glass 用于控制层（iOS 26+），有意义的事件用触觉反馈
- Android（Material 3 / Expressive）：48×48dp 目标，按宽度类别切换的导航栏/导轨/抽屉，预测性返回，全屏边缘到边缘处理内边距，动态颜色，M3 排版比例
- 细节与差异：
references/mobile-standards.md
性能（Core Web Vitals，75 分位）：LCP ≤ 2.5s · INP ≤ 200ms · CLS ≤ 0.1。在约 100ms 内响应输入；超过 400ms（Doherty 阈值）时显示进度；内容用骨架屏，操作用加载动画；在安全的情况下使用乐观 UI。移动端：60/120fps，保持 JS 线程空闲（Reanimated 工作线程），列表虚拟化。
UX 原则：Nielsen 10 条启发式 + UX 定律（Fitts、Hick、Jakob、Miller/组块、Tesler、Doherty、峰终、审美可用性、Von Restorff、格式塔）。表单、导航、搜索、表格、新手引导、空/错误/加载状态、通知、设置、破坏性操作的模式指南：references/ux-principles-and-patterns.md。
伦理：不使用暗模式（确认羞辱、取消难、预勾选同意、虚假紧迫感、隐藏费用、烦扰）。它们正日益违法（欧盟 DSA/DMA、FTC 点击即取消规则、GDPR 同意规则），并且会侵蚀信任。
预发布 UI 检查清单
- 每屏目的在 5 秒内显而易见；每个视图一个主要操作
- 眯眼看时可读的层级（尺寸/权重/对比度，而非仅颜色）
- 间距、圆角、排版、颜色仅来自令牌；与 DESIGN.md 一致
- 已设计加载、空态、错误、部分、离线、长内容状态
- 表单：标签、正确的输入类型/自动填充、内联错误、错误时保留输入、不阻止粘贴
- 键盘：Tab 顺序、可见焦点、Escape 关闭覆盖层、焦点返回触发元素
- 屏幕阅读器：名称/角色/状态、异步更新的活动区域、标题结构
- 两种主题下对比度已测量；无仅靠颜色传达的信息
- 在 320 / 390 / 768 / 1024 / 1440 下响应式；触摸目标 ≥ 44；无仅悬浮状态的可感知元素
- 动效有目的，UI 动效 ≤ 300ms，可中断，尊重减少动效
- 文案：按钮上使用具体动词，错误说明如何修复，术语一致，国际化就绪（无拼接字符串，为文本增长 30–40% 留空间，RTL 安全的逻辑属性）
- 性能：图片大小合适/懒加载，字体预加载/交换，无布局偏移，长列表虚拟化
- 查看了渲染结果（真实尺寸截图），而不仅仅是代码
整个规则集的 Web 代码审计（焦点、表单、动效、排版、内容、图片、性能、导航、触摸、主题化、国际化、水合、文案、反模式）：阅读 references/web-interface-guidelines.md 并报告为 file:line - issue。
参考
references/web-interface-guidelines.md— Vercel 的 Web 界面指南（已复制，MIT），用于代码审计references/ux-principles-and-patterns.md— 启发式、UX 定律及模式级最佳实践references/mobile-standards.md— iOS HIG + Material 3 要点及平台差异references/arsenal.md— 所有已安装的 UI 技能：来源、许可证、用途、如何更新；可选附加项