设计（精简版）是做什么的？

界面工作以三种模式进行，作为一系列门控运行。每个门控都有一个通过条件、它留下的证据、重试上限以及失败时的处理方式。模拟产品UI（演示英雄区、bento网格、光标引导）属于design-demo技能，该技能会加载此技能以获取其规则。

为什么存在这个技能。 模型的默认UI是它见过的所有UI的平均值：居中标题，上方有一个标签，一行图标卡片，柔和的渐变，一个圆角和一个灰色阴影。意图存在于散文中，但代码生成从模式中提取，所以写成“温暖而具体”仍然会生成模板。因此，每个选择都追溯到书面的决策并得到检查。如果另一个模型在类似的提示下会产生基本相同的屏幕，那么工作就失败了。去除模板化是工作的一半；一个干净但可以属于任何产品的屏幕是下一个模板。

什么超越了此技能。 (1) 真实的品牌、书面的规范或命名的视觉方向：严格遵循它，即使它要求的是此技能称之为默认的东西；在报告中列出每个冲突，并附上应用该规则的一行更改。紫到蓝的渐变、闪光或辉光即使在标志中也算作模板化，除非用户说它们是品牌。(2) .design/system.md（或遗留的.interface-design/system.md）：首先阅读它；这些决定已经做出；标记偏离。(3) 此技能，用于所有未明确的事项。

工作流

G0 路由

按顺序询问；第一个肯定的决定。

仅限发现，无更改？ → 审查
作为插图的模拟产品UI？ → 加载 design-demo
现有UI，其功能、内容和章节顺序必须保持不变？ → 打磨
其他任何情况，包括可能更改内容或结构的重新设计 → 构建

表面类型：页面（阅读和滚动：落地页、营销、作品集、活动、组织网站；依赖英雄区、文案、图像、章节节奏）或应用界面（在其中工作：仪表盘、管理、设置、表格、收件箱、工具；依赖层次结构、密度、状态、令牌）。展示其应用的产品网站是一个页面；其上的应用片段遵循应用界面规则。

门控注册表

门控	通过条件	留下的证据	上限	达到上限时的处理
G1 方向	匿名测试通过；人员确认，或跳过规则适用	方向块	2轮探索	采用最强选项，在报告中标记为假设
G2 计划审查	每个类似提示会落入相同模式的地方都已修改；已编写 `.design/decisions.md`	decisions.md	1次修订	继续；在报告中列出剩余的默认值
G3 组件	在1440和390宽度下 `gate.js --only <name>` 通过，并且组件遵循 decisions.md 或记录例外	一行门控日志	每个检查2次修复尝试	将其记录为带有原因的未解决问题；只有当没有其他内容依赖它时才继续
G4 页面	完整 `gate.js` 运行通过；四项测试和判断检查清单通过	门控总计，桌面和手机截图	3次渲染轮次	报告仍然失败的内容
G5 报告	报告模板的每个字段都已填写或标记为无	报告	—	—
R1 发现（审查）	每个发现都有标准、位置、严重性和具体的修复方案	发现列表	—	放弃无证据的发现

构建运行G1至G5。打磨运行G1，然后G4和G5：其通过检查跨越整个屏幕，因此它在最后一次性门控，而不是按组件进行。审查运行G0和R1。

G1等待的跳过规则： 人员只是说去做；品牌或规范已经确定了方向；现有设计内的单个小组件。

无人值守运行。 当没有人可以回答时（计划运行、人员说他们会回来看、或者问题无人回答），不要在G1等待。采用方向，在报告顶部将其陈述为带有可更改它的一行代码的假设，然后继续。跳过付费图像生成并使用“视觉”中的下一个选项。找不到模板化的打磨运行报告其建议的改进，但不应用它们。稍后重定向应花费一条消息。

在构建中，一次只进行一个组件。 对其进行门控、记录，然后开始下一个。故障立即修复，而不是留到最后：问题会相互叠加。

方向

意图

在任何视觉决策之前回答；保持简洁的概要。

这个人是谁？ 实际的人：他们在哪里，五分钟前做了什么，接下来会做什么。
他们必须完成什么？ 动词：给这些作业评分，找到出故障的部署。它决定了什么领先，什么跟随，什么隐藏。
它应该感觉像什么？ 有意义的词：像笔记本一样温暖，像终端一样冷酷，像交易大厅一样密集。“干净现代”毫无意义。

