整理一份「设计系统与组件库」相关的资源清单,覆盖 UI Kit、组件库、Design Token、文档生成与版本管理等关键环节。本文不讲“怎么用这份清单”,只把靠谱入口集中放在一起,方便你按团队规模与技术栈快速选型与对照。
工具地址:https://www.figma.com/community
需看协议:大量资源为社区作者发布,授权条款差异很大;下载前先看每个文件的 License/Usage。
适合快速找到行业通用组件库、Dashboard 模板、图标与栅格体系参考。
免费商用:作为公开设计规范与参考实现,适合用于对照交互与无障碍原则。
重点看 Color、Typography、Layout 与组件行为说明,能快速补齐“为什么这样设计”。
工具地址:https://ant.design/
免费商用:开源组件库(具体以其 License 为准),适合中后台与复杂表单场景。
组件覆盖面大,配套的设计语言与交互细节可直接作为设计系统基线。
工具地址:https://www.radix-ui.com/
免费商用:开源为主(以其 License 为准),适合想“自定义视觉但复用交互”的团队。
对键盘操作、焦点管理、ARIA 等细节处理扎实,能减少设计/前端对齐成本。
免费商用:开源组件库(以其 License 为准)。
主题与 Token 思路清晰,适合把颜色/字号/间距沉淀成可复用的系统变量。
需看协议:商业产品,购买后按其授权条款使用。
适合在交付压力大时用来做“视觉与布局起步”,再逐步沉淀成自己的组件规范。
工具地址:https://storybook.js.org/
免费商用:开源项目(以其 License 为准)。
把组件当成“产品”管理:展示状态、变体、交互说明,设计与研发对齐会更高效。
需看协议:SaaS 服务,套餐与使用范围以其条款为准。
适合把原则、组件规范、使用禁忌与示例集中管理,尤其适用于多团队协作与持续迭代。
需看协议:插件/服务形态,功能与团队协作方式以其条款为准。
能把颜色、字号、间距、阴影等 Token 结构化管理,并输出到代码侧做统一消费。
工具地址:https://amzn.github.io/style-dictionary/
免费商用:开源工具(以其 License 为准)。
适合把同一套 Token 编译成 Web/Android/iOS 等不同平台的变量格式,减少跨端不一致。
免费商用:开源项目(以其 License 为准)。
当你想把设计系统文档自托管、和代码仓库同源维护时,这是很常见的工程化选择。
工具地址:https://github.com/changesets/changesets
免费商用:开源工具(以其 License 为准)。
适合管理组件库的变更记录、语义化版本与发布流程,让“设计系统迭代”可追溯、可协作。