把 Figma 降级成变量表，用 Token 让设计师直接进代码才能管住 AI 的随机性

和搭档两人搞产品，一个写代码一个管设计，原本指望 AI 加持能直接起飞，没想到掉进一种诡异的“内耗坑”。最直观的体感是：AI 写前端快得吓人，可一到 UI 细节就自带“随机属性”。

随着 AI 生成代码占比越来越高，细碎的 UI Bug 像长草一样冒出来。同一个按钮，A 页圆角 4px，B 页莫名其妙变 6px；阴影模糊度在不同组件里完全对不上。开发者觉得让 Agent 跑个脚本就能修，但现在的 Agent 工具链全是给开发者用的，命令行加环境配置把设计师拦在门外，最后只能在群里发截图催促，开发者再手动改，效率低得离谱。

这让 Figma 的位置变得很尴尬。传统流程里我们习惯在 Figma 做像素级对齐再交给前端还原，现在试着搞“体感编程”——核心组件库一定好后，直接在代码里快速迭代。我想改组件，在代码里调完给设计师看，他点头我就发版。结果 Figma 成了纯摆设，从不更新，生产环境的 CSS 却越来越臃肿混乱，因为 AI 生成代码时总爱随手写死数值。

我意识到，这种快节奏下如果不让设计师低门槛介入代码，界面迟早会在 AI 的随机性里崩塌。我们决定不再死磕高保真原型，转而搭一套设计师能真正参与的实操流程。

目前最管用的尝试是把所有基础样式定义成严格的 Token，协作拆成三阶段：

第一，Figma 彻底放弃全页面高保真，只维护原子级组件定义。设计师不再画每个页面的所有状态，而是定好一套标准原子库。

第二，建立共享 CSS 变量库（如 :root 里定义 --primary-color、--radius-md）。给 AI 下极严格的 Prompt 约束：生成代码必须强制引用这些变量，严禁出现任意 Hex 色值（如 #F3F4F6）或具体像素数值（如 12px）。Code Review 时一旦发现硬编码直接打回。

第三，引入 v0 这类能快速出原型并导出代码的工具。让设计师在前端预览阶段就完成视觉确认，不用在 Figma 和代码间来回跳。设计师在 v0 预览里看不顺眼，直接用自然语言让 AI 改，确认后再由开发者合入主分支。

在这个模式里，Figma 不再是“交付文档”，而变成“变量定义表”。我们把一致性控制前移到 Token 层，而不是后置在像素验收层。对小团队而言，与其追求完美静态原型，不如建一套让设计师低成本干预代码的机制，才能真正跑出 AI 编程的效率。