交接设计变量的名称、值和用途

以下示例与示意结果由本站编写，用于说明方法，不是模型实测结果。

使用场景

你要把调色板交给实现者，让多个页面使用相同颜色角色。教学 token 是正文主墨 ink=#18181B、行动蓝 action=#2563EB；action 用于主按钮和焦点标识，ink 用于正文。颜色名称、数值和用途缺一项，接手者都可能自行补猜。

具体做法

为每个 token 同时提供语义名称、机器可用值、功能角色和适用状态。说明它在现有 token 系统中的唯一维护位置，并让组件引用语义角色；无需为小项目强行建立三层架构。交接后检查计算样式和实际状态，确认没有手抄数值造成漂移。

反例

用暗文字和漂亮蓝实现上述页面。每个组件自己选择相近的值，按钮和焦点颜色也可以分别猜。

改进写法

按教学 token 契约实现：ink=#18181B 用于正文；action=#2563EB 用于主按钮与焦点标识。使用项目已有的语义变量维护这些值，组件引用角色而非各自手抄色值。列出名称、值、用途和使用状态；检查按钮与焦点的实际渲染和对比。不从“漂亮蓝”推断另一个值，也不把 token 名称当可用性验证。

为什么这样改

语义名说明意图，精确值消除颜色猜测，用途说明在哪些地方保持一致。把它们一起交接，再通过共享引用实现，能区分允许的角色差异和无理由的数值漂移。

如何验证

示意映射是正文→ink→#18181B，主按钮/焦点→action→#2563EB。检查计算样式能追溯到对应变量，并查看 hover、focus 和正文背景上的实际表现。

如果某组件改成另一个近似蓝却没有变体约定，或只列色值而不知道角色，交接不完整。精确匹配后仍要做对比与可读性检查。

适用边界

两个颜色是教学值，不是通用调色板。语义 token 可按主题映射到不同原始值；组件变体需明确用途。来源的审美禁令不是本方法的必要规则，命名一致也不自动保证 WCAG 对比合格。