从零搭建设计系统：原则与实践

设计系统是将设计与工程连接起来的桥梁。好的设计系统能让团队用更少的决策做出更好的产品。

什么是设计系统？

设计系统 = 设计语言 + 组件库 + 文档

它不仅仅是一堆可复用的 React 组件，更是团队共识的编码。

从 Design Tokens 开始

Design Tokens 是设计系统的原子：颜色、字体、间距、圆角……

// tokens.ts
export const tokens = {
  colors: {
    primary: { 50: '#f0f9ff', 500: '#0ea5e9', 900: '#0c4a6e' },
    gray: { 50: '#f9fafb', 500: '#6b7280', 900: '#111827' },
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '40px',
  },
  fontSizes: {
    sm: '0.875rem',
    base: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
    '2xl': '1.5rem',
  },
} as const;

组件分层

Primitives（原子组件）
  └── Button, Input, Badge, Avatar
Composites（复合组件）
  └── SearchInput, UserCard, PostCard
Patterns（模式）
  └── LoginForm, DataTable, NavigationMenu
Templates（页面模板）
  └── DashboardLayout, AuthLayout

文档即契约

文档是设计系统的生命线。我推荐 Storybook：

每个组件需要文档化：

• 用途：什么时候用，什么时候不用
• 变体：所有 props 的组合展示
• 可访问性：键盘导航，ARIA 属性
• 使用示例：真实场景代码

常见误区

1. 过早抽象：只有重复 3 次以上的模式才值得抽象

2. 过度设计：从简单开始，按需扩展

3. 忽略文档：没有文档的组件不如没有

设计系统是持续演进的，不是一次性工程。保持克制，专注价值。