先定组件后拼页
组件不统一，页面再怎么调都像拼的。
先把常用的十几个组件定下来，再用它们拼页面。反过来做，每个页面都会长出一套自己的样式。
你会遇到的现象：
- 同一个按钮在不同页面上圆角、字号、内边距都不一样
- 改一个样式要在七八个文件里各改一遍，还漏了两处
- 让 AI 做新页面，它又造了一套新的卡片样式
vibecoding 里这个问题格外突出。AI 每次只看到当前这一个页面，没有全局视野，所以每做一个页面它都会重新发明一遍按钮。你不给它一套现成的组件，它就一定会自己造。
组件先行还有个附带好处：**它把设计决定从「每次都做」变成了「做一次」。**按钮的圆角定完之后，后面几十个页面都不用再想这件事。这也是设计系统的核心价值：把重复的视觉决定固化成可复用的资产，而不是每个页面重来一遍。design-systems-101
更现实地看，组件先行也是给 AI 编程兜底。AI 生成页面时的默认行为是照着当前页面的上下文现做——你不定义组件，等于默认允许它每次即兴发挥。这些零散决定攒下的债，会在第五个页面之后集中爆发，到时候再回头统一，成本是现在的好几倍。
先定哪十来个
| 组件 | 要定清楚什么 |
|---|---|
| 按钮 | 主要 / 次要 / 危险三种，每种含默认、悬停、按下、禁用、加载五个状态 |
| 输入框 | 默认、聚焦、报错、禁用、只读，加上标签和提示文字的位置 |
| 卡片 | 内边距、圆角、边框还是阴影，二选一别都用 |
| 列表项 | 行高、分隔方式、悬停态、选中态 |
| 标签 | 状态色一套，尺寸一到两种 |
| 弹窗 / 抽屉 | 宽度、标题区、内容区、按钮区的固定结构 |
| 空态 / 加载 / 错误 | 三个通用组件，全站复用（见四态齐全） |
| 提示条 | 成功、警告、错误三种，位置和消失时机统一 |
这八类覆盖了绝大多数界面。它们定完，新页面基本就是拼装工作，不再需要做样式决定。起步阶段可以只定按钮、输入框、卡片三件套，跑通第一个页面之后再补其余几类——别为了「完整」先停下来设计三个月。
定的时候要写清楚具体数值，不能只写「圆角小一点」。数值要从间距和字号那两组变量里取，而不是各自新定。更稳妥的做法是直接引用变量名：写「radius-1」比写「圆角 8px」更好——前者在换主题时不用改几十处。
给 AI 的话
CLAUDE.md · 组件规则
## 组件
项目已有的组件在 src/components/ui/ 下。
做任何页面之前，先看一遍这个目录。
强制要求：
- 需要按钮、输入框、卡片、列表项、标签、弹窗、
空态、加载态、错误态时，一律使用已有组件，
不要在页面里写内联样式或新建同类组件。
- 已有组件不满足需求时，先告诉我缺什么、
建议怎么扩展（加一个 variant 还是加一个 prop），
等我确认再改。不要绕过去自己写一个。
- 新建组件时，颜色 / 间距 / 字号 / 圆角必须引用设计变量，
不允许写死数值。
- 每个组件都要实现完整状态：按钮五态、输入框五态。
做完页面后，列出你用到的所有组件，
以及有没有新建或修改过任何组件。
最后那句是个轻量的审计。它能让你及时发现 AI 偷偷造了新组件，而不是等到第五个页面才发现风格漂了。
**怎么验收。**做新页面时故意不看组件目录，先让 AI 自由发挥，画完对照组件清单数一数它「新造」了几个组件。为零，说明规则生效了；为两三个以上，说明组件库覆盖不够——先把缺的组件补进库里，再继续做页面，别让临时样式落地。