设计系统与组件库：从设计 Token 到交付

设计系统是前端团队规模化协作的基石。本文讲清如何从设计 Token 出发，构建可维护的组件库。

设计 Token：设计的最小单位

设计 Token 是「设计决策的变量化表达」，把颜色、字号、间距等抽象为可复用的变量：

:root {
  --color-primary: #4f46e5;
  --space-md: 1rem;
  --radius-lg: 16px;
}

Token 的层级很重要：

• 基础 Token（Primitive）：原始值，如 blue-500；
• 语义 Token（Semantic）：有含义的值，如 color-primary；
• 组件 Token：组件专属，如 button-bg。

分层让「换主题」只改语义层，而不动组件层。

组件库的工程化

• 单一数据源：Token 由 JSON 定义，同时生成 CSS 变量、JS 常量、文档；
• 严格约束：禁止组件使用未定义的 Token，保证一致性；
• 可组合：组件遵循「组合优于继承」，API 简洁一致。

文档化交付

组件库的价值在于被正确使用。文档要包含：

• 每个组件的用法与示例；
• 可交互的 playground；
• 设计规范与最佳实践说明。

Storybook 等工具能大幅降低文档成本。

落地节奏

1. 先梳理现有页面的「重复样式」，提炼基础 Token；
2. 从高频组件（按钮、输入框、卡片）开始沉淀；
3. 建立审查机制，新组件必须先入库再使用。

结语

设计系统不是「一次性做完的组件库」，而是一套持续演进的协作机制。从 Token 做起，逐步组件化、文档化，才能让一致性真正落地。