设计系统文档与组件库工具清单|规范、Token与协作维护

设计系统并不是一套“漂亮的组件库”就结束了:它通常需要组件开发与预览、规范文档的持续维护、Design Tokens 的统一来源,以及能让设计与开发一起协作的发布/审阅流程。下面这份清单按常见工作流挑选了几类工具,你可以按团队规模与技术栈自由组合。

Storybook

工具地址:https://storybook.js.org/

免费商用:开源的组件开发与展示环境,适合做组件示例、交互回归与文档化展示。

Chromatic

工具地址:https://www.chromatic.com/

需看协议:为 Storybook 提供托管、可视化回归测试与评审流程,适合做组件变更的“可见审计”。

Docusaurus

工具地址:https://docusaurus.io/

免费商用:开源静态站点生成器,适合搭建设计系统/工程规范/组件文档的统一门户。

Backstage

工具地址:https://backstage.io/

免费商用:Spotify 开源的开发者门户,可把组件库、文档、服务目录与工具链聚合到一处。

Style Dictionary

工具地址:https://amzn.github.io/style-dictionary/

免费商用:开源的 Design Tokens 构建工具,把颜色/字号/间距等 Token 编译成多端可用的格式。

Figma

工具地址:https://www.figma.com/

需看协议:常见的设计组件库与规范承载工具,适合做组件变体管理、设计评审与交付对齐。

Tokens Studio

工具地址:https://tokens.studio/

需看协议:以插件方式在设计侧管理 Tokens,并可导出到代码侧,适合“设计即源”的 Token 流程。

Zeroheight

工具地址:https://zeroheight.com/

需看协议:专注设计系统文档的 SaaS,可整合 Figma、Storybook 等内容,形成对外可读的规范站点。

Penpot

工具地址:https://penpot.app/

免费商用:开源设计工具,适合想自建或偏好开源协作的团队,亦可作为组件库与规范的起点。

Bit

工具地址:https://bit.dev/

需看协议:组件化发布与复用平台,适合把组件当成“产品”来版本化、分发与跨项目复用。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

暂无评论,快来抢沙发吧~

操作成功