设计系统是什么、为什么要：单一事实来源 × 一致 × 规模 × 提速
先给定义：设计系统（design system）= 一套可复用的组件 + 模式 + 设计规范 + 设计令牌（tokens），外加指导它们如何使用的原则与文档，作为整个产品族的单一事实来源（single source of truth）——让设计师和工程师用同一套零件、按同一套规则，快速搭出一致的界面。
注意：它不只是一个 Figma UI 套件或一份配色表——那些只是其中一部分。设计系统是把『长什么样 + 怎么用 + 代码实现 + 谁来维护』打包成的一个活的产品：一个服务于其它产品的产品。
为什么要它？没有设计系统时，每个页面、每个团队各造各的按钮、各调各的间距，结果是界面不一致、重复劳动、改一处漏十处。设计系统解决三件事：
- 一致性——同一种元素全产品长一样、行为一样（直接落地可用性启发式第 4 条『一致性与标准』）；
- 规模与速度——复用现成组件而非每次重做，新功能搭得更快；
- 可维护——改一次令牌/组件，所有用到的地方一起更新（『一处修复、处处生效』）。
产品越大、团队越多、迭代越快，设计系统的杠杆越大。
原子设计五层：原子→分子→组织→模板→页面（标签不是重点）
Brad Frost 的『原子设计（Atomic Design, 2013）』借化学比喻，把界面拆成五层递进：
1. 原子（atoms）——不可再分的基础元素：按钮、输入框、标签、一个色值；
2. 分子（molecules）——几个原子组成的简单组件：搜索框 = 标签 + 输入框 + 按钮；
3. 组织（organisms）——较复杂的成段区块：页头 = logo + 导航 + 搜索；
4. 模板（templates）——把组件摆进布局、定出内容结构的页面骨架（无真实内容）；
5. 页面（pages）——填入真实内容的模板实例。
核心价值：它让你同时思考『整体与部件』——先造系统（可复用零件），再造页面，而不是一页页画死。
但别把它当教条。Brad Frost 本人说过：『那些具体标签（原子、分子、组织、模板、页面）从来不是重点，我们自己工作中也不真用它们；但作为一个心智模型仍然有用。』
它的价值在于提供一种同时看整体与部件的思维方式、帮团队沟通；你用『原子/分子』还是『基础组件/区块/区域』之类自己的叫法都行——能帮你和团队更好沟通、造出好系统的分类法，就是对的分类法。别为『这个组件算分子还是组织』纠结内耗。
设计令牌与治理采用——顺便破掉『扼杀创意』的误区
设计令牌（design tokens）：把最底层的设计决策命名、存成可复用的变量——如 color-brand-blue、spacing-md、font-size-lg。组件不写死『#1677ff』，而是引用 color-brand-blue；于是改一个令牌，所有引用它的地方一起变。
三个好处：① 一致——全产品共用同一组值；② 易改——换主题色只动令牌；③ 支持多主题/多品牌——同一套组件，换一套令牌就出深色模式或另一个品牌皮肤。令牌是连接『设计决策』与『代码实现』的桥（W3C 设计令牌社区组还在推设计令牌的标准格式）。
想学一手样本，直接看成熟范例：Google Material Design、Apple HIG（人机界面指南）、Salesforce Lightning；中文一手：阿里 Ant Design、腾讯 TDesign——它们公开了组件、令牌、原则与用法，是绝佳学习样本。
最后破一个常见误区：『有了设计系统，设计师就只能拼积木、创意被扼杀』。恰恰相反——系统把『按钮该多大、间距用几』这类重复的低层决策固化下来，让设计师省下精力去解决真正新颖的问题（新流程、新体验），并保证基础体验一致可靠。设计系统约束的是随意的不一致，解放的是有价值的创造。
自测 · 学完检查一下
想真正动手做题、记进度、攒连胜？到互动课里练。
什么是设计系统（design system）？下面哪个说法最准确？
答案：一套可复用的组件 + 模式 + 设计规范 + 设计令牌，外加使用原则与文档，作为整个产品族的『单一事实来源』
设计系统是一套可复用的组件 + 模式 + 设计规范 + 设计令牌（tokens），外加指导它们如何使用的原则与文档，作为整个产品族的单一事实来源——让设计师和工程师用同一套零件、按同一套规则快速搭出一致的界面。它不只是一个 Figma UI 套件或一份配色表——那些只是其中一部分；设计系统是把『长什么样 + 怎么用 + 代码实现 + 谁来维护』打包成的一个活的产品（服务于其它产品的产品）。（出处：Nielsen Norman Group『Design Systems 101』；Brad Frost《Atomic Design》）
没有设计系统时，每个页面/每个团队各造各的按钮、各调各的间距。设计系统主要解决哪三件事？
答案：一致性（同一元素全产品长一样、行为一样）× 规模与速度（复用现成组件搭得更快）× 可维护（改一次令牌/组件处处生效）
设计系统解决三件事：① 一致性——同一种元素全产品长一样、行为一样，直接落地可用性启发式第 4 条『一致性与标准』；② 规模与速度——复用现成组件而非每次重做，新功能搭得更快；③ 可维护——改一次 token/组件，所有用到的地方一起更新（『一处修复、处处生效』）。产品越大、团队越多、迭代越快，设计系统的杠杆越大。它不是让稿子更华丽，更不是取代任何角色。（出处：Nielsen Norman Group『Design Systems 101』；Nielsen 十大可用性启发式第 4 条）
Brad Frost 的『原子设计（Atomic Design）』把界面拆成五层递进，正确顺序是哪个？
答案：原子 → 分子 → 组织 → 模板 → 页面
原子设计借化学比喻分五层递进：① 原子（不可再分的基础元素：按钮、输入框、标签、一个色值）→ ② 分子（几个原子组成的简单组件：搜索框 = 标签+输入框+按钮）→ ③ 组织（较复杂的成段区块：页头 = logo+导航+搜索）→ ④ 模板（把组件摆进布局的页面骨架，无真实内容）→ ⑤ 页面（填入真实内容的模板实例）。核心价值是让你同时思考『整体与部件』，先造系统（可复用零件）再造页面。（出处：Brad Frost《Atomic Design》第 2 章，atomicdesign.bradfrost.com）
判断：原子设计是必须照搬的死框架——团队必须严格使用『原子/分子/组织』这些标签，并为每个组件到底算『分子还是组织』认真争出个结论，否则就是用错了。
答案：错误
错误。Brad Frost 本人说过：『那些具体标签（原子、分子、组织、模板、页面）从来不是重点，我们自己工作中也不真用它们；但作为一个心智模型仍然有用。』它的价值在于提供一种同时看整体与部件的思维方式、帮团队沟通；你用『原子/分子』还是『基础组件/区块/区域』之类自己的叫法都行——能帮你和团队更好沟通、造出好系统的分类法，就是对的分类法。别为归类纠结内耗。（出处：Brad Frost『Extending Atomic Design』，bradfrost.com）
什么是设计令牌（design token）？
答案：把最底层的设计决策命名、存成可复用的变量（如 color-brand-blue、spacing-md），组件引用它而不写死具体值
设计令牌是把最底层的设计决策命名、存成可复用的变量——如 color-brand-blue、spacing-md、font-size-lg。它是视觉风格的单一事实来源：组件不写死『#1677ff』，而是引用 color-brand-blue，于是改一个令牌、所有引用它的地方一起变。它是连接『设计决策』与『代码实现』的桥，W3C 设计令牌社区组还在推设计令牌的标准格式。与登录令牌、加密货币无关。（出处：W3C Design Tokens Community Group；Salesforce Lightning Design Tokens 早期实践）
判断：组件不写死『#1677ff』这样的色值、而是引用 color-brand-blue 这样的设计令牌，于是改一个令牌、所有引用它的地方一起变——同一套组件换一套令牌，就能切出深色模式或另一个品牌的皮肤。
答案：正确
正确。这正是设计令牌的三大好处：① 一致——全产品共用同一组值；② 易改——换主题色只动令牌；③ 支持多主题/多品牌——同一套组件，换一套令牌就出深色模式或另一个品牌皮肤。令牌把设计决策与代码实现桥接起来，『改一个令牌，所有引用它的地方一起变』就是它的核心机制。（出处：W3C Design Tokens Community Group；Salesforce Lightning Design Tokens 早期实践）
样式指南（style guide）、组件库（component library）、设计系统（design system）三者的关系，下面哪个说法是对的？
答案：设计系统范围最大：样式指南、组件库都是它的组成部分，它还整合了设计原则、设计令牌、文档与维护它的人和流程
范围由小到大：① 样式指南——规定颜色/字体/间距/语气的视觉规范文档；② 模式库——一组可复用的 UI 模式/解决方案；③ 组件库——已编码、可直接用的组件集合（代码层）；④ 设计系统——最大的那个，把上面三者 + 设计原则 + 设计令牌 + 文档 + 维护它的人与流程整合成一个有机整体。所以样式指南/组件库都是设计系统的组成部分，而不是设计系统本身。（出处：Nielsen Norman Group『Design Systems 101』；Brad Frost《Atomic Design》）
做设计系统，真正的难点在哪里？
答案：长期治理与被采用：谁有权加/改组件、贡献流程、版本管理、文档质量、各团队是否真的用——缺了治理，系统会腐化或被分叉
做设计系统真正的难点不在画几个组件，而在长期治理（governance）与被采用（adoption）。它是个『服务其它产品的产品』，需要持续运营：谁有权决定加/改组件、贡献流程是什么、版本怎么管、文档是否清晰好用、各团队是否真的用而不是各自另起炉灶。缺了治理，系统会迅速腐化或被分叉（大家嫌麻烦就复制粘贴改一改），一致性优势就没了。成熟的设计系统都有专职团队 + 贡献模型 + 清晰文档 + 版本管理——把它当持续维护的产品，而非一次性交付物。（出处：Nielsen Norman Group『Design Systems 101』）
判断：有了设计系统，设计师就只能拼积木了，创意会被扼杀。
答案：错误
错误。恰恰相反：设计系统把『按钮该多大、间距用几』这类重复的低层决策固化下来，让设计师省下精力去解决真正新颖的问题（新流程、新体验），并保证基础体验一致可靠。设计系统约束的是随意的不一致，解放的是有价值的创造。Google Material Design、Apple HIG、Salesforce Lightning、阿里 Ant Design、腾讯 TDesign 这些成熟系统公开了组件、令牌、原则与用法，是绝佳学习样本——它们背后的产品并没有因此失去创造力。（出处：Material Design / Ant Design / Apple HIG 官方设计系统）
判断：设计系统本质上就是一个 Figma UI 套件加一份配色表，做完交付一次就算完成了。
答案：错误
错误。Figma UI 套件、配色表只是设计系统的一部分。设计系统是整个产品族的单一事实来源：可复用的组件 + 模式 + 设计规范 + 设计令牌，外加使用原则与文档，把『长什么样 + 怎么用 + 代码实现 + 谁来维护』打包成一个活的产品（服务于其它产品的产品）。而且它必须被当作持续维护的产品来运营——需要专职团队、贡献模型、清晰文档与版本管理，而非一次性交付物；缺了治理会迅速腐化或被分叉。（出处：Nielsen Norman Group『Design Systems 101』；Brad Frost《Atomic Design》）