视觉值被重新发明
AI 会为相似区域创造新的颜色、圆角和间距，看起来接近，却没有共同来源。
Design Token × AI / 可复用生成实验
用 Token 约束 AI生成完整页面
我把 Figma 变量、颜色语义和交互状态整理成机器可读规则，再让 AI 生成一个完整产品页。重点不是“生成得快”，而是生成后仍然能被设计系统约束。
10 collections66 mapped colors345 checks
01 / 问题
生成页面之后，设计规则还在吗？
我最早遇到的问题不是 AI 产不出页面，而是每次生成都像重新猜一次：颜色会漂、间距会变、组件状态不完整，Figma 和代码最终成为两套语言。
状态语义容易混乱
页面截图成立，但领取后、售罄、禁用 hover、空状态和移动端反馈常常缺失。
设计与代码无法对照
开发代码里的值无法反查 Figma 变量，后续修改只能重新比对和人工修正。
02 / 体系
三层 Token，把设计判断变成结构
三层结构不是为了增加术语，而是把“原始值、语义角色、组件应用”拆开。这样品牌变化、主题切换和组件状态都能在自己的边界内发生。
保存颜色阶梯、数值标尺和字体原料，不直接描述业务用途。
Color/Red/8 → #E61733把原料翻译成 Primary、Neutral、Danger 等稳定角色。
Primary/08 → Color/Red/8把角色映射到页面与组件可以直接使用的设计意图。
surface/action-strong → Primary/08基础标尺scale · font-family · font-weight
界面环境Responsive · Light / Dark · desktop / mobile
行为层级shadow · z-index · motion
真实组件构成
TypedefaulthoverActivedisable
Primary
Secondary
Outline
Ghost
组件约束不是静态截图
state: defaulttoken: button.primary.defaultsizes: lg / 48 · md / 36 · sm / 32
03 / AI 输入
输入规则，而不是输入截图
输入包只保留能影响生成结果的信息：真实 Token 文件、颜色使用字典、Mapped 描述、页面任务、组件清单和禁止事项。AI 不需要猜风格，只需要在边界内组合。
01 · Token JSON
{
"source": "Figma",
"collections": 10,
"variables": 359,
"mappedColorDescriptions": 66,
"modes": ["Light", "Dark", "desktop", "mobile"]
}02 · 页面任务
- 生成“本地生活权益中心”完整产品页。
- 包含分类 Tab、区域筛选、权益卡片、领取反馈、售罄禁用和空状态。
- 页面是受控实验，不使用真实客户或商业数据。
03 · 生成约束
- 必须引用 design-tokens.css、颜色字典和 Mapped 描述。
- 不得新增颜色、圆角、阴影和组件尺寸。
- 有效文字不得使用 restricted Token。
- 输出后运行 Token、状态和路由校验。
04 / 应用
完整页面，只使用一套 Token
下面不是概念图，而是独立可访问的虚拟权益中心。分类、区域筛选、领取保存、售罄禁用、可见成功反馈和暗色模式都由同一份 Figma Token 与状态合同约束。
05 / 校验
用规则校验，而不是凭感觉验收
我没有制造节省时长或效率百分比，而是用可以重复运行的规则校验结果：视觉值是否来自 Token、状态是否完整、禁用态是否不会悬浮、Figma 描述是否保留、路由和预览资产是否存在。
实验页组件 CSS 不包含独立 HEX、RGB 或 HSL 色值。
领取、已领取、售罄、disabled hover guard 和 live region 都进入校验。
66 个 Mapped 颜色描述写回 Figma，并保留在本地 JSON 导出中。
页面语义变量可以回溯到 Mapped、Alias 与 Brand Primitive。
npm run validate:tokens # Token validation passed: 345 checks.
Token 没有替 AI 做设计。它让 AI 的每一次生成，都能回到同一个设计决策来源。
这套方法解决的不是“怎样让 AI 画得更像”，而是怎样让 Figma、AI 和前端代码共享同一种语言。生成可以很快，但真正可维护的部分，来自生成之前就被明确的边界。