设计系统的本质：如何从零构建可扩展的组件库

当你负责的项目从1个变成5个、10个的时候，你会发现一个问题：每个项目都有自己的按钮样式、自己的配色方案、自己的交互逻辑。维护成本急剧上升，设计不一致的问题层出不穷。

设计系统，就是为解决这些问题而生的。

设计系统是什么？

很多人把设计系统等同于组件库，但这只是表象。完整的 设计系统包括：

• **设计原则** — 指导所有设计决策的核心价值观
• **设计令牌** — 颜色、字体、间距等基础变量
• **组件库** — 可复用的UI组件
• **模式库** — 常见交互模式的解决方案
• **文档** — 使用说明和最佳实践

构建设计系统的步骤

第一步：审计现有设计 在构建新系统之前，先梳理现有的设计资产： - 收集所有产品中的UI截图 - 整理现有组件的使用场景 - 识别重复和变体 - 总结设计模式的共性

第二步：定义设计令牌 设计令牌是设计系统的基础，它们会被转换为CSS变量或JavaScript对象：

{
  "color": {
    "primary": "#c45c3e",
    "secondary": "#666666",
    "background": "#faf9f7"
  },
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px"
  },
  "fontSize": {
    "sm": "14px",
    "base": "16px",
    "lg": "18px",
    "xl": "24px"
  }
}

第三步：构建原子组件 从最基础的组件开始： - Button 按钮 - Input 输入框 - Badge 标签 - Avatar 头像

每个组件都应该： - 有清晰的状态定义（default, hover, active, disabled, loading） - 有适当的props/API - 有对应的文档和使用示例

第四步：组合复杂组件 基于原子组件，组合出更复杂的组件： - Card = Avatar + Title + Description + Button - Modal = Overlay + Container + Header + Body + Footer

命名规范

统一的命名规范是协作的基础。推荐使用语义化的命名：

/* ❌ 不推荐 */
.btn-red { background: red; }
.text-18 { font-size: 18px; }

/* ✅ 推荐 */ .btn-danger { background: var(--color-danger); } .text-lead { font-size: var(--font-size-lg); } ```

文档的重要性

再好的设计系统，如果没有好的文档，也会被人遗忘。文档应该包含： - 组件的使用方法 - 适用场景和最佳实践 - 不适用场景 - 可访问性考虑

结语

设计系统是一个持续迭代的过程。不要想着一口气构建完美系统，从最小的可用集开始，在实践中不断完善。团队协作是设计系统成功的关键，确保每个人都理解并遵循系统的规范。