[53] Design Tokens：让设计和代码说同一种话

• 资料类型：规范草案
• 原始来源：https://www.designtokens.org/TR/drafts/format/
• 对应章节：第 6 章（UI 设计）、第 7 章（工程化）

一句话

别让 UI 靠记住颜色值；用语义化 Token 把品牌规范固化下来，AI 生成代码也能跟着走。

你该从 Design Tokens 带走什么

• 语义化命名：color.primary.bg 比 #0f172a 更能跨团队、跨平台复用。
• 设计—开发的契约：Token 是统一事实源，减少设计稿和代码越改越不像的漂移。
• 利于自动化：lint/检查可以阻止硬编码颜色/间距，保证一致性。

在本书里怎么用

• 第 3 章把 Token 当作生成式 UI 的约束：让模型输出 Token 名称而不是魔法数字。
• 作为可回归 UI的一部分：Token 变更需要截图回归与变更说明。

常见误用

• 只有变量替换，没有语义层级，导致 Token 体系越用越乱。
• Token 改动不做回归，导致全站 UI 悄悄变形。