设计令牌 Design Token 在前端工程化中有什么作用？

简化版

Design Token 是把颜色、字号、间距、圆角、阴影等设计决策抽象成可管理变量，用于连接设计稿、组件库和多端主题。它能提升一致性和主题切换能力，但要设计命名层级、平台转换、版本管理和兼容策略。

详细版

Design Token 常见内容：

颜色：品牌色、文本色、背景色、状态色。
字体：字号、行高、字重。
间距：padding、margin、栅格。
圆角、阴影、层级。
语义 token：primary、danger、surface、text-muted。

工程价值：

统一视觉规范。
支持暗色模式和主题换肤。
多端共享设计决策。
减少硬编码样式。
让组件库和设计工具对齐。

完整版教学

一、Token 解决设计决策散落问题

没有 Design Token 时，颜色和间距会散落在 CSS、组件、设计稿和文档里。今天按钮蓝色是 #1677ff，明天某个页面写成 #1680ff，长期下来视觉就会漂。Token 把这些决策集中命名和管理。

设计决策
  → tokens/color.json
  → CSS Variables / JS Theme / iOS / Android
  → 组件库和业务页面使用

它不是简单变量表，而是设计系统和工程系统之间的协议。

二、原始 token 和语义 token 要分层

原始 token 描述具体值，例如 blue-500；语义 token 描述用途，例如 color-primary、color-text-secondary。业务和组件更应该使用语义 token，而不是直接依赖某个色阶。

如果按钮直接写 blue-500，品牌色从蓝变紫时所有地方都要改；如果按钮使用 color-primary，只需要调整语义 token 映射。

层级	示例	作用
原始 token	blue-500	设计基础色阶
语义 token	color-primary	表达用途
组件 token	button-bg	组件局部定制

三、主题切换依赖语义映射

暗色模式不是把所有颜色取反。浅色主题下 color-surface 可能是白色，暗色主题下可能是深灰；color-text-primary 在两个主题下都表示主要文本，但具体值不同。语义 token 能让组件不用关心当前主题细节。

:root {
  --color-surface: #ffffff;
  --color-text-primary: #111827;
}

[data-theme="dark"] {
  --color-surface: #111827;
  --color-text-primary: #f9fafb;
}

组件只写 var(--color-surface)，主题切换由变量映射完成。

四、Token 要能从设计工具到代码落地

成熟设计系统会把 Figma Tokens 或设计源数据转换为代码产物，例如 CSS Variables、SCSS 变量、JS 对象、Android XML、iOS JSON。转换过程要自动化，否则设计和代码很快不同步。

数字例子：如果有 200 个 token，人工同步一次错 1% 就有 2 个错误；每月同步 10 次，错误会不断积累。自动化转换和 review 能把错误降下来。

五、命名是长期维护成本

Token 命名要稳定、可读、可扩展。不要用 color1/color2 这种无语义名称，也不要把具体业务页面写进全局 token。全局 token 表达设计语言，组件 token 表达组件定制，业务特殊样式应谨慎沉淀。

命名一旦被大量组件使用，修改成本很高。删除 token 要像删除 API 一样考虑兼容和迁移。

六、版本管理和兼容要重视

组件库依赖 token，业务也可能直接使用 token。改 token 值可能造成视觉变化，删 token 可能导致构建失败。因此 token 包也需要版本管理、changelog 和迁移说明。重大视觉破坏可能需要 major 版本。

记忆钩子：Design Token 是“设计系统的 API”，颜色间距这些值一旦被引用，就变成工程契约。

七、常见误区与追问

误区：Design Token 就是 CSS 变量。 CSS 变量只是落地形式，Token 是设计决策和命名体系。
误区：直接使用色阶 token 就够了。 组件更应使用语义 token，方便换肤和品牌升级。
误区：Token 改值不算 breaking change。 大规模视觉变化或删除 token 可能影响业务，应管理版本。
追问：暗色模式如何设计 token？ 用语义 token 映射不同主题值，组件只依赖语义用途。
追问：如何保持设计稿和代码一致？ 从设计源自动转换 token，并通过 review 和版本发布同步。
追问：组件 token 有什么用？ 支持组件局部定制，例如 button-bg、button-radius，不污染全局语义。

八、加强记忆

Design Token 用“设计决策工程化”来记。原始 token 管基础值，语义 token 管用途，组件 token 管局部定制；通过自动转换输出 CSS/JS/多端变量，再用版本管理维护兼容。它让设计从截图变成可复用、可发布的工程资产。

简化版

详细版