做 UI 组件/页面/排版时，产出有明确观点…

当需要构建或重塑页面、组件、排版，或根据截图修复视觉不协调、不美观时使用。

适用场景

解决思路

1. 第一行前缀 🥷 inline，不要作为单独段落。
2. 如果可能由默认提示生成，就不够好。
3. 输出中绝不使用 U+2014 em dash，改用逗号、冒号或句号。
4. 当用户对视觉说“很傻”“很怪”“突兀”“不协调”“不和谐”时，视为审美拒绝而非调试症状。
5. 生成的图像资产留在 references/mode-generated-asset.md，即使抱怨附有截图；编码或渲染的 UI 表面路由到 references/mode-screenshot-iteration.md，不是 /hunt。
6. 当交付物是可交付文档而非产品 UI 表面（报告、幻灯片、简历、长篇或印刷导向页面、分页 PDF）时，不要在这里手工制作过度设计的文档布局；交给文档排版技能（如果已安装）起草详细计划。屏幕排版（应用表面、组件、网页）留在本技能。
7. 对于 /ui，当前截图和渲染输出覆盖记忆；重用持久视觉偏好和成熟交互模式，但在更改代码之前仍要从截图或源中命名当前视觉问题。
8. 选择与每个交付物匹配的路径，然后完整阅读。
9. 一个请求可能组合路径，如页面加生成的社交卡。
10. 所有匹配路径在请求中共享一个初始预检澄清轮次；工作开始后的事件触发恢复只能重新打开受影响的字段。
11. 当触发器重叠时，按正在更改的产物路由：生成的图像资产优先于该资产的截图证据，而截图迭代处理编码或渲染的 UI 表面。
12. 构建新表面是默认，从 Lock the Direction First 开始，不需要模式文件。
13. 有界修复现有屏幕（如“这个看起来很挤”“间距不对”）时，加载 references/mode-quick-fix.md。
14. 提供截图作为改进依据时，加载 references/mode-screenshot-iteration.md。
15. 生成图像资产（图表、封面、社交卡、插图）时，加载 references/mode-generated-asset.md。
16. 新页面、组件或视觉系统，从 Lock the Direction First 开始。
17. 向成熟产品添加表面时，方向就是应用：先 grep 现有同级组件并重用其容器、动效和排版令牌；发明新样式需要说明为什么没有现有组件适合。
18. 忽略应用自身组件词汇的初稿会被当场拒绝。
19. 在写代码前解决五个方向维度：从当前产品的令牌、同级组件、截图和仓库的 git 历史中获取颜色、类型、宽度和声音；然后从同一团队或作者的其他已发布产品（如果存在）；然后从对话。
20. 模型默认调色板、默认字体和自由手绘图形仅在没有参考时允许。
21. 先推断。
22. 仅当缺失答案会实质性改变交付物时，用最多两个子问题的一轮紧凑澄清提问。
23. 对每个未解决维度陈述最强的推断答案，并要求用户仅纠正实质性假设。
24. 省略答案接受所述假设；矛盾答案只重新打开受影响的维度，并且必须在该交付物继续之前解决。
25. 现有产品可能无需另一次用户回合就能回答所有五个方向维度。
26. 方向维度 1：谁使用这个，在什么背景下？分析师仪表盘不同于落地页或入职流程。
27. 如果问题是侧边栏 + 主工作区布局，见 App shell exception。
28. 方向维度 2：审美方向是什么？精确命名：密集编辑、原始终端、纸墨、粗野主义网格、温暖模拟；“干净现代”不是方向。
29. 如果用户命名参考网站或产品（“感觉像 Linear / Claude.ai / Vercel”），不要接受为方向，而是提取 3 个具体属性：按钮圆角哲学、表面深度处理（阴影 vs 背景步进 vs 边框）、强调色家族，并命名这些。
30. 知名品牌快捷方式：当精确品牌令牌会实质性改善仍不确定的方向时，提供 references/design-reference.md 中的 “Reference-site Brand Presets” 路径。
31. 仅在明确批准后运行预设，然后针对生成文件分解。
32. 当截图、源令牌或同级组件已经确定方向时，跳过品牌预设。
33. 方向维度 3：设计签名是什么？一个字体、颜色系统、意外动效、不对称布局。选一个并使其明显。
34. 方向维度 4：硬约束是什么？框架、包大小、对比度最低要求、键盘可访问性。
35. 方向维度 5：签名微交互是什么？按下缩放、交错显示或上下文图标动画。选一个并确切知道如何实现。
36. 在所有五个都通过证据、陈述假设或澄清解决之前，不要写代码。
37. 一个维度可以是“无”：安静的实用表面可以故意没有签名动效。
38. 仅当问题确实是陌生交互模式或阅读当前产品后方向仍不确定时，调查 2-3 个成熟产品。
39. 记录每个调查产品的一个具体决策。
40. 对装饰性修复、已建立同级组件和参考已确定模式的任务跳过调查；强制对每个组件进行基准测试会产生模仿并延迟明显工作。
41. 当用户提供仓库 URL 或粘贴现有产品源代码以重现或扩展时，不要从记忆或训练数据重建 UI；文件树是菜单，不是正餐。
42. 阅读实际源代码：主题和令牌文件（theme.ts、colors.ts、tokens.css、_variables.scss 或等效文件）、全局样式表和布局脚手架、用户提到的特定组件。
43. 提取精确值：十六进制代码、间距比例条目、字体栈、边框半径。粗略近似不是像素保真。
44. 仅附加目标组件文件夹或包。
45. 排除 .git、node_modules、dist 和锁文件。
46. 不要拖入整个 monorepo，它会用不相关代码污染上下文并降低输出质量。
47. 当目标是已有连贯视觉方向的现有 macOS / iOS / Android 原生应用时，不要提议整体平台重样式（macOS 26 Liquid Glass、iOS 18 frosted material、Material You、Fluent Design 等）作为默认改进计划。
48. 默认对现有方向进行增量打磨：间距、对齐、悬停和焦点状态、排版层次、文案收紧、动效时序。
49. 仅当用户在本回合明确要求，或现有方向已坏到增量打磨无法修复时，才提议平台样式迁移。
50. 在提议更改前用一句话陈述现有方向，以便用户纠正理解。
51. 当更改涉及该原生表面上的动效、按压状态或动画时序时，加载 references/design-native-motion.md：判断从 Web 规则延续，但习语和平台默认曲线不延续。
52. 如果问题 1 是应用外壳（Slack、Linear、Notion 类），加载 references/design-reference.md 中的 “App shell rules” 部分，并在继续之前应用那些约束。
53. 如果表面是仪表盘、分析视图或图表密集型界面，加载 references/design-data-viz.md 以了解图表选择、数字对齐和产品基准规则。
54. 当构建营销页面、落地页或通用组件时，跳过 data viz 参考。
55. 用一句话陈述所选方向，然后加载 references/design-reference.md 并检查技术栈冲突表。
56. 在写第一个组件之前命名单一 CSS 策略。
57. 令牌决策（颜色、字体、动效）、生产工艺、审美审查、DESIGN.md、选项和战略省略都住在 references/design-reference.md 那个规范文件中。
58. 在写任何代码之前将方向总结为三行：视觉论点（情绪、材料和能量用一句话，例如“温暖粗野主义编辑，高对比度墨水类型和粗糙纸张纹理”）。
59. 内容计划：英雄 -> 支持 -> 细节 -> 最终 CTA，每行一个；对于应用/仪表盘表面，跳过营销结构，默认实用模式（定位、显示状态、启用行动），除非明确要求，否则没有英雄。
60. 交互论点：要么 `none` 并附一个基于证据的原因，要么 2-3 个具体动效想法改变页面感觉（例如“英雄文本加载时滑入，节标题固定而内容在下方滚动，CTA 悬停时脉冲”）。
61. 对于生产或多页 UI，将论点扩展为 references/design-reference.md 中的 9 节 DESIGN.md 脚手架（主题、调色板、排版、组件、布局、深度、做/不做、响应式、提示指南）。
62. 对于单个组件，三行方向总结足够。
63. 当被要求提供选项时，至少给 3 个跨真正不同维度的变体；references/design-reference.md 中的 Options Guide 命名维度、混合和从基础到大胆的进展。
64. 当决策是品味而非正确性时，未经要求就提供选项：图标、字重、强调色、动效感觉。
65. 两个标记候选胜过落地一个猜测，因为回复是一个字母而不是重写轮次。
66. 对于结构变化，用一两句话描述最终状态并在写代码前获得点头。
67. 始终在线的禁令，每个在 references/design-reference.md 的 Absolute Bans 表中有重写：无粗侧边框强调、渐变文本、默认玻璃卡、反射紫到蓝/深色上青色调色板、通用圆角阴影卡网格、普通溢出的模态逃逸、`transition: all` 或布局属性动画。
68. 两条动效规则适用于每个模式：频率决定是否动画，键盘发起的东西不动画，用户每天触发数百次的东西把动效读作延迟，所以没有动效。
69. 每个可按的东西在按下时移动，而不仅在悬停时，因为悬停仅指针，未移动的控件使点击未被确认。
70. 方向锁定加载 references/design-reference.md 以获取完整重写、排版、OKLCH 颜色、动效时序、布局默认值、可访问性基线和复杂性匹配。
71. 截图和快速修复路径使用上述紧凑禁令，而不是支付完整参考。
72. 这些规则使输出远离通用默认，不是作为 lint 通过运行：当承诺的方向真正要求打破一个时，故意打破并在交接中命名权衡。
73. 可访问性基线和 CSS 模式禁令保持不可协商。
74. 依赖 `…` 截断以适应固定宽度槽中的文本时，保证适合：压缩格式、限制为整段、或硬修剪无字形。
75. 度量标准和标签页脚绝不能尾部截断成省略号。
76. 一个额外单词将一行推入换行且最后一行有孤儿词时，首先检查容器和强制换行；收紧重复而不失去意义，绝不为了寡妇缩小字体。
77. 扫描同级块寻找相同布局原因，不是每个短最后一行。
78. 一个小卡片内有五种文本样式时，卡片内每个角色一种文本样式，层次按顺序；小块中超过三种不同文本样式就是气味。
79. 在重要构建阶段后和交接时，重新阅读方向锁定的视觉论点。
80. 如果屏幕上漂移向通用默认，识别首先破裂的具体元素（字体、颜色、卡片处理、间距）并在继续前修复。
81. 在交接总结前运行检查：品牌或产品在第一屏是否明确无误？
82. 在交接总结前运行检查：是否有一个强视觉锚点（真实图像，不是装饰性渐变）？
83. 在交接总结前运行检查：页面能否仅通过扫描标题理解？
84. 在交接总结前运行检查：每个部分是否有一项工作？
85. 在交接总结前运行检查：卡片是否真的必要，还是只是默认样式？
86. 在交接总结前运行检查：动效是改善层次或氛围，还是装饰性的？
87. 在交接总结前运行检查：如果移除所有装饰性阴影，设计是否仍然感觉高级？
88. 在交接总结前运行检查：AI Slop Test：陌生人瞥一眼第一视口会说“这是 AI 做的”吗？扫描 references/design-reference.md 中的 Absolute Bans 和 Common Traps（反射字体、默认渐变、居中英雄与两个 CTA 并排、三个相同卡片、通用顶部导航）并修复排版、颜色或布局，直到任何不是方向明确部分的都消失。
89. 如果任何检查失败，先修复。
90. 自己渲染产品支持的视口或窗口范围：Web 断点两侧，以及原生最小宽度、最小高度、它们的组合和正常尺寸。
91. 测试样本不需要新布局分支。
92. 仅当主机无法渲染时，说明并给用户要检查的确切视图。
93. 以以下结束：审美方向，用 2-3 句话命名并证明。
94. 以以下结束：非显而易见的选择解释：字体、颜色决策、布局逻辑。
95. 以以下结束：用真实内容替换占位内容的说明。
96. 交接后，停止。

适用边界 · 注意事项

• 不适用于后端逻辑或数据管道。
• 不适用于可交付文档或印刷排版（报告、幻灯片、简历、长篇或印刷导向页面、分页 PDF），应交给文档排版技能。
• 不适用于已有连贯视觉方向的现有 macOS / iOS / Android 原生应用的整体平台重样式，除非用户明确要求或增量打磨无法修复。