图形用户界面设计系统盘点，为您选出12个web GUI开发框架，供选型参考。
设计系统
设计系统（Design System）通常指“用于指导产品外观与体验设计的原则和工具”。在本文中特指基于WEB技术的软件图形用户界面设计系统（Web GUI Design System）。
设计系统不仅仅是成品图形界面组件库，通常包含：
- 设计原则和规范：这些是设计决策的基础，包括品牌指导、用户体验原则等。
- UI组件库：一套预先设计好的用户界面元素，如按钮、输入框、导航栏等，这些元素可以在多个项目中重复使用。
- 代码组件：与UI组件相对应的前端代码，它们使设计能够直接转化为软件开发中的实际元素。
- 文档和指南：详细记录了如何使用设计系统的各个组件和原则，通常以在线格式提供，方便团队成员查阅。
- 工具和资源：支持设计和开发流程的各种工具，如设计模板、代码库、设计软件的插件等[2]。
维护一套设计系统耗费人力物力，具备有足够数量界面设计岗位人才的公司才会有精力沉淀设计系统。大型软件厂商或云服务供应商为增加影响力往往会开源自己的设计系统。这也给你提示，如果在你使用某个软件时喜欢他们的设计风格，就可以去官方网站找找看有没有开源出设计系统。
入选条件
- 有活跃的网站承载文档（例如设计知识、使用手册、演示学习）
- 具有开源性质的License（例如MIT、Apache2等）
- 能获取到源代码（例如托管在github、gitlab、gitee）
- 在持续的维护升级（最近发布的版本在3年以内）
表格
| Name/Sponsor | Feature | Npm | License | Version,Year |
|---|---|---|---|---|
| Ant Design 蚂蚁集团 |
react，angular，vue | antd | MIT | 5，2024 |
| Arco Design 字节跳动UED火山引擎&架构前端 |
react、vue3 | @arco-design/web-react @arco-design/web-vue |
MIT | 2.60，2024 |
| Bootstrap |
js | bootstrap@5.3.2 | MIT | 5，2024 |
| Carbon Design System IBM |
react vue angluar Svelte Web Components | @carbon/react | Apache2 | 11，2024 |
| Clarity Design System VMware |
angularjs 6.0 | @clr/ui | MIT | v15，2024 |
| Fluent2 Microsoft |
react 四端 | @fluentui/react-components | MIT | 9，2024 |
| Kingcloud Design 金山云 |
react vue2 vue3 | @king-design/vue @king-design/vue-legacy @king-design/react |
MIT | 3，2024 |
| PatternFly design system JBoss |
react，js | @patternfly/patternfly | MIT | 5，2024 |
| Primer CSS Github |
react，rails | @primer/react | MIT | 36，2024 |
| Semi Design System 抖音，字节 |
react | @douyinfe/semi-ui | MIT | 2，2024 |
| TDesign 腾讯 |
vue2，react，flutter,桌面、移动端，小程序 | tdesign-vue@naruto tdesign-react |
MIT | 1.5，2024 |
| Zan Design 有赞 |
react 桌面 | zent | MIT | 10，2023 |
类似的文章
[1] 10大优秀设计系统详解，2020，Ldesign1，知乎专栏
[2] 什么是设计系统（Design
System)？国内有哪些设计系统？，UIED用户体验交流学习，知乎专栏
