当团队开始做组件库、设计规范和多端一致性时，最大的阻力往往不是“没有规范”，而是“规范落不了地”：组件示例分散、Tokens 不统一、更新没人知道、历史版本不可追溯。下面这份清单按常见工作流把工具分成几类，你可以按现状挑选 1-2 个先跑通，再逐步补齐。
工具地址：https://storybook.js.org/
免费商用：开源组件开发与文档平台，适合把组件状态、交互和变体集中展示。
配合 CI 可自动构建静态站点，方便在团队内发布与回归检查。
免费商用：面向 Vue/Svelte 等生态的组件文档与示例工具，配置相对轻量。
适合小团队快速把“可运行示例 + 文档”先搭起来。
工具地址：https://github.com/seek-oss/playroom
免费商用：提供可编辑的组件游乐场，让设计/前端更直观探索组件组合。
常用于设计系统中“快速拼装页面片段”的实验区。
需看协议：专注设计系统文档的托管平台，能把设计资产、规范与组件说明组织成站点。
适合需要“面向全公司发布规范”的场景，权限与协作能力更完善。
免费商用：开源文档站生成器，适合把规范、原则、组件说明统一成可版本化的文档站。
与 Git 仓库结合后，更新有审阅、有记录，适合长期维护。
工具地址：https://squidfunk.github.io/mkdocs-material/
免费商用：基于 Markdown 的文档站方案，主题成熟，搜索与导航体验很好。
常用于把“规范/流程/组件说明”以工程化方式沉淀。
需看协议：在线协作文档平台，上手快、多人编辑方便，适合做设计系统的知识库入口。
如果团队不想自建部署，GitBook 的托管体验会省心很多。
需看协议：在 Figma 内管理颜色、字号、间距等 Tokens，并可导出到工程侧。
适合想把“设计侧变量”与“代码侧变量”打通的团队。
工具地址：https://amzn.github.io/style-dictionary/
免费商用：开源 Tokens 构建工具，可把同一份 Tokens 生成 iOS/Android/Web 等多端格式。
关键价值是：统一来源，自动化输出，减少手工维护与漏改。
需看协议：把设计资源与 Tokens 组织成可复用的系统，并提供同步、校验和导出能力。
适合规模更大的团队做“规范治理”和跨团队复用。
需看协议：支持从设计工具同步到文档站，并结合 Tokens/组件信息生成系统化规范。
更偏“一体化平台”，适合对发布与协作要求高的组织。
工具地址：https://penpot.app/
免费商用：开源的界面设计与原型工具，支持团队协作，适合需要可自托管方案的团队。
可作为 Figma 的补位方案，用于成本控制或合规需求。
需看协议：协作设计平台，组件库、变量、权限与协作生态完善，是设计系统常见的设计侧中心。
建议把组件命名、发布流程和变更日志一起规范化，避免“库越做越乱”。
最常见的组合是：设计侧（Figma/变量或 Tokens 插件）→ Tokens 构建（Style Dictionary）→ 组件文档（Storybook）→ 规范站点（Docusaurus/MkDocs/zeroheight）。先定“单一事实来源”（Tokens/组件定义在哪里），再定“发布节奏”（每周/每迭代更新），最后补齐“校验与通知”，效率会提升得更明显。
