做设计系统或 UI 组件库选型时,最怕的不是“找不到资源”,而是资源太多、授权不清、落地成本不可控。下面这份清单收录了常见的开源设计系统与组件库入口(覆盖 Web/React 为主),你可以用它快速对照:视觉风格、组件完备度、可访问性、生态与文档质量。
需看协议:Google 的设计规范与相关资源较多,落地时注意具体实现库与素材授权说明。
工具地址:https://ant.design/
免费商用:成熟的企业级设计体系,文档齐全,配套组件生态丰富,适合后台与中台项目。
工具地址:https://react.fluentui.dev/
免费商用:微软 Fluent 设计语言的 React 组件实现之一,适合偏生产力工具与企业应用风格。
工具地址:https://carbondesignsystem.com/
需看协议:IBM 的设计系统站点与资源很完整,商用与品牌使用相关细节建议阅读官方说明。
工具地址:https://getbootstrap.com/
免费商用:经典通用 UI 框架,网格与基础组件易上手,适合快速搭建原型与通用站点。
免费商用:强调可组合与可访问性,主题系统友好,适合需要快速做品牌化的 React 项目。
工具地址:https://www.radix-ui.com/
免费商用:提供无样式但可访问性强的底层组件,适合有自有视觉体系、追求可控性的团队。
需看协议:更像“可复制的组件方案”,适合在 Tailwind 体系里快速搭一套一致的 UI,注意其许可与分发方式。
工具地址:https://mantine.dev/
免费商用:组件丰富、文档清晰,内置 hooks 与主题能力,适合中大型 React 应用快速成型。
需看协议:经典语义化命名的 UI 框架,生态与维护状态需自行评估,适合特定历史项目或快速尝试。
免费商用:GitHub 的设计系统与组件资源,偏克制与可读性,适合开发者工具与内容型界面。
工具地址:https://atlassian.design/
需看协议:体系完整、规范细致,适合做信息密度高的产品,注意其组件实现与授权说明。
工具地址:https://polaris.shopify.com/
需看协议:Shopify 的产品设计系统,面向电商后台与运营场景很有参考价值。
工具地址:https://www.lightningdesignsystem.com/
需看协议:Salesforce 的设计系统,规则与组件结构清晰,适合研究复杂企业产品的信息架构与交互。
工具地址:https://spectrum.adobe.com/
需看协议:Adobe 的设计系统文档质量很高,适合对照可访问性与组件规范,但商用与品牌使用细节需留意。