做设计系统时，最难的往往不是画出一套组件，而是让规范、组件文档、设计 Token、代码实现与发布节奏长期保持一致。一个稳定的系统通常需要三条线并行：设计侧有可版本化的组件与变量，开发侧有可被消费的组件包与主题，协作侧有可被检索与可被审阅的文档与变更记录。下面这份清单按常见工作流把工具分成“组件文档/演示、设计 Token、文档站点、发布与治理、协作评审”几类，你可以按团队规模与技术栈选一两件主工具作为中枢，再用小工具补齐缺口。
Storybook
工具地址：
https://storybook.js.org/
免费商用：开源的组件工作台，可把组件按状态、尺寸、主题等维度拆成可浏览的故事，适合做组件演示、交互回归、API 文档入口与设计对齐讨论。
Chromatic
工具地址：
https://www.chromatic.com/
需看协议：为 Storybook 提供预览部署与视觉回归测试，让“组件是否变样”变成可自动化的检查项，适合在多人协作与主题迭代时减少误伤。
Percy
工具地址：
https://percy.io/
需看协议：跨页面与跨组件的视觉回归测试工具，可用于设计系统升级或大范围换肤时的整体巡检，适合把关键页面当成系统的验收样例。
Backlight
工具地址：
https://backlight.dev/
需看协议：面向设计系统的协作式开发环境，支持组件、文档与代码示例同屏组织，适合跨角色一起维护系统资产并沉淀可复用示例。
zeroheight
工具地址：
https://zeroheight.com/
需看协议：设计系统文档平台，常用于把 Figma 规范、组件说明、写作内容与治理规则整合成可检索知识库，适合强调“可读性与可维护性”的团队。
Docusaurus
工具地址：
https://docusaurus.io/
免费商用：开源的文档站点生成器，适合自建设计系统文档与组件说明站点；与 CI 结合后可获得稳定的版本化、搜索与多语言能力。
GitBook
工具地址：
https://www.gitbook.com/
需看协议：以写作与知识库为中心的文档平台，适合把系统规范、术语表、设计原则、组件使用指南与变更公告放在一个易协作的位置。
Notion
工具地址：
https://www.notion.so/
需看协议：通用协作与知识管理工具，适合做设计系统的治理页面，如命名约定、发布流程、组件提案模板与评审记录，但需要注意信息结构与权限管理。
Figma Libraries
工具地址：
https://www.figma.com/
需看协议：用组件库与变量承载设计侧的“真实来源”，通过发布与版本管理减少多人协作时的组件漂移与命名混乱，并为设计 Token 打好统一口径。
Tokens Studio
工具地址：
https://tokens.studio/
需看协议：在 Figma 中系统化管理颜色、字号、间距等设计 Token，并可导出到代码侧；适合把“视觉变量”从手工同步变成可追溯的资产与变更。
Style Dictionary
工具地址：
https://amzn.github.io/style-dictionary/
免费商用：开源的 Token 构建工具，可把一份 Token 源文件编译成多端格式，如 CSS 变量、iOS/Android 资源与 JSON，并支持自定义转换与命名策略。
Supernova
工具地址：
https://supernova.io/
需看协议：面向设计系统的文档与交付平台，覆盖规范写作、Token 管理与多端导出，适合希望“一个地方管理并发布”的团队，但需要评估与现有工具链的耦合。
Knapsack
工具地址：
https://knapsack.cloud/
需看协议：把代码中的组件与设计系统文档连接起来，提供文档站点、代码片段与同步机制；适合已有成熟前端组件库、希望文档自动跟随代码更新的团队。
Changesets
工具地址：
https://github.com/changesets/changesets
免费商用：开源的变更集与版本管理工具，适合多包仓库与组件库发布；让每次改动都能留下可读的变更说明，并自动生成版本与 Changelog。
semantic-release
工具地址：
https://semantic-release.gitbook.io/semantic-release/
免费商用：开源的自动化发布工具，可基于提交信息生成版本、发布包与发布说明；适合把设计系统的发布节奏规范化，降低“人工发版忘记写记录”的风险。
Renovate
工具地址：
https://www.mend.io/renovate/
免费商用：依赖更新自动化工具，适合持续维护组件库与文档站点的依赖健康度；配合预览与回归测试可减少升级带来的不可控变更。
