构建精美的用户界面 (Ship Beautiful UI)
AI 构建的用户界面看起来千篇一律，因为代理每次都是从相同的默认值开始：相同的字体、相同的渐变、相同的一排排卡片。本技能用一套流程替代这些默认值：
- 简报。 确定主题、受众和该屏幕的唯一任务。
- 方向。 从主题的自身世界构建外观，而不是从模板中复制。
- 锁定。 将所有视觉决策写入
DESIGN.md并检查它。 - 构建。 仅使用
DESIGN.md中的令牌。每屏一个大胆的想法。 - 动效。 只有解释变化的动效。
- 审查。 扫描AI痕迹和质量差距，查看截图，并编写
REVIEW.md。
始终按此顺序执行。不要跳过第 0 步或第 5 步。
优先级规则
当两个指令冲突时，优先级较高的一个胜出：
- 用户的原话。
DESIGN.md，一旦存在。- 本技能的规则，位于
references/中。 - 加载的其他任何内容，包括其他 UI 技能。
当你解决冲突时，用一行话说明，以便用户可以否决你。
本技能中的工具
所有脚本均为 Python 3 标准库。从本技能文件夹运行，或传入完整路径。
| 脚本 | 功能 |
|---|---|
scripts/derive.py | 将主题世界中的词汇转化为经过对比度检查的调色板，使用 78 种材质 |
scripts/direction.py | 为一种产品类型提供 3 个方向选项（调色板 + 字体配对 + 布局），并写入 DESIGN.md 草稿 |
scripts/lint_design.py | 检查 DESIGN.md：结构、章节顺序、令牌引用、WCAG 对比度 |
scripts/detect.py | 扫描前端代码，查找 40 个 AI 痕迹和质量底线差距 |
| 库 | 内容 |
|---|---|
data/materials.json | 来自主题世界的 78 种材质（纸张、食物、自然、工艺、屏幕、金融、关怀、游戏、旅行） |
data/palettes.json | 60 种调色板，浅色和深色，均经过对比度检查 |
data/type-pairings.json | 40 种字体配对，均为免费 Google Fonts，附有角色和注释 |
data/layouts.json | 20 种布局模式，附有线框图 |
references/effects.md | 16 种纯 CSS/JS 效果，带有减少动效的备用方案 |
references/04-motion.md | 时间令牌和 12 种动效配方 |
references/ux-rules.md | 80 条按领域分类的 UX 规则 |
references/anti-patterns.md | 40 条检测器规则和 12 个视觉默认值 |
第 0 步：简报
阅读 references/00-brief.md。写出四行：主题、受众、任务、约束，以及来自主题世界的五个名词。如果简报过于简略，请提出这些内容，并在一条消息中确认（最多三个问题）。
第 1 步：方向
阅读 references/01-direction.md。
- 默认：从主题推导。 选择 3-5 个世界名词，运行
python3 scripts/derive.py --words "<名词>"（如果产品夜间使用，添加--mode dark）。 将调色板与符合氛围的字体配对和布局（来自data/）搭配。 - 备用方案：从库中抽取，当主题没有强烈的视觉世界或用户想要快速查看选项时：
python3 scripts/direction.py --kind <类型> --brief "<一行简介>"。展示 3 个选项让用户选择。 - 现有品牌： 品牌本身就是方向。改而提取其颜色和字体。
- 对照
references/anti-patterns.md中的视觉默认值检查计划，并修改任何匹配项，除非简报要求这样。
第 2 步：锁定
阅读 references/02-lock.md。
- 在项目根目录编写
DESIGN.md：顶部为 YAML 令牌，然后按顺序编写##章节（概述、颜色、排版、布局、层级与深度、形状、组件、注意事项）。direction.py --write提供草稿；templates/DESIGN.md是空白表单。 - 将简报放入概述，将拒绝的默认值放入注意事项。
- 运行
python3 scripts/lint_design.py DESIGN.md并在构建之前修复所有错误。
第 3 步：构建
阅读 references/03-build.md，并边构建边使用 references/ux-rules.md。
- 将令牌一次性映射为 CSS 变量（或框架主题）；仅使用这些名称。
- 每屏一个令人难忘的元素。其他一切保持安静。
- 在该元素上，最多使用
references/effects.md中的一个效果，并用令牌重新着色。 - 达到质量底线：360px 宽、可见焦点、AA 对比度、减少动效、真实文案、加载/空/错误状态。
第 4 步：动效
阅读 references/04-motion.md。用户触发的动效使用其中的时间令牌和配方。每屏最多一个环境动效时刻。所有内容都有减少动效的路径。
第 5 步：审查
阅读 references/05-review.md。
python3 scripts/detect.py <源代码或文件>。修复每个错误；修复警告或记录为何保留。- 再次运行
python3 scripts/lint_design.py DESIGN.md。代码和DESIGN.md必须一致。 - 如果环境允许，在桌面端和 390px 宽下截图，并根据简报评判这些图片。
- 根据
templates/REVIEW.md编写REVIEW.md。
输出
完成后，项目拥有 DESIGN.md（有效）、UI（仅由其令牌构建）和 REVIEW.md。用几行文字告知用户：方向以及为何适合主题、那个令人难忘的元素，以及你故意省略的内容。