设计系统并不是一套“漂亮的组件库”就结束了:它通常需要组件开发与预览、规范文档的持续维护、Design Tokens 的统一来源,以及能让设计与开发一起协作的发布/审阅流程。下面这份清单按常见工作流挑选了几类工具,你可以按团队规模与技术栈自由组合。
工具地址:https://storybook.js.org/
免费商用:开源的组件开发与展示环境,适合做组件示例、交互回归与文档化展示。
工具地址:https://www.chromatic.com/
需看协议:为 Storybook 提供托管、可视化回归测试与评审流程,适合做组件变更的“可见审计”。
免费商用:开源静态站点生成器,适合搭建设计系统/工程规范/组件文档的统一门户。
免费商用:Spotify 开源的开发者门户,可把组件库、文档、服务目录与工具链聚合到一处。
工具地址:https://amzn.github.io/style-dictionary/
免费商用:开源的 Design Tokens 构建工具,把颜色/字号/间距等 Token 编译成多端可用的格式。
需看协议:常见的设计组件库与规范承载工具,适合做组件变体管理、设计评审与交付对齐。
需看协议:以插件方式在设计侧管理 Tokens,并可导出到代码侧,适合“设计即源”的 Token 流程。
需看协议:专注设计系统文档的 SaaS,可整合 Figma、Storybook 等内容,形成对外可读的规范站点。
工具地址:https://penpot.app/
免费商用:开源设计工具,适合想自建或偏好开源协作的团队,亦可作为组件库与规范的起点。
工具地址:https://bit.dev/
需看协议:组件化发布与复用平台,适合把组件当成“产品”来版本化、分发与跨项目复用。