设计系统的三代进化

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
第四代:AI 驱动的活体系统(Living System)
AI 代码生成开始威胁和改变组件库的存在形式。GitHub Copilot、Cursor、v0 可以"凭空"生成界面组件,不再需要从设计系统中取用——这既是机遇(加速产出),也是巨大挑战(一致性碎片化)。

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

Design Token 不是新概念,但 2025 年它的战略地位已经上升到设计系统的核心。理解 Token 的分层架构,是现代 Design System 设计师的基本功:

原始 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)正是这套理念的直接实现。

AI 正在扮演什么角色?

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,可以从组件的属性和使用示例自动生成文档初稿,大幅降低设计系统文档的维护成本——这曾经是 Design System 团队最头疼的工作之一。

AI 带来的新挑战

⚠️
一致性碎片化
当工程师直接用 v0 生成组件而不从设计系统取用时,Token 系统形同虚设——组件的间距、颜色、圆角开始出现"AI 味"的随机性,而不是系统规范的一致性。
🔐
语义合规性无人把关
AI 生成的按钮可能看起来完全正确,但可能使用了错误的语义 HTML(比如用 div 代替 button),导致键盘导航失效、屏幕阅读器无法识别——这类问题在视觉检查中完全无法发现。
🔄
维护者的角色转变
设计系统从"创建者"转变为"仲裁者"——你的核心工作不再是画组件,而是制定规则、审核 AI 输出、处理各团队的例外申请,以及决定何时该更新系统以纳入新的模式。

2025 年的 Design System 设计师应该做什么

我在 Pisell 主导设计系统从 0 到 1 的过程中,对这些变化有很深的感受。我们的 100+ 组件库在建设过程中恰好经历了从纯手工维护到部分 AI 辅助的转型。

我的核心判断是:Token 架构设计能力将成为 Design System 设计师最核心的差异化技能。能建立完善的 Token 系统的设计师,可以让 AI 生成的代码自然地落入规范;没有 Token 系统的团队,AI 的加入只会加速混乱。

另一个关键变化:Design System 设计师需要越来越强的跨职能权威——不是靠职位,而是靠规范的专业性和沟通能力,让工程团队在使用 AI 生成代码时,也愿意主动对照设计系统的规范进行校验。

设计系统的终极目标从未改变:让每一个触点的用户体验保持一致。AI 改变的只是实现这个目标的路径——Token 是语言,AI 是加速器,而设计师依然是那个决定"什么是对的"的人。

← AI 协作边界 2025 · senya 设计思考 Vibe Coding →