夜雨聆风
设计系统建了用不起来?问题出在你把它当文档做了,组件库不是设计系统:把这3件事做对,效率翻3倍
最近翻到一篇 Medium 上 2026 年初的爆款——《Building the Ultimate Design System: A Complete Architecture Guide for 2026》。作者把设计系统讲成了一个”开发平台”，里面三个观点我看了之后深有感触。
我自己在好几家公司带过设计系统的搭建，结果有个规律：建得越漂亮、文档越厚，反而越没人用。
问题到底出在哪？这篇聊聊我看到的真实情况。
看完这篇，你会知道：
-
为什么大多数团队的”设计系统”会变成”摆设” -
真正好用的设计系统，本质是平台而不是文档 -
三个让开发效率翻倍的关键能力（不是再加规范） -
国内团队落地的 4 阶段路线，照着走就行
组件库 ≠ 设计系统，这是第一道坎
原文里有一句话我特别认同：
2026 年，最好的设计系统不再是”组件库”，而是连接设计与代码、自动化无障碍测试、提供极致开发体验的综合开发平台。
这话翻译成大白话：组件库是”零件仓库”，设计系统是”装配车间”。
我见过最常见的情况是：设计师花三个月搭了一个 MasterGo 库，颜色、字号、按钮、卡片全规范好，然后发个链接给开发——大家收藏，然后……继续各写各的。
原因很简单：
-
设计稿里的色值是 Primary/50，代码里却要写 blue.500，映射靠人脑 -
设计师说”这个圆角跟那个不一样”，开发根本看不出区别 -
改一个主色，要改十几个文件，每次都靠 PR review 兜底
HPE 官方在那篇文章里贴了一张”竞品对比表”（HPE UI Resources 拿了 7 个 ✅，其他 5 家全 ❌）。我看完笑了一下——这种表显然是营销材料，所有竞品都被打成了”静态 / 不支持 / 缺失”。但有一句话说得不假：绝大多数设计系统的文档，是”静态”的。
静态意味着什么？看一眼示例，要复制代码到自己工程里跑起来才能验证。结果是：很多新人宁可从 Stack Overflow 抄一段，也不愿去翻文档。
所以问题不是规范不够多，是规范没有”活”在工作流里。
真正的转变：把文档做成”开发平台”
文章给了一个完整目录结构，我把它翻译一下：
design-system/├── extensions/ # 平台扩展（自动 changelog、智能导航、主题）├── src/│ ├── common/ # 共享底座：a11y 自动化、实时编辑、设计稿预览│ ├── components/ # 组件库本体│ ├── layout-patterns/ # 完整页面模板（不是单组件）│ └── design-tokens/ # 单一事实源├── static/ # 静态资源└── build/ # 构建产物这个结构的关键不是”目录怎么分”，是几个底层决策：
1. 用静态站点生成（SSG），不要 CMS
原文用的是 Docusaurus 3.6.3 + React 18 + TailwindCSS。这套组合的好处是：文档本身就是个 React 应用，可以在里面塞交互。
对比：Confluence / Notion / 语雀这种 CMS 后台，文档写得很爽，但要做”实时编辑示例”就只能嵌第三方组件，体验割裂。
国内团队其实可以平替：用 VitePress（Vue 系）或 Rspress（字节出品的 Rspack 文档框架，国产且快），效果一样。
2. 设计 Token 当”单一事实源”
原文给了个例子：
const tokens = { color: { text: { primary: '#1a1a1a', // 自动测对比度 secondary: '#666666', // 满足 WCAG AA disabled: '#cccccc' // 程序校验 } }, spacing: { xs: '4px', sm: '8px', md: '16px', lg: '24px' }};这套 token 一旦在 MasterGo / 即时设计里定义好，通过 Style Dictionary 自动生成 CSS 变量、Sass 变量、Less 变量、iOS Swift 颜色——一份定义，多端消费。
我之前带的项目，光这一步就把”主色是
#1890ff还是#1E80FF“的争论彻底消灭了。3. 把”实时编辑”塞进文档
这是我认为最值钱的一点。原文提到一个数字：传统流程找一个新组件要 30+ 分钟，有了实时编辑降到 2 分钟以内。
差距在哪？看下面两个流程的对比：
传统流程：读文档 → 复制代码 → 粘贴 → 改配置 → 调试 → 改对 → 复制走实时编辑：看示例 → 改两行 → 直接复制可用代码实现成本其实没想象中高。React 生态用 react-live（Formidable Labs 出品），Vue 生态用 vue-live，3-4 天就能集成进文档站。
三个让效率真翻倍的能力
光有目录还不够。文章列了三个”决定胜败”的能力：
能力 1：实时编辑 + 多视口预览
设计师改了组件状态，开发能立刻在手机/平板/桌面三种视口看到效果。不用切窗口，不用问”你那 768px 是怎么显示的”。
能力 2：自动化无障碍（a11y）检测
原文用 axe-core 集成进文档站，每个示例下面挂一个检测面板：
-
✅ 颜色对比度是否满足 WCAG AA -
✅ 键盘 Tab 顺序是否合理 -
✅ 屏幕阅读器读出来是什么
有个数字挺有意思：接入后团队整体无障碍合规率从不到 30% 提到了 **98%**。
这个我有亲身体会——无障碍这种事，靠人记是记不住的，只有工具强制才能稳定。国外有 axe，国内可以用 BitSky（云栖大会开源）或者自建规则集，反正核心是”写到代码里”。
能力 3：设计 Token 全链路打通
设计师在 MasterGo 改一个色值 → 触发 Git 同步 → 文档站自动重生成 → 组件库版本号 +1 → 通知所有消费方。
这一条线打通，意味着设计系统不再是”季度更新”，而是小时级更新。开发再也没理由说”最新版还没出”。
国内团队怎么落地：4 阶段 8 周
原文给了 4 个阶段、8 周时间表。我把工具和参考换成国内可用的：
Phase 1：基础建设（第 1-2 周）
搭文档站（VitePress / Rspress / Docusaurus 三选一）、配 CI、配域名。不要追求组件数量，先把骨架立起来。
Phase 2：实时编辑（第 3-4 周）
集成 react-live / vue-live，把现有 Top 10 组件全部改成”可编辑示例”。这一步做完，文档的”可玩性”会立竿见影。
Phase 3：无障碍自动化（第 5-6 周）
接 axe-core，给每个组件示例加 a11y 检测面板。这时候会发现平时根本不会注意的几十个问题——别慌，正常。
Phase 4：Token 全链路（第 7-8 周）
用 Style Dictionary 或国产的 design-token-toolkit，把 MasterGo / 即时设计的 token 自动化流转起来。配 GitLab / Gitee Webhook，做到”设计师改一次，全员收到”。
Pro tip：不要一上来就追求”全平台统一”。先把 Web 端跑通，让业务团队用上、建立信心，再扩展到 iOS / Android / 小程序。
几个值得说清楚的争议
文章里有些数据我得给你提个醒：
“300% 效率提升”怎么算的？
原文反复提”开发时间从 30 分钟降到 2 分钟”、”效率提升 300%”。这种数据通常来自单一团队、单一项目，没有对照组。我自己的项目实测大概是从 25 分钟降到 8 分钟，提升 200% 左右，但样本更小。
参考价值在，但别照搬。
“98% 无障碍合规”是自动测的，不是真实用户测的
axe-core 能抓到 30-40% 的常见问题，剩下 60% 需要真人测试员（特别是认知障碍、视障、听障用户）。这个数字听起来漂亮，但别拿出去当”我们无障碍做好了”的证据。
HPE 那张竞品对比表，纯营销
我前面说了，全是 ✅ 给自己，其他全 ❌。真实情况是：TDesign（腾讯）、Ant Design、Arco（字节）这国内三家，实时编辑这块确实没官方支持，但 a11y、Token、多端覆盖这三块都做得很扎实。
别迷信”国外方案照搬”
Docusaurus + react-live + axe-core 这套在国外很顺，但国内团队要注意：
-
文档站最好部署到国内 CDN（阿里云 / 腾讯云），别直接用 GitHub Pages -
Figma 生态要换成 MasterGo / 即时设计，否则会卡在国内协作这一环 -
a11y 标准可以参考 WCAG，但合规层面要走国标 GB/T 37668-2019
结尾的真心话
设计系统这件事，做了 5 年，我最大的感受是：
它不是”文档项目”，是”工程产品”。
建组件库一周就能搭起来。但让它真正”活”在团队里——需要文档能玩、Token 能同步、a11y 自动测、CI 能跑——没有 3-6 个月干不下来。
原 HPE 文章写得很漂亮，技术细节也到位。但把它的目录结构照搬，大概率你会死在”为什么同事不更新”上。
我的建议：
-
先让 2-3 个核心组件真在生产环境用起来，比”100 个组件没人用”强一万倍 -
实时编辑和 a11y 自动化是 ROI 最高的两个能力，优先做 -
Token 全链路是”加分项”，但不是必做项——很多团队不做这一项也活得挺好 -
国内团队选型时，文档站、CI、CDN 这三块要本地化，别全套照搬国外工具链
如果你也在搭设计系统，或者正在踩坑，欢迎评论区聊聊你遇到的问题。我整理了一些实操模板和工具对比，后面会单独写一篇。
关于这个话题，我还有一些想聊的，但今天先到这里。如果你对设计系统 / 设计协作 / 设计 token 这些话题感兴趣，或者有什么想补充的，评论区见。也欢迎告诉我你最想看哪类内容，我来安排。
推荐阅读
2026年设计趋势：AI浪潮下，设计正在”反水”，12个趋势正在重塑产品设计
一个人能搞的设计系统：从零到跑起来，我把手经验全在这了，小团队/个人设计师的实战指南
2026年生成式AI的10个趋势：正在重塑工作和生活的游戏规则，真实感成了稀缺品、隐私成了竞争力