图形用户界面设计系统盘点，为您选出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
BootstrapTwitter
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 SystemVMware
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 systemJBoss
react，js
@patternfly/patternfly
MIT
5，2024
Primer CSSGithub
react，rails
@primer/react
MIT
36，2024
Semi Design System抖音，字节
react
@douyinfe/semi-ui
MIT
2，2024
TDesign腾讯
vue2，react，flutter,桌面、移动端，小程序
tdesign-vue@narutotdesign-react
MIT
1.5，2024
Zan Design有赞
react 桌面
zent
MIT
10，2023
类似的文章
[1] 10大优秀设计系统详解，2020，Ldesign1，知乎专栏
[2] 什么是设计系统（Design
System)？国内有哪些设计系统？，UIED用户体验交流学习，知乎专栏