建一份最小设计系统 | 设计界面 | 做产品

建一份最小设计系统

四组变量、二十来行代码，就能让整个项目的样式收敛。这是投入产出比最高的一次性动作。

你会遇到的现象

• 想统一调整主题色，发现十几个文件里都写死了色号

• 每个页面的圆角、阴影、灰度都不太一样

• 让 AI 做新页面，它的配色跟前面几页对不上

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

四组变量

组包含什么数量建议

颜色 主题色、灰阶、语义色 主题色 1 个（可拉 3 档深浅）、灰阶 6 档、语义色 3 个

间距 4 的倍数序列 6 个：4 / 8 / 16 / 24 / 40 / 64

字号 字号加配套行高 4 个：大标题 / 小标题 / 正文 / 辅助

圆角与阴影 圆角档位、阴影层级 圆角 3 档、阴影 2 档。多了会显得杂

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

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

设计系统需要的只有一层：把散在各处的数值收成一组有名字的变量

写死在十几个文件里 #3b82f6 #2f6df6 13px 14px 11px 15px 6px 12px 想统一换个主题色，得翻遍代码

四组有名字的变量

颜色　主题色 1 · 灰阶 6 · 语义色 3

间距　4 / 8 / 16 / 24 / 40 / 64

字号　大标题 / 小标题 / 正文 / 辅助，各配行高

圆角与阴影　圆角 3 档 · 阴影 2 档 组件和页面只引用变量名，改一处全站生效

最容易被忽略的是圆角——一眼说不出问题，但会觉得不精致

同一个界面里出现四种圆角 它们是「像不像一个产品」的重要来源

关键不在用什么技术，在于后续所有地方都引用变量名，不再出现具体数值。而且别急着扩——设计系统的价值在于约束，加得越多约束越弱。

什么时候该长大

• **需要暗色模式时。**颜色那一组要从具体色值改成语义命名：不是「灰-500」，而是「文字-次要」。这样切主题只要换一套映射。

• **有第二个人加入时。**这时候要补组件的使用说明，光有变量不够了。

• **组件超过二十个时。**需要一个能看到全部组件的展示页，否则自己都记不住有哪些。

• **其余时候别扩。**设计系统的价值在于约束，加得越多约束越弱。

给 AI 的话

复制 CLAUDE.md · 设计令牌

## 设计令牌

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

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

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

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

接着看

先定组件后拼页 令牌是地基，组件是上面一层。两层都有了，页面就是拼装。

一套间距 四组变量里的一组。那一篇讲了这六个值分别用在哪。

颜色基础 颜色那一组怎么定：一个主题色、六档灰阶、三个语义色。