先定组件后拼页
先把常用的十几个组件定下来，再用它们拼页面。反过来做，每个页面都会长出一套自己的样式。
你会遇到的现象
- 同一个按钮在不同页面上圆角、字号、内边距都不一样
- 改一个样式要在七八个文件里各改一遍，还漏了两处
- 让 AI 做新页面，它又造了一套新的卡片样式
vibecoding 里这个问题格外突出。AI 每次只看到当前这一个页面，没有全局视野，所以每做一个页面它都会重新发明一遍按钮。你不给它一套现成的组件，它就一定会自己造。
组件先行还有个附带好处：它把设计决定从「每次都做」变成了「做一次」。按钮的圆角定完之后，后面几十个页面都不用再想这件事。
先定哪十来个
| 组件 | 要定清楚什么 |
|---|---|
| 按钮 | 主要 / 次要 / 危险三种，每种含默认、悬停、按下、禁用、加载五个状态 |
| 输入框 | 默认、聚焦、报错、禁用、只读，加上标签和提示文字的位置 |
| 卡片 | 内边距、圆角、边框还是阴影，二选一别都用 |
| 列表项 | 行高、分隔方式、悬停态、选中态 |
| 标签 | 状态色一套，尺寸一到两种 |
| 弹窗 / 抽屉 | 宽度、标题区、内容区、按钮区的固定结构 |
| 空态 / 加载 / 错误 | 三个通用组件，全站复用（见四态齐全） |
| 提示条 | 成功、警告、错误三种，位置和消失时机统一 |
定的时候要写清楚具体数值，不能只写「圆角小一点」。数值要从间距和字号那两组变量里取，而不是各自新定。
给 AI 的话
CLAUDE.md · 组件规则
## 组件 项目已有的组件在 src/components/ui/ 下。 做任何页面之前，先看一遍这个目录。 强制要求： - 需要按钮、输入框、卡片、列表项、标签、弹窗、 空态、加载态、错误态时，一律使用已有组件， 不要在页面里写内联样式或新建同类组件。 - 已有组件不满足需求时，先告诉我缺什么、 建议怎么扩展（加一个 variant 还是加一个 prop）， 等我确认再改。不要绕过去自己写一个。 - 新建组件时，颜色 / 间距 / 字号 / 圆角必须引用设计变量， 不允许写死数值。 - 每个组件都要实现完整状态：按钮五态、输入框五态。 做完页面后，列出你用到的所有组件， 以及有没有新建或修改过任何组件。
最后那句是个轻量的审计。它能让你及时发现 AI 偷偷造了新组件，而不是等到第五个页面才发现风格漂了。