Vibe Coding Design Token 一致性门：阻止生成界面悄悄分叉

当提示词说“做一个更柔和的次要按钮”，Agent 很可能直接写入新的十六进制颜色、13px 间距和另一种圆角。单个页面看不出问题，几十次生成后，同一语义拥有多组近似值，暗色主题漏项，设计修改只能全仓搜索。Design Token 的意义不是把硬编码搬到一个 JSON，而是让每个视觉决定拥有稳定名称、类型、来源和消费规则。

设计系统与 Design Tokens介绍 token 与组件分层；本文关注多人和 Agent 高频改动下，怎样用机器门禁保持来源、生成物和运行结果一致。

区分原始值、语义与组件合同

原始 token 表达可用刻度，如色板、间距和字号；语义 token 表达用途，如 color.text.muted、space.content.gap；组件 token 只在确有跨产品定制需求时表达 button.primary.background。组件优先消费语义 token，避免每个 Button 变体复制原始色值。名字描述用途，不描述当前外观，否则暗色主题下 blue-500 可能承载完全不同语义。

每项包含稳定路径、类型、值或别名、描述、状态和适用主题。Design Tokens Community Group 的格式草案提供 $type、$value 与 alias 等可交换模型；采用时应固定所支持的规范版本，因为草案可能演进。reader 遇到未知类型必须失败，不能把阴影、颜色和尺寸一律字符串化。

别名组成有向图，构建器检测不存在的目标和循环。主题只能覆盖获准 token，缺失值按明确继承规则处理；高对比主题需要独立验收，不能机械地把颜色取反。透明色叠加还依赖背景，contrast 检查必须在实际组件状态计算，而不是只比较两个 token 源值。

单一来源不等于一个手工文件

团队先指定权威源及 owner，可以是版本化 token 仓库或设计工具的受控导出。任何同步都生成不可变快照，记录源 revision、转换器版本、输入与输出摘要。设计工具、JSON、CSS 和移动端常量同时可编辑，会形成多主冲突；非权威端的修改必须回到源，再重新生成。

构建从同一快照产生 CSS Custom Properties、TypeScript 类型、文档和其他平台格式。CSS 变量支持级联和运行时替换，但不会自行验证 token 类型；生成前 schema 校验仍必需。转换器固定版本、排序和数值格式，不写时间戳与本机路径。连续生成两次应零差分，输出目录由生成器拥有，规则参照生成代码所有权边界。

依赖升级可能改变颜色序列化、单位或命名，必须和 token 变更分开审阅，并走依赖升级与锁文件兼容门。如果构建器无法读取新格式，应阻断发布，不能回退为读取旧 snapshot 同时声称设计已同步。

给 Agent 一份可执行的使用策略

提示上下文只提供当前 token 目录、组件使用示例和例外流程。生成代码禁止直接新增颜色、字体、阴影、层级和非零间距裸值；0、布局百分比或确实由内容计算的尺寸可按仓库规则例外。门禁用 AST、CSS parser 或框架插件检查值，不能只用正则，因为变量 fallback、calc 与字符串会产生误判。

找不到合适 token 时，Agent 应报告用途、出现组件、主题需求和候选复用项，不自行创造一个“差不多”的名字。新增 token 需要设计系统 owner 评审：它是否表达新语义，是否可由现有 token 组合，所有主题是否有值，弃用路径是什么。一次性营销插图颜色不一定要进入全局系统，同样应在受限样式域标记来源。

组件 API 尽量暴露语义 variant，而不是允许调用方传任意颜色。弃用 token 时先建立新别名或迁移映射，扫描所有生成物和消费者，再删除旧入口；组件级迁移可参照设计系统组件弃用迁移，防止只在主仓搜索到零就误判完成。

从静态一致扩展到视觉一致

CI 第一层验证 schema、类型、alias、主题覆盖和确定性生成；第二层扫描禁止裸值、未知 token 和深层路径；第三层构建代表组件的状态矩阵。矩阵覆盖默认、hover、focus、disabled、error、selected，以及每个支持主题。颜色对比、焦点可见性和文字缩放是行为要求，不由 token 名字自动保证。

视觉差异按视觉回归测试在固定浏览器与字体环境审查。一次有意改主色会产生大面积差异，评审应通过 token 依赖图说明受影响组件，而不是逐张无脑接受 baseline。未在依赖图中的变化意味着硬编码、级联泄漏或构建漂移，需要定位原因。

发布清单绑定 token snapshot、转换器、生成物摘要、组件库版本和视觉证据。回滚时整体恢复这一代，不只还原 CSS 文件；否则 TypeScript 类型、文档和其他平台仍会错代。最终通过编程 Agent 的改动验证门，确保实际 diff 只包含批准 token 及其可解释派生物。

一致性门不是阻止 Vibe Coding 产生新视觉，而是要求新的视觉决定进入可命名、可追踪的系统。这样 Agent 可以高速复用既有语言，真正的新语义也能被团队有意识地接受，而不会藏在第几十个近似颜色里。