总览
这套规范有两件东西，一起交给编码 agent：
| 文件 | 是什么 | 怎么用 |
|---|---|---|
| design.md | 标准 DESIGN.md 格式的单文件规范：令牌、组件规格、设计意图，开头是给 agent 的契约，末尾是自查清单 | 放进项目，让 agent 先读它 |
| 五类布局模板 | 对应五种生成器布局，每种两份 HTML：骨架版（结构 + 样式表）与可运行版（再加上行为） | 搭页面结构时读骨架版并复制进项目；想看示例跑起来再取可运行版 |
下面这些页面给人读，同一套令牌、同一套组件，配上可以摸的演示。改动只发生在一个地方：design.md 是唯一真源，文档页和模板跟着它走。
为什么是模板，不是描述
以前只有一份文字规范。同一份文件交给不同的 agent，产出时好时坏——因为每个 agent 都在从文字重建一遍 28px 的输入框、属性卡片的标题行、下拉的键盘契约，而重建必然有出入。现在 agent 的任务变成复用：模板里已经有正确的骨架、组件和行为，剩下的是内容，以及你的生成器要额外加的东西。产出因此稳定下来。
模板刻意做成一个文件：没有第二份要一起拷的样式表或脚本，没有相对路径要对，双击就能在浏览器里跑起来。
骨架、皮肤与功能
规范分三层，design.md 的契约一节把它们分得很清楚：
- 骨架——必须一致：五种布局与各区宽度、tab / 加工 Tips / 缩放 / 导出的位置、控件高度（24 / 28 / 32 / 40）、圆角（4 / 6 / 8 / 12）、封闭的状态集、每个控件欠的键盘与读屏契约、全部平台约束。这些都以渲染出来的样子为准——用什么框架、什么标签、类名叫什么，是你的事。
- 皮肤——默认值，可替换：全部颜色取值和字号。这里发的取值来自平台自己的令牌导出，所以与平台界面同源；你可以有自己的中性色和强调色，前提是保持浅色、承载含义的文本对比度 4.5:1 以上、控件状态肉眼可辨，并且只改令牌的值，不改令牌的名。
- 功能——你自己的：生成器到底做什么、开放哪些参数、Generate 产出什么、缩放到什么范围、历史里存什么，规范一概不管。可运行版的模板把这些各答了一种，好让示例能跑；那些答案是演示，不是要求。
审核查两样：骨架——上面列的布局、宽度、控件尺寸与行为——和平台约束：导出必须走平台按钮、生成器只能用平台分配的区域、导出物 1:1 实际尺寸。皮肤是建议。
工作台，不是店面
生成器的参照物是专业创作工具的属性面板：安静的外框、足够工作的密度、绝不装饰。使用者会在一个下午里把同一个生成器跑二十遍，每次只改一个值。界面的价值就是在这种重复频率下的可预期：控件永远在同一位置，数值永远清晰可读，第二十次的过渡和第一次一模一样。
一段真实的参数栏：bg-subtlest 的面板上立着白色属性卡片，标题行 12 / 500，字段行 12 / 400，灰底无边框的 28px 输入框靠末端对齐。点标题可以收起卡片，拖滑块数值会跟着变——规范讲的是控件在各个状态下长什么样，摸得到才说得清。
它不是什么：不是营销页、不是仪表盘、不是消费级应用。没有首屏高光，没有渐变，没有玻璃，没有光晕，没有插画空态，没有入场动画。那些属于必须先说服你留下的产品。这一个已经拥有你的注意力了。