设计系统的组织方式如何变化

2015
第一代:样式指南(Style Guide)
Google Material Design 发布,设计系统概念开始普及。本质上是一份 PDF 文档或静态网页,告诉设计师"颜色、字体、间距是什么"。问题:文档和实际设计稿几乎总是脱节的。
2019
第二代:组件库(Component Library)
Figma 让可复用组件成为常规工作方式,Storybook 让前端组件可被查看和维护。设计与代码开始建立对应关系,也带来了两侧同步的问题。
2023
第三代:Token 驱动的多模式系统
Figma Variables 上线,W3C Design Token 规范草案成熟。Token 成为设计和代码的统一语言——一个 color.primary 既是 Figma 里的变量,也是代码里的 CSS 变量,品牌切换只需要换一套 Token 文件。
2025
第四代:面向自动生成的系统
Cursor、v0 等工具可以快速生成组件,团队需要让 Token、组件语义和使用规则更容易被机器读取,也更方便人工检查。

Design Token:设计与代码的统一语言

Design Token 把颜色、间距、圆角和组件语义连接到设计与代码。理解它的分层方式,是建立多主题和多品牌系统的基础:

原始 Token(Primitive)
color.blue.500 = #3b82f6
color.blue.600 = #2563eb
spacing.4 = 16px
radius.lg = 12px
→
语义 Token(Semantic)
color.brand.primary = {color.blue.500}
color.action.hover = {color.blue.600}
spacing.component.gap = {spacing.4}
border.button.radius = {radius.lg}

这套分层架构的威力在于:切换品牌主题时,只需要修改语义 Token 指向的原始 Token 值,所有组件自动更新。一个设计系统可以支撑 10 个品牌,而不需要维护 10 套组件库。Figma Variables 的多模式功能(Light/Dark/Brand A/Brand B)正是这套理念的直接实现。

自动化工具可以参与哪些工作

01
组件代码自动生成

v0 by Vercel、Anima、Locofy 可以从 Figma 设计稿直接生成 React/Vue 组件代码。在有完善 Token 系统的前提下,生成的代码质量已经可以作为起点直接进入 PR 审核流程,而非从零手写。

02
组件使用分析

Figma 的 Analytics 功能 + AI 分析可以告诉你哪些组件被高频使用,哪些已经成为"僵尸组件"。这让设计系统的维护从经验驱动变为数据驱动——砍掉没人用的组件,重点打磨高频组件。

03
自动无障碍检测

AI 辅助的无障碍检测工具(axe AI、Stark)可以在设计阶段就标记对比度不足、缺少 alt text、焦点顺序错误等问题。设计系统可以内置这些检测规则,让每个组件在发布前自动通过基础无障碍检查。

04
文档自动生成

Zeroheight、Supernova 等平台可以根据组件属性和使用示例生成文档初稿,适合补齐重复说明,但发布前仍需要检查状态、例外和研发约束。

AI 带来的新挑战

01
一致性碎片化
当工程师直接用 v0 生成组件而不从设计系统取用时,Token 系统形同虚设——组件的间距、颜色、圆角开始出现"AI 味"的随机性,而不是系统规范的一致性。
02
语义合规性无人把关
AI 生成的按钮可能看起来完全正确,但可能使用了错误的语义 HTML(比如用 div 代替 button),导致键盘导航失效、屏幕阅读器无法识别——这类问题在视觉检查中完全无法发现。
03
维护者的角色转变
维护者需要同时制定规则、审核自动生成结果、处理各团队的例外,并判断何时把新模式纳入系统。

我在系统维护中关注什么

在 Pisell 主导设计系统从 0 到 1 的过程中,我逐步把基础规则、组件状态、配置项和研发说明放到同一套维护方式里。组件数量增加以后,命名和状态规则比单个界面的完成度更影响协作。

Token 架构可以帮助自动生成的界面继续使用团队已有的品牌与语义规则,但前提是命名清楚、层级稳定,并有对应的组件状态和代码约束。

设计系统负责人还需要持续和产品、设计、研发对齐:哪些情况应该复用,哪些情况允许例外,何时需要把新模式收回系统。

设计系统需要让团队在变化中仍能做出一致的选择。Token 提供语言,组件提供边界,文档和评审负责把规则落到实际产品中。

AI 协作边界 Senya · 设计思考 Vibe Coding