Build a Minimal Design System
Four sets of variables, twenty-odd lines of code, and the whole project's styling converges. It's the highest-ROI one-time action you can take.
- 想统一调整主题色，发现十几个文件里都写死了色号
- 每个页面的圆角、阴影、灰度都不太一样
- 让 AI 做新页面，它的配色跟前面几页对不上
Hearing "design system" you picture a spec document of hundreds of pages — that's a product of large-team collaboration. What a solo builder needs is just one layer: collect the values scattered everywhere into a set of named variables. Every later component and page references these names, and styling stays consistent on its own.
Four Sets of Variables
| 组 | 包含什么 | 数量建议 |
|---|---|---|
| 颜色 | 主题色、灰阶、语义色 | 主题色 1 个（可拉 3 档深浅）、灰阶 6 档、语义色 3 个 |
| 间距 | 4 的倍数序列 | 6 个：4 / 8 / 16 / 24 / 40 / 64 |
| 字号 | 字号加配套行高 | 4 个：大标题 / 小标题 / 正文 / 辅助 |
| 圆角与阴影 | 圆角档位、阴影层级 | 圆角 3 档、阴影 2 档。多了会显得杂 |
Put them in one file, using CSS variables or your framework's token mechanism. The technique doesn't matter — what matters is that everything afterwards references the variable name, with no literal values anywhere.
When to Let It Grow
- When you need dark mode. The color group has to move from concrete values to semantic names: not "gray-500," but "text-secondary." That way switching themes is just swapping one mapping.
- When a second person joins. Now you need usage docs for components—variables alone aren't enough anymore.
- When components exceed twenty. You need a showcase page that can display all of them, otherwise even you won't remember what's there.
- Otherwise, don't expand. A design system's value is in its constraints; the more you add, the weaker they get.
Note for the AI
## 设计令牌 全部样式变量定义在 src/styles/tokens.css，共四组： 颜色、间距、字号、圆角与阴影。 强制要求： - 任何组件和页面里都不允许出现具体的颜色值、 间距数值、字号、圆角值。一律引用变量。 - 需要一个令牌里没有的值时，先说明用途和建议值， 等我确认后加进 tokens.css，不要就地写死。 - 新增令牌时保持命名风格一致，并说明它跟已有令牌的关系。 生成任何界面代码之前，先读一遍 tokens.css。 生成之后，检查有没有硬编码的数值并报告。
That last line stops most style drift. The AI happily writes a literal `#3b82f6` while coding; an active check costs very little.