什么是设计系统？UI组件、模版库、规范？有何区别？

我们经常看到一些专业术语，如：UI设计系统、模版库、组件库和样式设计指南，等。虽然这些概念是相互关联的，但它们所指的是产品生态的不同部分。设计系统与组件库之间也存在混淆，设计系统包含了组件库，但组件库也是一个独立的生态系统，如AntD 等。

什么是UI设计系统？
UI设计系统是一套完整的设计标准/规范（样式指南）和伴随 UI 工具包的文档，包括UI模版、系统UX设计原则和组件。当我们在这种情况下查看设计系统时，它包含了设计师和开发人员构建和扩展数字产品所需的一切。
设计系统所包含的内容有：
1、品牌设计规范
2、UI界面设计规范
3、设计应用实践指南
4、设计系统发布和代码
5、 CSS风格样式变量
6、设计组件/模版库
7、下载资源/知识库
模版库与组件库有什么区别？
大多数设计师容易混淆这些术语，在某种程度上，这并没有错，但也不完全准确。
首先看几个概念解释：
“原子”：就是无法进一步分解的基本（最小）设计元素，如：按钮、图标、单选框...等。
“分子”：通过组合原子来创建具备功能属性的UI 组件或模块，如：翻页、面包屑、弹框...等。 

“有机体”：由原子和分子组成的复杂 UI 模块，这些模式通过卡片、导航、徽标、搜索、字段...等来塑造出完整的模块。
“模版”：是一个包括了原子、分子和有机体的完整布局和交互的组合体。
 “页面”：页面将所有内容集中在一个屏幕上显示。

关于定义模版库和组件库：
组件库 （原子+分子）：组件是一种可重复使用的代码块，可以独立存或者构建完整模块。组件库是设计系统中 UI 组件的集合。
模版库（分子+有机体）：模版是设计人员用来解决可用性问题的组件，例如，带有徽标、链接、搜索表单和 CTA 按钮的导航栏，模版库是设计系统中 UI 模版的集合。

什么是风格设计指南？
风格设计指南是一份设计规范文档，为设计系统的组件和模版的使用提供设计环境说明，例如，颜色应用规则，排版布局原则...等。

设计系统与组件库
当人们谈论AntD、等前段框架时，尽管这些组件库有大量的文档和指南，但他们并不是属于设计系统。设计师和工程师可以随意使用这些开源组件库。 他们可以不受限制地编辑库的组件（因此它们与原始组件没有区别）、构建新模式、与其他库组合或创建自定义组件。

相反，设计系统是不同的，设计师和工程师必须将组件用作构建模块，必须遵循系统的设计指南、风格指南、设计原则和其他设计外观保持风格一致的用户UI界面，就像按照说明书去构建乐高一样。

最后，如果团队成员想要更改组件或引入新UI设计组件，他们必须遵循设计系统的一套统一的治理程序/规则。所以说，设计系统的构建者，对如何构建产品的新组件拥有最终决定权。