建一份最小设计系统
四组变量、二十来行代码，就能让整个项目的样式收敛。这是投入产出比最高的一次性动作。
你会遇到的现象
- 想统一调整主题色，发现十几个文件里都写死了色号
- 每个页面的圆角、阴影、灰度都不太一样
- 让 AI 做新页面，它的配色跟前面几页对不上
说到设计系统容易想到几百页的规范文档，那是大团队协作的产物。一个人做产品需要的只有一层：把散在各处的数值收成一组有名字的变量。后面所有组件和页面都引用这些名字，样式就自动一致了。
四组变量
| 组 | 包含什么 | 数量建议 |
|---|---|---|
| 颜色 | 主题色、灰阶、语义色 | 主题色 1 个（可拉 3 档深浅）、灰阶 6 档、语义色 3 个 |
| 间距 | 4 的倍数序列 | 6 个：4 / 8 / 16 / 24 / 40 / 64 |
| 字号 | 字号加配套行高 | 4 个：大标题 / 小标题 / 正文 / 辅助 |
| 圆角与阴影 | 圆角档位、阴影层级 | 圆角 3 档、阴影 2 档。多了会显得杂 |
写在一个文件里，用 CSS 变量或者对应框架的令牌机制。关键不在用什么技术，在于后续所有地方都引用变量名，不再出现具体数值。
什么时候该长大
- 需要暗色模式时。颜色那一组要从具体色值改成语义命名：不是「灰-500」，而是「文字-次要」。这样切主题只要换一套映射。
- 有第二个人加入时。这时候要补组件的使用说明，光有变量不够了。
- 组件超过二十个时。需要一个能看到全部组件的展示页，否则自己都记不住有哪些。
- 其余时候别扩。设计系统的价值在于约束，加得越多约束越弱。
给 AI 的话
CLAUDE.md · 设计令牌
## 设计令牌 全部样式变量定义在 src/styles/tokens.css，共四组： 颜色、间距、字号、圆角与阴影。 强制要求： - 任何组件和页面里都不允许出现具体的颜色值、 间距数值、字号、圆角值。一律引用变量。 - 需要一个令牌里没有的值时，先说明用途和建议值， 等我确认后加进 tokens.css，不要就地写死。 - 新增令牌时保持命名风格一致，并说明它跟已有令牌的关系。 生成任何界面代码之前，先读一遍 tokens.css。 生成之后，检查有没有硬编码的数值并报告。
最后一句能挡住大部分样式漂移。AI 写代码时很容易顺手写一个 `#3b82f6`，主动检查一遍成本很低。