从零开始构建设计系统

为什么设计系统很重要

设计系统不仅仅是组件库。它是设计与工程之间共享的语言——是产品外观、感觉和行为的唯一权威来源。

没有它，每个新功能都要从零开始。一致性会被侵蚀，速度会下降。

基础：设计令牌（Design Tokens）

设计令牌是设计系统的原子单位。它们代表每个视觉属性：颜色、字体、间距、阴影等等。

// 结构良好的令牌系统
const tokens = {
  colors: {
    primary: { 500: '#d4a853' },
    neutral: { 900: '#111111', 950: '#0a0a0a' },
  },
  typography: {
    heading: 'Playfair Display, serif',
    body: 'Inter, sans-serif',
  },
  spacing: {
    xs: '0.25rem',
    sm: '0.5rem',
    md: '1rem',
    lg: '2rem',
    xl: '4rem',
  },
};

优秀系统的原则

1. 约束而非限制

一个好的系统提供护栏，而非手铐。它应该让正确的做法变得容易，同时在需要时仍允许创造性发挥。

2. 活的而非静态的

设计系统是不断演进的。从小处着手——几种颜色和几个组件——随着真正的需求产生而有机增长。过早抽象是系统臃肿的根源。

3. 用实例来记录

最好的文档展示的是在具体场景中的组件，而非孤立存在的。一个有真实使用示例的按钮组件文档，远比一张属性表有价值。

如何开始

最大的错误是试图一次性构建整个系统。正确的做法是：

1. 审查现有 UI 中的不一致之处
2. 提取最常见的模式
3. 将这些模式标准化为令牌和组件
4. 重复以上步骤

---

设计系统是一段旅程，而非一个目的地。