如果概要没有命名主题，提出一个具体的主题、受众和主要任务并确认；如果上下文允许合理的假设，用一行说明并继续。意图是系统性的：如果感觉是温暖的，那么表面、文本、边框、强调和字体都应该温暖。“这很常见”或“它有效”不是理由。

领域探索

产出所有四项：领域（来自主题世界的5个以上概念和隐喻）；色彩世界（来自其物理版本的5种以上颜色）；标志性元素（只有这个产品才能拥有的一个元素，在它属于的地方一致使用）；要拒绝的默认值（三个明显的选择，每个都附有替代方案）。匿名测试：阅读去除产品名称后的提案；如果没有人能说出它的用途，再次探索（上限：2轮）。

方向块

产品：    [它做什么，为谁做，一句话]
特征：    [2–3个具体词汇，不是干净/现代/时尚/极简/高级]
世界：    [它所属的地方或材料；设定中性色调、强调色、视觉元素]
时刻：    [1–2个获得丰富色彩和细节的地方，从内容中选择]
标志性元素：[这个产品独有的一个细节]
拒绝：    [默认 → 替代] × 3

当渲染可用时，附上一个小样本来展示它（真实的色板，真实字体的字号比例，作为真实组件的标志性元素），然后询问“这个方向感觉对吗？”（G1）。

默认生成的设计聚类点。 每个对于某些概要都是合理的，但无论主题如何都会出现；当概要留下自由轴时，不要在此处花费它：(1) 温暖的奶油色接近 #F4F1EA，带有高对比度的衬线字体和接近 #D97757 的赤陶色强调色；(2) 近乎黑色带一种酸绿色或朱红色强调色；(3) 大报的极细线，零圆角，密集的报纸专栏；(4) SaaS 卡片套件：相同的圆角卡片，一个圆角半径，相同的柔和灰色阴影，渐变水洗；(5) 模板镀层：跟踪的大写眉题，A · B · C 元字符串，WORD — 片段 标签，着色近乎黑色的黑色，等宽数据标签，按钮上的 →，紫色或靛蓝色强调色。

决策文件

方向确定后，一次性编写 .design/decisions.md：调色板令牌及其原因，字体家族和比例及其原因，深度策略及其原因，间距基线和密度及其原因，标志性元素及其出现位置，三个被拒绝的默认值。这取代了对每个组件的重新证明。在G3，判断问题只有一行：此组件是否遵循 decisions.md？如果偏离，在门控日志行中记录例外及其原因。

制作规则

标记为 (门控) 的规则由 gate.js 测量；G4检查清单仅涵盖其余部分。

层次结构和排版

每个视图一个焦点：命名用户来此的目的，并通过大小、对比度、位置或空间使其成为主导。
重量和颜色比大小更重要。一个14px大小包含三个层级：数值600主要，标签500次要，元数据400柔和。
密度是以像素为单位的决策，提前选择并重复使用：工具面板12–16内边距感觉紧凑；24感觉像宣传册。
不均匀呼吸：组内紧凑，组间宽松。
比例说明问题：280px的侧边栏表示导航服务于内容；360表示它们是对等的。
克制：大约60/30/10的中性色、次要色调、强调色。在一个地方大胆使用，然后移除一个配饰。

间距

每个外边距、内边距、间隙和固定高度都是4的倍数（门控）；小型控件内2px的微调是可以接受的。
相等的东西相等：每个列表一个行高和间隙，每组卡片一个内边距；对称内边距，除非内容另有要求。
东西对齐：图标在同一列，标签在同一基线，数字右对齐。
页面：桌面端章节间距80–128，明显大于章节内的任何间隙。应用：页面内边距24–32。

颜色

