Back to Details

build-figma

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Build Figma

Build Figma

Orchestrator for Figma → production UI. It does not replace the skills below. Read each when that phase starts; do not restate them here.
Requires 
figma
(plugin and connected MCP) and 
cursor-team-kit
. Check first with ../dyl-mode/references/requirements.md. Missing → stop and tell the user to run 
/add-plugin <name>
.
Failure modes that shaped the gates: references/failure-lessons.md.
用于 Figma → 生产级 UI 的编排器。它不会替代下面的 skill。进入相应阶段时阅读每个 skill；不要在此处重复。
需要 
figma
（插件和已连接的 MCP）以及 
cursor-team-kit
。先通过 ../dyl-mode/references/requirements.md 检查。缺少 → 停止，并告知用户运行 
/add-plugin <name>
。
促成这些门禁设计的失败模式：references/failure-lessons.md。

Delegate to (do not copy)

委派给（不要复制）

PhaseRead
Figma MCP mechanics
figma-design-to-code
from the Figma plugin, before every 
get_design_context
Design-system inventoryreferences/design-system-discovery.md, then any repo-local design-system skill or rule it finds
Visual claim / verdict shape
verify-this
from 
cursor-team-kit
+ references/visual-judge.md
Drive live UI
control-ui
from 
cursor-team-kit
, or the repo's own control skill for that surface
阶段阅读
Figma MCP 机制Figma 插件中的 
figma-design-to-code
，在每次 
get_design_context
之前
设计系统清单references/design-system-discovery.md，然后是它找到的任何仓库本地 design-system skill 或规则
视觉结论声明 / 判定结构
cursor-team-kit
中的 
verify-this
+ references/visual-judge.md
驱动实时 UI
cursor-team-kit
中的 
control-ui
，或该界面所属仓库自身的 control skill

Gates

门禁

Build-figma progress:
- [ ] 0. Parse fileKey + nodeId (refuse file-only URLs)
- [ ] 1. Intake done before any product UI edit (see below)
- [ ] 2. Mapped to the repo's primitives/tokens only
- [ ] 3. Styling in the surface's own styling system
- [ ] 4. Visual judge VERIFIED per visual-judge.md (verify-this claim shape)
Gate 1 blocks coding. "Functional first, polish visuals later" is the main failure mode.
Build-figma progress:
- [ ] 0. Parse fileKey + nodeId (refuse file-only URLs)
- [ ] 1. Intake done before any product UI edit (see below)
- [ ] 2. Mapped to the repo's primitives/tokens only
- [ ] 3. Styling in the surface's own styling system
- [ ] 4. Visual judge VERIFIED per visual-judge.md (verify-this claim shape)
Gate 1 会阻止编码。“先实现功能，之后再打磨视觉效果”是主要失败模式。

Workflow (thin)

工作流（精简版）

0. Parse URL

0. 解析 URL

figma.com/design/:fileKey/...?node-id=1-2
→ 
fileKey
, 
nodeId
(
1-2
→ 
1:2
). Branch URLs use 
branchKey
as 
fileKey
. No 
node-id
→ stop.
figma.com/design/:fileKey/...?node-id=1-2
→ 
fileKey
、
nodeId
（
1-2
→ 
1:2
）。分支 URL 使用 
branchKey
作为 
fileKey
。没有 
node-id
→ 停止。

1. Intake (blocking)

1. 采集（阻塞）

Follow 
figma-design-to-code
. Call 
get_design_context
and 
get_screenshot
. If the response is sparse or too large, split to implementable child nodes. Download brand assets from MCP URLs; never redraw logos.
Run design-system discovery. Then write 
/tmp/build-figma/<slug>/intake.md
:
  • Target surface, code path, and how you will drive it live.
  • Node tree.
  • Metric table. Figma px → token, or pinned value when no token matches.
  • Node → primitive map. Each Figma node to an existing component. Mark any node with no match as new, with why.
遵循 
figma-design-to-code
。调用 
get_design_context
和 
get_screenshot
。如果响应稀疏或过大，将其拆分为可实现的子节点。通过 MCP URL 下载品牌资产；绝不重新绘制 logo。
运行 design-system discovery。然后写入 
/tmp/build-figma/<slug>/intake.md
：
  • 目标界面、代码路径，以及实时驱动它的方式。
  • 节点树。
  • 尺寸指标表。 Figma px → token；如果没有匹配的 token，则固定对应数值。
  • 节点 → primitive 映射。 将每个 Figma 节点映射到现有组件。将任何没有匹配的节点标记为新增，并说明原因。

2. Implement

2. 实现

Use the surface's styling system and the mapped components. When Figma px disagree with a primitive's default size, pin the Figma metric in that styling system. Do not bend the primitive's defaults globally. Hard bans below.
使用目标界面的 styling system 和已映射的组件。当 Figma px 与 primitive 的默认尺寸不一致时，在该 styling system 中固定 Figma 尺寸指标。不要全局修改 primitive 的默认值。下面的硬性禁止事项适用。

3. Visual judge (blocking)

3. 视觉判定（阻塞）

Specialize 
verify-this
with references/visual-judge.md. Treat the Figma shot as baseline and the live capture as treatment. Match theme polarity first, then apply the rubric and write the verdict. After NOT VERIFIED, fix the failed rows, recapture, and apply the rubric again. Repeat until VERIFIED or INCONCLUSIVE. Stop and report the blocker after INCONCLUSIVE; do not claim Gate 4 complete.
按照 references/visual-judge.md 对 
verify-this
进行专项配置。将 Figma 截图视为 baseline，将实时捕获视为 treatment。先匹配主题极性，然后应用 rubric 并写出 verdict。判定为 NOT VERIFIED 后，修复未通过的条目，重新捕获，并再次应用 rubric。重复此过程，直到 VERIFIED 或 INCONCLUSIVE。若结果为 INCONCLUSIVE，则停止并报告 blocker；不要声称 Gate 4 已完成。

4. Report

4. 报告

Intake path, map highlights, verdict + evidence paths, remaining gaps.
采集路径、映射要点、verdict + 证据路径、剩余差距。

Hard bans

硬性禁止事项

  1. Paste Figma MCP Tailwind/React as product code.
  2. Invent brand assets when Figma or the repo has them.
  3. "Close enough" primitive for a distinct Figma structure.
  4. Trust text/button/dialog size tokens without checking Figma px.
  5. Claim visual done without the judge.
  6. Edit product UI before 
    intake.md
    exists.
  1. 将 Figma MCP Tailwind/React 作为产品代码粘贴。
  2. 当 Figma 或仓库中已有品牌资产时，不要凭空创造。
  3. 对于明显不同的 Figma 结构，不得使用“足够接近”的 primitive。
  4. 未核对 Figma px 就信任 text/button/dialog 尺寸 token。
  5. 未经过视觉判定就声称视觉完成。
  6. 在 
    intake.md
    存在之前编辑产品 UI。