先定组件后拼页 | 设计界面 | 做产品

先定组件后拼页

先把常用的十几个组件定下来，再用它们拼页面。反过来做，每个页面都会长出一套自己的样式。

你会遇到的现象

• 同一个按钮在不同页面上圆角、字号、内边距都不一样

• 改一个样式要在七八个文件里各改一遍，还漏了两处

• 让 AI 做新页面，它又造了一套新的卡片样式

vibecoding 里这个问题格外突出。AI 每次只看到当前这一个页面，没有全局视野，所以每做一个页面它都会重新发明一遍按钮。你不给它一套现成的组件，它就一定会自己造。

组件先行还有个附带好处：**它把设计决定从「每次都做」变成了「做一次」。**按钮的圆角定完之后，后面几十个页面都不用再想这件事。

先定哪十来个

组件要定清楚什么 按钮主要 / 次要 / 危险三种，每种含默认、悬停、按下、禁用、加载五个状态 输入框默认、聚焦、报错、禁用、只读，加上标签和提示文字的位置 卡片内边距、圆角、边框还是阴影，二选一别都用 列表项行高、分隔方式、悬停态、选中态 标签状态色一套，尺寸一到两种 弹窗 / 抽屉宽度、标题区、内容区、按钮区的固定结构 空态 / 加载 / 错误三个通用组件，全站复用（见四态齐全） 提示条成功、警告、错误三种，位置和消失时机统一

这八类覆盖了绝大多数界面。它们定完，新页面基本就是拼装工作，不再需要做样式决定。

定的时候要写清楚具体数值，不能只写「圆角小一点」。数值要从间距和字号那两组变量里取，而不是各自新定。

同一个「主按钮」，两种做法

每个页面各造一套

圆角、字号、内边距全都不一样 AI 每次只看到当前这一个页面，没有全局视野

一套组件被复用

按钮组件

新页面基本就是拼装，不再需要做样式决定 圆角定完一次，后面几十个页面都不用再想

你不给它一套现成的组件，它就一定会自己造——这不是 AI 不听话，是它手上没有别的选择。 定组件时数值要从间距和字号那两组变量里取，而不是各自新定一套。

八类组件（按钮、输入框、卡片、列表项、标签、弹窗、三态、提示条）覆盖绝大多数界面。定的时候要写清楚具体数值和完整状态——「圆角小一点」不是规范，按钮的五个状态也不能只做默认那一个。

给 AI 的话

复制 CLAUDE.md · 组件规则

## 组件

项目已有的组件在 src/components/ui/ 下。
做任何页面之前，先看一遍这个目录。

强制要求：
- 需要按钮、输入框、卡片、列表项、标签、弹窗、
 空态、加载态、错误态时，一律使用已有组件，
 不要在页面里写内联样式或新建同类组件。
- 已有组件不满足需求时，先告诉我缺什么、
 建议怎么扩展（加一个 variant 还是加一个 prop），
 等我确认再改。不要绕过去自己写一个。
- 新建组件时，颜色 / 间距 / 字号 / 圆角必须引用设计变量，
 不允许写死数值。
- 每个组件都要实现完整状态：按钮五态、输入框五态。

做完页面后，列出你用到的所有组件，
以及有没有新建或修改过任何组件。

最后那句是个轻量的审计。它能让你及时发现 AI 偷偷造了新组件，而不是等到第五个页面才发现风格漂了。

接着看

建一份最小设计系统 组件的上一层。颜色、间距、字号、圆角四组变量定完，组件才有地基。

常用组件有哪些 先认全有哪些组件、各自解决什么问题，再决定你的项目要定哪几个。

四态齐全 空态、加载态、错误态最适合做成通用组件，一次做好全站复用。