03 Trade-off
三次选择，三种回答
Token架构解决了"设计内部的一致性管理"问题，但没有解决另一个更老的问题：设计意图在翻译成代码的过程中仍然会衰减。标注文档写得再结构化，开发看到的终究是数值，看不到的是语义。
Device Card 亮暗双模对比 — 同一组件，改1个Token值切换主题，不出新稿
03 Trade-off
三次选择，三种回答
2025+
第三次：重构"造轮子的方式"本身
Figma MCP + Cursor · MVP 阶段
既然Token架构已经把设计意图结构化了——Token名本身就是语义，surface-primary不是"某个灰色"，而是"主表面色"——那AI应该能直接读懂它，跳过人工翻译这个环节。
我用Figma MCP协议把Figma和Cursor连起来，写了一份.cursorrules文件作为约束规则：所有颜色必须用CSS变量，禁止硬编码色值，组件Token必须通过Semantics层引用Primitives。Cursor Agent直接读取Figma的组件节点，按规则生成CSS代码。
开发拿到的不再是一张需要人工翻译的图片，而是一份带完整语义信息、可直接使用的代码。传统流程里"出稿→标注→开发理解→来回校对"这条链路，被压缩成了"Figma定义Token→MCP读取→Cursor按规则输出代码"。
体感估算，样式层面的沟通成本至少节省80%——中间的标注和解释环节被整段跳过了。
目前还是MVP阶段，只基于质检机的Device Card组件跑通了最小闭环。复杂交互逻辑（表单联动、条件显隐）还没有覆盖到，只验证了样式层面的自动化。
Step 1
Figma Variables
三层Token架构定义
Step 2
MCP Connected
Figma ↔ Cursor桥接
Step 3
Cursor Rules
.cursorrules约束文件
Step 4
代码输出
CSS变量，零硬编码
Cursor Agent 输出 — device-card.css
/**
* Device Card — 从 Figma 节点 63:12 转换
* 严格使用 Semantic/Component 层变量，无硬编码色值
*/
.device-card {
background-color: var(--surface-primary);
color: var(--text-primary);
}
.device-card__button {
background-color: var(--button-bg-primary);
}
Step 3 · .cursorrules 约束文件 — 禁止硬编码色值，强制使用Semantic层变量
Step 4 · Cursor Agent 读取Figma组件节点，按规则生成CSS — 所有色值均为变量引用
Step 2 · Cursor Settings — Figma MCP Server 连接状态（13 tools, 25 resources enabled）