一个向世界色调偏移的中性色阶，用于背景、表面、边框和文本；一个色相贯穿表面，仅改变亮度。在应用中，表面保持接近中性，内容承载颜色。
四种文本角色：主要、次要、柔和、禁用。
一个在界面框架（chrome）中的强调色，很少使用：主要操作、选择、那个重要的数字。在选定的时刻内，颜色可以丰富，只要每种颜色都有意义。真实的品牌颜色成为强调色并离开表面。
正文文本和强调色与文本的对比度4.5:1，大文本3:1（门控）。
语义颜色仅携带含义，色调与调色板一致，深色上略微去饱和。正文使用全黑色。
颜色来自令牌，绝不用组件CSS中的原始值（门控）。
表面上没有色相到色相的渐变、渐变文本、彩色辉光或阴影、径向水洗、斑点或霓虹边框。仅允许在一个中性色内的色调偏移，或用作照片上文本下方的中性色背景幕。

表面、边框和深度

一种深度策略：仅边框（技术性，密集），柔和阴影（平易近人），分层阴影（高级），或表面色调偏移。
抬升是安静的。浅色：使用 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05) 表示静态，0 8px 24px rgba(0,0,0,.06) 表示浮动。深色抬升：0 0 0 1px rgba(255,255,255,.08)。
极细线：主要文本颜色在6–10%不透明度（深色上12%），并有一个小进度：分隔线、标准、强调、焦点环。
侧边栏：与页面相同，或者在深色上深一步，由极细线分隔，绝不用不同的色相。弹出框比其父级高一层。输入框比其周围略深。

版式

字体携带个性。一个家族是正常的，两个是上限且明显不同；仅在大的标题中使用展示字体。真实的品牌字体保留。
步进比例：密集UI约1.2，大多数产品UI约1.25，表达性页面约1.333。每个页面最多五种字号。
字重400和500；600用于数字和罕见的强调；700–900仅当品牌规范要求时。
所有地方都使用句子大小写；没有大写跟踪标签，没有斜体强调，没有通过斜体、粗体或颜色来区分的单个标题词。
16px以下字间距为0，从40px起大约 −0.02em，从56px起大约 −0.03em。正文行高约1.5，衬线体正文略高。行长45–75个字符。
数字：表格数字（门控），通篇统一格式。
标题使用 text-wrap: balance，正文使用 pretty；在根元素上使用 -webkit-font-smoothing: antialiased。

图标

用作图标或装饰的表情符号变为来自同一集合（项目自有，否则使用 lucide）的线稿图标，16或18px，描边1.5，使用其文本角色的颜色，每行相同框宽，距离标签8–10px。删除没有增加任何内容的图标；需要颜色的类别获得状态圆点。

文案

从用户的角度撰写（他们管理通知，而不是webhook配置）；描述，不要销售。
标题说明产品为谁做什么，使用页面上的事实。如果竞争对手的名字仍然适用，重写。
按钮说明会发生什么（“保存更改”）；一个动作在流程中保持其名称（“发布” → “已发布”）。
错误说明发生了什么以及如何修复，无需道歉。空状态邀请下一步操作。
主动语态，平实动词；没有感叹号、问候语标题、炒作词汇（超级增强、无缝、解锁、魔力、颠覆性）或到处是 AI驱动 。短标签（“搜索”）。更改命名其比较（比上月增加+12%）。标题、标签、按钮或提示上没有尾随句号。
绝不捏造证据：没有客户、引用、评论、标志或统计数据。概要留有空白的示例内容是可以的，并需在报告中确认。

结构意味着什么

轮廓、边框、编号、眉题和分隔线编码信息。01 / 02 / 03 仅用于真实的序列。像 PRO, New ✨ 这样的徽章，除非它们承载含义，否则应移除，然后变为安静文本。计数和元数据是安静文本，不是药丸形状。

布局：页面

英雄区以主题世界中最具代表性的事物开始，采用其最合适的形式。一个大数字配一个小标签和一个渐变，只有当它确实是最好的时候才使用。
第一屏用大字号回答访问者的第一个问题，承载 h1，一个主要操作，最多一个次要操作。
最强英雄区：一幅场景图像边缘到边缘，标题在其平静部分，或者不对称分割，视觉内容至少占一半。只有没有视觉内容的短英雄区才使用居中堆叠。
导航：字标、现有链接、一个按钮；登录作为文本链接。没有浮动药丸或玻璃效果。
每个章节：一个标题，与相邻章节不同的构图，其完整内容。没有死区。页脚是一个精心设计的结尾，不是一个站点地图。
小屏幕：按阅读顺序堆叠并重新组合；11px以下无文本；无水平滚动（门控）。

