用途:build-figma 是 Figma 到生产 UI 的编排器,本身不替代各阶段子技能,而是在对应阶段读取并委派。适用于 /build-figma、带 node-id 的 figma.com/design URL,或把 Figma 实现为 Web、桌面、共享 UI 的请求。
依赖与前置:需要 figma 插件及已连接的 MCP,以及 cursor-team-kit。先用 ../dyl-mode/references/requirements.md 检查;缺失则停止并提示用户运行 /add-plugin <name>。
主要能力与流程: 0. 解析 URL:从 figma.com/design/:fileKey/...?node-id=1-2 得到 fileKey 与 nodeId(1-2 转为 1:2);分支 URL 用 branchKey 作 fileKey;无 node-id 则停止。
- 阻塞式 Intake:按 figma-design-to-code 调用 get_design_context 与 get_screenshot;响应稀疏或过大时拆分为可实现的子节点;从 MCP URL 下载品牌资产,不重绘 logo。运行设计系统发现,并写 /tmp/build-figma/<slug>/intake.md,包含目标界面、代码路径与实时驱动方式、节点树、度量表(Figma px 到 token,无匹配则固定值)、节点到原语映射(无匹配标为新组件并说明原因)。
- 实现:使用该界面自身的样式系统与映射组件;Figma px 与原语默认尺寸冲突时,在该样式系统中固定 Figma 度量,不全局改动原语默认值。
- 阻塞式视觉判定:按 references/visual-judge.md 特化 verify-this,以 Figma 截图为基线、实时截图为处理组,先匹配主题极性,再套用评分标准并写出结论;未通过则修复失败项、重新截图并再次评分,直到 VERIFIED 或 INCONCLUSIVE;INCONCLUSIVE 时停止并报告阻塞,不得声称 Gate 4 完成。
- 报告:intake 路径、映射要点、结论与证据路径、剩余缺口。
硬性禁止:把 Figma MCP 的 Tailwind/React 直接粘贴为产品代码;在 Figma 或仓库已有品牌资产时自行发明;对独特 Figma 结构使用“差不多”的原语;不核对 Figma px 就信任文本/按钮/对话框尺寸 token;未经视觉判定就声称视觉完成;在 intake.md 存在前编辑产品 UI。
限制:资料未提供具体收费、价格、平台支持范围与效果数据;Gate 1 会阻塞编码,“先功能后视觉”是主要失败模式。