为什么我给每个独立项目都建一套设计系统——哪怕只有一个页面

很多人觉得设计系统是大公司的专利——团队规模大、产品线多，才需要一套统一的规范来保持一致性。如果只是做一个单页面的小工具，花时间建设计系统，听起来像是过度工程。

但我自己这两年做了三十多个独立小项目后发现：恰恰是小项目，更需要一套"最小可用"的设计系统。原因很简单——小项目往往是一个人从设计到开发全包，没有人帮你把关一致性，全靠自己当时的状态。而"当时的状态"是不可靠的。

1. 没有规范会发生什么

回看我早期的项目代码，经常能找到这样的场景：同一个页面里，按钮的圆角一会儿是 6px，一会儿是 8px，一会儿又是 10px；间距用了 12px、14px、16px 三种相近但不同的值；灰色文字的色值在不同组件里写了五种不同的 hex。

这些差异单独看几乎察觉不到，但放在一起，页面就会有种说不出的"不齐"。更麻烦的是后期维护——改个主题色，要在十几个地方分别替换，还经常漏改。

2. 最小可用设计系统长什么样

我现在给每个新项目开局都会先花 20-30 分钟，定义这几样东西：

• 色板 — 6 个核心颜色：背景、卡片背景、主文字、次要文字、品牌色、强调色
• 字号阶梯 — 4-5 级字号，比如 12 / 14 / 16 / 24 / 36，覆盖从注释到大标题的所有场景
• 间距阶梯 — 用 8px 为基数的等比或近似等比数列：8 / 16 / 24 / 32 / 48 / 64
• 圆角规范 — 通常只需要 2 档：小元素（按钮、标签）用一个值，卡片容器用另一个稍大的值

就这四类，加起来不超过20个变量，但能解决90%的不一致问题。

3. 用 CSS 变量落地 token

定义好之后，第一件事就是写进 CSS 变量里，整个项目只引用变量，不直接写魔法数字：

/* 色板 */
:root {
  --bg: #0A0A0F;
  --card: #13131c;
  --text: #E8E8E8;
  --text-muted: #888890;
  --duck: #F5C842;
  --accent: #FF6B35;

  /* 间距阶梯 */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;

  /* 圆角 */
  --radius-sm: 8px;
  --radius-lg: 16px;
}

这一步看起来很基础，但效果立竿见影：当你改主题色时，只需要改一行；当设计师（也就是几天前的你自己）想统一所有间距时，也只需要改几个变量值。

4. 我的实际工作流

具体到每个新项目，我的流程大概是这样：

1. 先想清楚这个产品/页面要传达什么"调性"——是专业严肃、活泼有趣，还是极简克制
2. 基于调性选 1-2 个主色，搭配中性色（背景、文字）
3. 套用上面提到的字号和间距阶梯模板，微调一两个值
4. 把 token 写进 CSS 变量文件，作为整个项目的"地基"
5. 开始写组件时，强制要求自己只引用变量，不写新的颜色和间距数值

整个过程加起来不到半小时，但能让后续几天甚至几周的开发过程少踩很多"这两个间距是不是不太一样"的小坑。

设计系统的本质不是"为了规范而规范"，而是把一致性的判断成本，提前一次性付清。付清之后，剩下的时间就可以专心做真正重要的事——把内容和交互做好。