建一份最小设计系统

颜色、间距、字号、圆角，四组变量就能管住整个项目。

颜色、间距、字号、圆角，四组变量就能管住整个项目。四组变量、二十来行代码，就能让整个项目的样式收敛。这是投入产出比最高的一次性动作。

你会遇到的现象：

• 想统一调整主题色，发现十几个文件里都写死了色号
• 每个页面的圆角、阴影、灰度都不太一样
• 让 AI 做新页面，它的配色跟前面几页对不上

说到设计系统容易想到几百页的规范文档，那是大团队协作的产物。一个人做产品需要的只有一层：**把散在各处的数值收成一组有名字的变量。**后面所有组件和页面都引用这些名字，样式就自动一致了。ds-wiki

四组变量

写在一个文件里，用 CSS 变量或者对应框架的令牌机制。关键不在用什么技术，在于后续所有地方都引用变量名，不再出现具体数值。

圆角和阴影最容易被忽略，但它们是「像不像一个产品」的重要来源。同一个界面里出现 4px、6px、8px、12px 四种圆角，人一眼说不出问题，但会觉得不精致。

**怎么落地。**别从空文件开始设计，先把你现有页面里的值统计一遍：颜色出现过几次、间距都是多少、圆角都是多少。取出现频率最高的几档作为初始值，再删掉偏离太远的。这样第一天就能让已有页面用上变量，而不是推倒重来。统计这件事交给 AI 做很合适：让它扫一遍所有页面文件，把颜色、间距、字号、圆角出现次数列个表，你从表里挑档位就行。

这套变量也不是一次到位的。新页面偶尔会需要新值，先评估能不能用现有档位组合出来，实在不行再加，并尽量靠近已有档位。

什么时候该长大

别急着扩。设计系统的价值在于约束，加得越多约束越弱。只有出现下面这些信号才动它：

• **需要暗色模式时。**颜色那一组要从具体色值改成语义命名：不是「灰-500」，而是「文字-次要」。这样切主题只要换一套映射。
• **有第二个人加入时。**这时候要补组件的使用说明，光有变量不够了。
• **组件超过二十个时。**需要一个能看到全部组件的展示页，否则自己都记不住有哪些。
• **其余时候别扩。**你的目标是让新页面「不需要做样式决定」，而不是做一套完备的设计语言。

语义命名值得多说一句。当颜色从「灰-500」变成「文字-次要」之后，它就不再描述一个色值，而描述一个用途。之后换主题、调对比度，都只改映射，不动组件。这也是判断该不该长大的信号：当你发现自己开始纠结某个具体色值该叫什么名字，多半就是该上语义命名的时候了。

给 AI 的话

把这段写进项目的 CLAUDE.md，之后每次生成界面，AI 都会先读一遍令牌文件：

## 设计令牌

全部样式变量定义在 src/styles/tokens.css，共四组：
颜色、间距、字号、圆角与阴影。

强制要求：
- 任何组件和页面里都不允许出现具体的颜色值、
  间距数值、字号、圆角值。一律引用变量。
- 需要一个令牌里没有的值时，先说明用途和建议值，
  等我确认后加进 tokens.css，不要就地写死。
- 新增令牌时保持命名风格一致，并说明它跟已有令牌的关系。

生成任何界面代码之前，先读一遍 tokens.css。
生成之后，检查有没有硬编码的数值并报告。

最后一句能挡住大部分样式漂移。AI 写代码时很容易顺手写一个 #3b82f6，主动检查一遍成本很低。