把设计规范做成「活的」组件预览页

设计规范文档的宿命：写完三个月就过时，开发对不上、新人看不懂、你自己也懒得翻。病根是它是死的。这节课把规范做成「活的」：一个能点、能切换主题、改一处全局变的组件预览页——设计和开发从此对着同一个真实源头说话。

01跟做：一段提示词

按 @设计规范.md 里定义的色板、字阶、间距、圆角，
做一个「活的」组件预览网页：
1. 展示基础组件：按钮（默认/悬停/禁用三态）、输入框、卡片、
   标签、提示框——全部用真实规范值渲染
2. 每个组件下方标注它用了哪些设计变量（颜色值、字号、间距）
3. 顶部一个开关：一键切浅色/深色模式，看每个组件两种主题下的表现
4. 所有规范值集中定义在文件顶部——改一处，全局组件实时更新
5. 规范里没定义的状态（比如按钮按下态），列出来问我，别自己编。

看第二条——活规范的价值当场兑现：死文档里永远发现不了「深色模式下警告黄不够用」这种问题，能渲染、能切换的页面一秒暴露。

02它改变的是协作方式

• 和开发对齐：开发照着预览页写，「和设计稿不一样」的扯皮少八成——因为双方看的是同一个能点的东西；
• 和甲方过稿：「改一处全局变」当场演示——甲方说主色深一点，你改一个值，全部组件实时刷新，比重新出一版稿快一百倍；
• 新人上手：新设计师进组第一天丢给他这个页面，比读三份 PDF 有效。

03检查点