当产品从0到1进入稳定迭代阶段,设计系统和组件库能把颜色、字号、栅格、控件状态与交互规则统一起来,让多人协作时减少返工,也更容易做一致的多端体验。下面这份清单按“平台规范/品牌设计系统/组件库”整理,使用前建议先看各站点的授权说明。
Material Design (Material 3)
工具地址:
https://m3.material.io/
免费商用:Google 的设计系统规范,包含颜色系统、动态、组件与无障碍建议,适合移动端与Web参考。
Apple Human Interface Guidelines
工具地址:
https://developer.apple.com/design/human-interface-guidelines/
免费商用:Apple 官方平台规范,覆盖iOS/iPadOS/macOS等控件行为、排版与交互模式。
Microsoft Fluent Design System
工具地址:
https://fluent2.microsoft.design/
免费商用:微软 Fluent 2 设计系统,包含令牌、组件与动效原则,适合Windows与跨平台产品。
IBM Carbon Design System
工具地址:
https://carbondesignsystem.com/
免费商用:面向企业产品的设计系统示例,文档完整,组件状态与内容规范写得很细。
Ant Design
工具地址:
https://ant.design/
免费商用:常用的企业级React组件库,配套设计语言与组件规范,适合后台与管理系统。
Atlassian Design System
工具地址:
https://atlassian.design/
需看协议:Jira/Confluence 背后的设计系统,信息架构与可用性指导很强,但使用其品牌资产需留意条款。
Shopify Polaris
工具地址:
https://polaris.shopify.com/
需看协议:电商后台体验的经典范例,组件与内容策略值得借鉴,商用集成前建议核对许可。
SAP Fiori Design Guidelines
工具地址:
https://experience.sap.com/fiori-design-web/
免费商用:SAP 官方企业产品规范,表格、过滤、信息密度与业务场景组件覆盖很全。
Bootstrap
工具地址:
https://getbootstrap.com/
免费商用:老牌前端UI框架,适合快速搭建原型与中后台页面,栅格与表单组件成熟稳定。
MUI (Material UI)
工具地址:
https://mui.com/
免费商用:基于Material理念的React组件库,主题定制与组件覆盖广,文档易上手。
Chakra UI
工具地址:
https://chakra-ui.com/
免费商用:强调可访问性与可组合性的React组件库,适合用“原子化组件”快速拼装页面。
Radix UI
工具地址:
https://www.radix-ui.com/
免费商用:提供无样式的可访问组件基座,适合自定义视觉但想复用交互逻辑与键盘行为。
shadcn/ui
工具地址:
https://ui.shadcn.com/
免费商用:以可复制代码为核心的组件方案,搭配Tailwind快速落地;适合需要高度可控的项目。
Tailwind UI
工具地址:
https://tailwindui.com/
需看协议:官方付费组件与页面模板库,适合提速交付;商用与分发限制请按官网许可执行。