Figma MCP 做 UI 代码：截图只能验证布局，数值必须从节点读取 | 前端进阶之旅

Full translation

完整中文译文

每个硬编码的值现在都能追溯到一个 Figma 节点，"看起来没问题"不再被视为有效的证明。

我们将这个修复打包成了一个可复用的 Claude Code skill——implement-figma-designs。它把 Figma 转代码从"先构建，然后用截图肉眼看三四轮校对"的循环，变成了一种分阶段的"提取→验证"协议。

一个 LLM 拿到 Figma 帧后，会愉快地凭空编造一个 1px solid #91A3B3 边框，把 24px 的图标标成 28px，猜测图标到文字的间距——因为浅浅的边框和差 4px 的数值在截图中看起来都是对的，所以基于截图的"是否匹配？"检查会通过，而实际运行的 DOM 是错的。

截图只用于布局——绝不用于取值。每个颜色/尺寸/间距/圆角都必须来自 Figma MCP（get_variable_defs / get_metadata / get_design_context），或者被明确标记为离系统值。任何值都不能从 PNG 上读取。

分阶段查询协议，确保在任何产品代码之前就提取出真相：定向 → 节点分类 → 确认组件映射 → 三角定位代码+token+几何 → 实现。

Token 优于原始十六进制。get_design_context 返回的任何 #EE0F51 都要被协调回项目的设计 token；任何没有对应 token 的值都要上报给设计师，而不是悄悄硬编码。

真实的交互组件，绝不是 MCP 为未连接切换/输入输出的扁平 <img>——每个交互节点都要通过人工把关映射到确认过的仓库组件。

证据即验证（关键一招）：实际实现是在真实浏览器（chrome-devtools MCP）中驱动的，每个可疑值都用 getComputedStyle 针对 Figma 节点值进行确认。截图告诉你哪里有问题；计算样式告诉你具体是什么值。

权衡：验证比瞟一眼 PNG 更慢、更啰嗦——更多的工具调用，每个交互组件都需要人工确认——但这是唯一能 catch 住设计系统特异性丢失的方法（一个 sx 覆盖被 .MuiOutlinedInput-notchedOutline 打败，在没有任何报错的情况下保留了错误的边框）。

# 之前 —— 从截图读取值，"看起来对" == 完成
- <Icon size={28} />                 // 猜的；实际节点是 24
- border: '1px solid #91A3B3'        // 编造的；帧没有边框
- // 验证：截图看起来差不多 → PASS（DOM 仍然是错的）

# 之后 —— 值追溯到节点，在 DOM 中验证
+ // get_metadata(node) -> width/height = 24  → <Icon size={24} />
+ // get_variable_defs(node) -> 无边框 token → 帧没有边框 → 省略
+ // 阶段 6，在真实浏览器中：
+ getComputedStyle($icon).width         // "24px"  ✔ 匹配节点
+ getComputedStyle($toolbar).borderWidth // "0px"  ✔ 匹配帧
+ // 只有当 computed CSS == 节点值时才能 PASS，每个元素都要证据

这个协议，端到端

Figma frame URL
   │
   ▼
[0] resolve to a concrete node ──► [1] orient (PNG = structure only)
   │                                     │
   ▼                                     ▼
[2] classify nodes ──► [3] confirm component mappings (human gate)
   │
   ▼
[4] triangulate: get_design_context + get_variable_defs + get_metadata
   │        └─ raw hex/px  →  project token  (or flag off-system)
   ▼
[5] implement from tokens + geometry + real components
   │
   ▼
[6] VERIFY in a real browser: getComputedStyle(el) == node value ?
        PASS only per-element, with evidence — not "the PNG looks right"

这三个在人工 PNG 审查中溜过去的缺陷（编造的边框、28px 而非 24px 的图标、猜出来的间距），现在在阶段 6 被机械地捕获了，而不是经历好几轮手动修正。

明确禁止仅凭截图签收——一个节点只有在计算后的 CSS 被证明等于节点值时才算"完成"。

团队内可复用：这是一个版本化的 skill，当 planning-dev-task 交出关联 Figma 的 PRD 时自动调用，它的验证环节（checking-figma-fidelity）可以接入测试计划运行器作为视觉 T-<n>。

想试试吗？私信我，我把 skill 发给你