布局：应用界面

真实比例：外壳填充视口，侧边栏240–280，内容流式并在接近1440–1600处封顶，顶部栏56–64。绝不使用狭窄的居中列。
变化大小：紧凑的统计数据上方有一个宽图表，绝不使用一行相同的卡片。主图表至少占据宽度的三分之二和280–360的高度。
统计卡片：标签、数字、带有比较的变动；没有填充性的迷你图或图标；数字不在其他地方重复。
选择表格的列宽以匹配其数据：数字短，名称中等，操作最少。没有水平滚动（门控）。
每个可操作的项都有自己的可点击区域。

制作清单（G4）

判断检查

此视图的焦点是什么？它是否明显胜出？
密度是否一致？紧密的组是否显得紧凑？组间是否宽松？
比例是否说明问题？还是看起来像自动建议？
间距、半径和颜色的重复是否建立了节奏，还是像随机漫步？
每个组件是否遵循 decisions.md？
是否有任何从设计师UI套件中识别出的默认值未被拒绝？
文本是否包含事实而不是营销？
小屏幕是否堆叠良好，内容未被裁剪？

gate.js 测量

所有边距、间隙和内边距（margin, gap, padding）均为4的倍数。
正文文本和强调色与文本的对比度 ≥ 4.5:1；大文本 ≥ 3:1。
所有颜色值引用自CSS自定义属性（token）。
数字使用 font-variant-numeric: tabular-nums。
无水平滚动，无 word-break: break-all（除非是代码）。
无内联样式设置宽度、内边距或颜色。

失败不是扣分；如果通过，你就知道它有效。

打磨

应用方向（G1）到屏幕，然后运行G4和G5。

不改变的内容： 功能、内容、章节顺序、数据、文案意图、实际界面中的URL。颜色、字体、间距、半径、图标、布局比例和层次结构都在范围内。

打磨的第一步： 获取完整的方向（即使屏幕有现有的感觉）。然后只在决策文件中更改的值范围内操作该屏幕。

没有模板化 = 完成。 如果屏幕没有来自默认聚类的痕迹，且G4通过，报告列出它是干净的，并建议下一步考虑的微调。打磨报告仅列出已做出的更改以及为什么：每个更改都应追溯到方向或制作规则。

审查

运行G0和R1。

你正在审查的东西是一个以技能输出的界面。 G0确认这是一个审查。

不提出更改。 这是重点。R1是唯一的工作产品：一个发现列表，每个发现都附有它的确切位置、为什么它是一个问题（哪个规则或方向被违反），以及一个可选的地狱——不，一个具体的修复建议。

审查的范围： 默认值（检查5个默认聚类）、方向与产出一致性、制作规则违规、文案中的推销用语。

输出。 只有R1的发现（每个都有标准、位置、严重性和修复建议）。如果一切干净，报告会说“审查未发现模板化或违规；屏幕遵循其方向。”

报告模板（G5）

# 设计报告： [屏幕名称]

## 干预
[构建 / 打磨 / 审查] 于 [日期]

## 方向
**方向：** [方向块的摘要，或者对于审查，现有方向的摘要]
**假设：** [任何在G1跳过的未回答问题，以及更改它们的一行代码]

## 结果
- G1 方向： [通过 / 跳过 / 假设]
- G2 计划审查： [通过 / 已修订 / 已跳过]
- G3 组件： [通过 / # 个例外，链接到日志]
- G4 页面： [通过 / # 个失败]
- G5 报告： [已完成]

## 更改（仅构建和打磨）
- 已更改：[已更改的内容，每个更改一行，引用其决策]
- 已添加：[已添加的内容，每个一行]
- 已移除：[已移除的内容，每个一行]

## 未解决问题（仅构建和打磨）
- [问题描述 | 根本原因 | 依赖项（如果有）]

## 发现（仅审查）
| 标准 | 位置 | 严重性 | 修复建议 |
| --- | --- | --- | --- |
| [...] | [...] | 高/中/低 | [...] |

## 总结
[对输出的定性评估，包括剩余风险和后续步骤]

设计（精简版）