多页面复用按钮/卡片/表单、多人协作要统一语言、多端（Web/移动）共享基础、频繁换主题或品牌色。
产品与设计 · 设计交付
设计系统Design System
一套可复用的 token + 组件 + 规范，作为单一事实来源——组件引用 token 而非写死值，改一处全局生效。
设计系统实验台：改一个 token，看组件怎么同步
调 radius.md 或 space.md 的值，看 4 个引用物件的圆角/内边距是否一起变；切到硬编码再调一次，看一致性怎么断——这就是设计系统的运作方式。
场景：把所有组件的圆角从一处改掉。调 radius.md 的值，看 4 个引用物件是否一起变；再切到「硬编码」调一次，看一致性怎么断。
radius.md- 订单 #2087
radius.md - 邮箱
radius.md - 已付款
radius.md
4/4 物件都引用 radius.md = 8px，改一处处处变。
圆角 · radius.md = 8px。4 个物件都引用 radius.md，所以一起变成 8px——这就是单一事实来源。下一步：切回 token 引用，看一致性恢复。
面板里测到的结论怎么用
刚才物件同步变、或各自停在旧值，对应的就是 token、组件引用和单一事实来源这三件事。
- token：把重复的视觉决策（圆角、间距、颜色、字号）命名成语义变量，如 radius.md / space.md，设计与代码同名。
- 组件引用 token：Button/Card/Input 在代码里写 radius.md，不写死 8px——这是能同步的来源。
- 单一事实来源：一个 token 只在一处定义，所有引用方读取它；改定义即全局生效。
- 规则与治理：组件封闭变体、状态和例外记录，让系统可演进而不失控。
什么时候专门搭设计系统
UI 失控、多页面/多团队/多端要一致、改主题或品牌要批量更新时搭；一次性落地页或探索期原型不必上整套。
设计系统管的是可复用决策和一致性，不管信息架构和具体页面构图；少量一次性页面强行接入反而拖慢。
从 token 到页面：最短路径
不要从字面值开始。先命名 token，再让组件引用，最后页面只组合组件。
- 定 token：列出重复决策（圆角、间距、主色、字号），给每个起语义名，如 radius.md / space.lg / color.action。
- 组件引用：Button/Card/Input 在代码里只写 token 名，禁止裸字面值；Figma 与代码同名同源。
- 页面组合：页面用组件拼装，不再自定义样式；差异靠组件 props 传入，不复制新组件。
- 集中更新：换主题或调主色只改 token 定义，组件和页面零改动；例外写明场景和负责人。
同一目标：把所有圆角从 8 改成 12
目标都是让按钮/卡片/输入的圆角统一变。差异只在组件引用 token 还是各处硬编码。
要把所有按钮圆角从 8 改成 12：只改 radius.md = 12，Button/Card/Input 一起变，因为它们都引用同一个 token。改 1 处，验收 1 次。
每个组件各自写了 border-radius: 8px。改 12 时要全局搜索、逐个文件改，Card 漏改还停在 8。改 N 处，验收 N 次，还容易漏。
快速自测
团队要给所有输入框换成新的聚焦边框色，哪种做法符合设计系统？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。