UI 设计系统搭建：从原子设计到组件库的工程化实践

一、设计系统的价值不在组件在一致性

很多团队花 3 个月搭了一套设计系统，但产品上线后大家继续用 Sketch 画"差不多"的组件往 Figma 里贴。设计系统失败的原因不是组件不够多，而是没有建立"修改设计系统比另起炉灶更容易"的土壤。当一个设计师发现"自己画一个按钮比找到系统组件还快"时，设计系统就已经死了。

设计系统的成功需要三点：组件覆盖 80% 场景、改动成本低于重建成本、文档清晰到产品经理也能看懂。脱离这三点，设计系统就是一份没人用的 PDF。

二、原子设计方法论

一）从小到大的层级构建

原子设计把界面元素按复杂度分为原子、分子、组织、模板、页面五层。原子是颜色和字体等基础 token，分子是按钮和输入框等基础组件，组织是导航栏和卡片等复合组件。关键原则是：修改只能在原始层级进行——改了原子的颜色，所有用到这个颜色的分子和组织自动更新。

二）Design Token 的工程化

Design Token 是设计系统最核心的概念——把颜色、字体、间距、圆角等基础属性定义为命名的变量。`color-primary: #6366f1` 这种定义让设计和开发说同一种语言。更进一步，可以用 Style Dictionary 这类工具把设计 token 自动生成为 iOS、Android、Web 三端的原生代码，消除设计到开发的手动翻译环节。

三、设计系统维护的节奏

设计系统不是一次性交付物。建议以季度为周期收集使用反馈——哪个组件大家从来不用（应废弃）、哪个组件大家频繁自己写（应添加）。每次产品大版本迭代时同步更新设计系统组件库，让系统跟着产品生长而不是等着被淘汰。