ui 是做什么的？
一个用于构建和重新设计界面的技能。它将 Jakub Krehel 的技能、make-interfaces-feel-better、Impeccable 以及 Molveau 自己的参考（包括从 Emil Kowalski 作品中提炼的品味指南）融合为一个操作手册。
从这里开始
首先阅读 references/playbook.md，从其“先做这个”部分开始；仅当需要深入了解或查看具体工作示例时，才打开供应商文件和 Molveau 参考。 该操作手册是合并后的指导原则（包括开始之前、塑形、布局、排版、颜色、深色模式、表面、图标、组件与状态、反馈动效、响应式与原生、评审、优化迭代、性能、原型优先、提示词），并附有来源标签以及在来源意见不一致时所做的决策。下表是深度索引。
方向把控
在任何新页面、屏幕或重新设计的代码编写之前执行此操作，即使需求只有一行。本技能的其余部分用于消除错误，而不是赋予屏幕独特个性。若跳过此步骤，结果将是每个模型都会生成的平庸页面：细节正确，但毫无归属感。
- 五线谱。 产品：做什么，为谁做。特性：两个或三个具体的词（例如“冷静、精确、略带温暖”），永远不要用“干净、现代、时尚、简约、高端”。世界：产品所属的领域或材质，它会影响中性色并设定强调色。时刻：一或两个获得丰富色彩和细节的地方。标志：仅此产品独有的一个小细节，并一致使用。 一个时刻是精心绘制的，而不仅仅是清理干净：为图表必须传达的信息重新绘制（平滑线条、镜像比较、真实比例），或者用重量和光线渲染产品本身的物体。
- 盘点，然后构思。 列出 8 到 12 个没有竞争对手共有的东西（姓名、街道、简报中的数字、材料、工具、仪式、行业印刷的文档）。写下：“在这个屏幕上，[一个物品] 变成了 [设备]”。这个设备就是那个时刻。
- 拒绝二阶默认值，除非品牌已经拥有它们。这些是模型在禁止了明显的选项后会采用的设计：
- 带有烧橙色、陶土色、鼠尾草色或森林绿色强调色的米色、石色或暖白色页面，无论是否使用衬线标题（“纸墨”外观是新的默认风格，而非一种方向）；
- 习惯性地使用 Fraunces、Instrument Serif、Playfair 或 Georgia 作为标题字体；system-ui 作为唯一字体；
- 白色背景上的 Inter 或 Geist，搭配一种靛蓝或蓝色强调色；
- 英雄区域、三个特点、推荐、行动号召，按此顺序，没有理由；在应用屏幕上，四个等宽的统计卡片位于条形图上方；
- 居中的眉题、标题和两个按钮作为整个首页内容。
- 替代测试。 将产品名和行业替换为竞争对手的。如果屏幕仍然适用，则更改主张、时刻和标志，并再次测试。
- 展示并等待。 展示五线谱和构思，并等待决策者。如果你无法询问（用户说直接构建，或者你在没有人员的情况下运行），将它们作为注释写在主文件顶部，并精确构建。
深度参考：anti-slop 操作手册第 2 节（方向）和第 12 节（应用屏幕）；design-inspiration-index 技能用于实际参考。
始终遵循
- 项目优先。 它的令牌、组件、
DESIGN.md和同级屏幕优先于此处任何默认值。 - 一次一个设计权威。 完成一个阶段后再叠加另一个。
- 每个屏幕一个焦点和一个主要操作，每个状态都经过设计（操作手册第 3、9 节）。
- 实现前先做原型，适用于新屏幕或重新设计的屏幕，当项目采用原型优先方式时（Molveau 的默认设置，见
references/mockup-first.md）；否则遵循项目自己的评审流程。 - 在宣布 UI 完成之前：运行
anti-slop技能及其检测器，然后进行类型检查、静态检查和测试。
相邻技能：anti-slop 技能负责识别“氛围编码”特征并执行去 AI 化处理；motion 负责 UI 反馈之外的动画；ux 负责文案、表单、焦点、目标、无障碍深度、错误、边缘情况和引导。深度评审：design-grill 是深度审计（七个镜头，排名报告），下面的批评行是较轻的单次评审，而 anti-slop 是检查 AI 外观的评审。
针对不同任务阅读的内容
所有路径均相对于本技能文件夹。
| 任务 | 阅读内容 |
|---|---|
| 合并后的规则、价值观和冲突决策 | references/playbook.md |
| 需要反馈的新屏幕或重新设计的屏幕（非细微调整） | references/mockup-first.md |
| 当项目尚无令牌时的品味默认值 | references/taste.md |
| 布局、分组、对齐、间距 | references/vendor/jakub/better-layout.md，然后 references/vendor/impeccable/layout.md |
| 排印：字体、尺度、行长、OpenType | references/vendor/jakub/better-typography.md 和 references/vendor/impeccable/typeset.md |
| 颜色：调色板、对比度、深色模式、令牌 | references/vendor/jakub/better-colors.md，加上 references/vendor/impeccable/colorize.md 以添加颜色 |
| 最终润色：圆角、阴影、光学对齐、图标状态 | references/vendor/feel/make-interfaces-feel-better.md 和 references/vendor/impeccable/polish.md；精确值见 references/vendor/jakub/better-ui.md |
全屏排名评审（无障碍和文案存在于 ux 技能中） | references/vendor/jakub/better-interface.md，总括 |
| 评审分支或 PR 中的 UI 回归 | references/vendor/jakub/interface-review.md |
| 对文件、组件或路由进行全面的多镜头设计审计（重量级：多个代理） | design-grill 技能 |
| 英雄区域、CTA、导航栏、动效、图标的视觉参考或灵感 | design-inspiration-index 技能 |
| 屏幕评审或设计评审 | references/vendor/impeccable/critique.md（启发式、认知负荷、用户画像）；快速分解：references/prompts.md 中的提示 4 |
审计：性能、主题化、响应式（无障碍使用 ux 技能） | references/vendor/impeccable/audit.md、references/vendor/impeccable/optimize.md |
| 过于杂乱或沉重 | references/vendor/impeccable/distill.md、references/vendor/impeccable/quieter.md |
| 过于平淡或畏缩 | references/vendor/impeccable/bolder.md、references/vendor/impeccable/colorize.md、references/vendor/impeccable/delight.md |
| 技术上有野心的效果 | references/vendor/impeccable/overdrive.md |
| 从零开始规划新设计 | references/vendor/impeccable/shape.md；references/vendor/impeccable/new-work.md 和模式文件（references/vendor/impeccable/mode-operate.md、mode-persuade.md、mode-read.md）用于新的视觉识别 |
| 应用、仪表盘和设置的深度 | references/vendor/impeccable/operate.md |
| 小屏幕、触摸、其他平台 | references/vendor/impeccable/adapt.md；原生：references/vendor/impeccable/ios.md、references/vendor/impeccable/android.md、references/vendor/impeccable/adapt.native.md |
编写或刷新 DESIGN.md，提取令牌和组件 | references/vendor/impeccable/document.md、references/vendor/impeccable/extract.md |
| 反馈动效配方（按压、进入和退出、图标切换、主题切换） | references/vendor/jakub/better-ui/animations.md、references/vendor/jakub/better-ui/enter-exit.md、references/vendor/jakub/better-ui/icon-transitions.md；Emil 的数值在 references/animation.md（完整工作流程：motion 技能）。其中一些配方运行时间较长（约 500ms 的 sheet，Sonner 的 400ms）：在 UI 中，操作手册将覆盖层限制在 300ms（第 10 节） |
| 交互式组件完成核对清单（toasts、抽屉、菜单） | references/components.md |
| 应该被 LLM 引用的公开营销网站 | references/discoverability.md |
| 迫使品味进入 AI 生成 UI 的提示词 | references/prompts.md |
| 规则背后的哲学 | references/quotes.md |
| UI 看起来是“氛围编码”或通用 | anti-slop 技能 |
| 文案、错误、空状态、无障碍深度 | ux 技能 |
Impeccable 的入口点 references/vendor/impeccable/impeccable.md 描述了包含其自己的设置文件和脚本的完整命令集；当你想要整个工作流程而不是单次处理时，请阅读它。其 clarify、harden 和 onboard 命令已在 ux 技能中一次性供应商化。
关于供应商文件的说明
references/vendor/ 下的文件是从其作者处原样复制的，因此其中的相对链接和命令名称（Impeccable 的斜杠命令、scripts/impeccable、实时模式、comp 门控）可能在此安装中不存在。采纳指导；忽略指向缺失工具的部分。如果供应商文件要求浏览器截图、子代理或自动视觉检查，请遵循项目自己的规则（操作手册冲突 14）。许可证和确切来源在每个供应商文件夹中（LICENSE、SOURCE.md）。
鸣谢和许可证
references/vendor/jakub/是 Jakub Krehel 的技能（https://github.com/jakubkrehel/skills），MIT 许可证。references/vendor/feel/是 make-interfaces-feel-better，作者 Jakub Krehel（https://github.com/jakubkrehel/make-interfaces-feel-better），MIT 许可证。references/vendor/impeccable/是 Impeccable，作者 Paul Bakaus（https://github.com/pbakaus/impeccable），Apache-2.0 许可证，并保留其 LICENSE 和 NOTICE。文件已重新定位，SKILL.md 已重命名，未包含scripts/；请参阅其SOURCE.md。操作手册对 Impeccable 的指导进行了释义和压缩；该改编是对原始内容的更改。- 品味指南（
references/taste.md、animation.md、components.md、quotes.md）是从 Emil Kowalski 的设计工程工作中提炼的（https://emilkowal.ski），在操作手册中标记为[Molveau/Emil]。文字和结构属于 Molveau（MIT 许可证）；思想和方法属于他。references/quotes.md标注了每条引用的出处。references/animation.md也借鉴了 Rauno Freiberg 的 devouringdetails.com。 references/discoverability.md是从 Suganthan Mohanadasan 的研究中提炼的（suganthan.com）。references/playbook.md、references/prompts.md和references/mockup-first.md是 Molveau 自己的作品（MIT 许可证），通过标签注明每个来源。