该技能用于把 Figma 设计落实为生产界面,定位为编排器而非替代底层技能。触发场景包括使用 /cursor-build-figma、提供带 node-id 的 figma.com/design URL,或要求将某份 Figma 设计实现为 Web、桌面或共享 UI。
前置条件:需要 figma 插件与已连接的 MCP,以及 cursor-team-kit。使用前应按 requirements 参考进行检查;若缺失,应报告确切缺失的原生能力,并且只停止依赖该能力的步骤,不得自动安装插件。文档还说明这是源指引,不是已安装连接器或运行时证明;使用工具前应核对当前宿主并阅读其实际 schema,不得凭空编造工具名、连接账户、安装助手、花费资金或扩大访问范围。
工作流程:第 0 步解析 URL,从 figma.com/design/:fileKey/...?node-id=1-2 取得 fileKey 与 nodeId(1-2 转为 1:2),分支 URL 用 branchKey 作为 fileKey,缺少 node-id 则停止。第 1 步为阻塞式 intake:按 figma-design-to-code 调用 get_design_context 与 get_screenshot,响应稀疏或过大时拆分到可实现的子节点;从 MCP URL 下载品牌资产,不得重绘 logo;随后运行设计系统发现,并写入 intake.md,内容包含目标界面、代码路径与实时驱动方式、节点树、度量表(Figma px 到令牌,无匹配时记录固定值)、节点到既有基元的映射(无匹配者标为新增并说明原因)。第 2 步实现:使用目标界面自身的样式系统与已映射组件;当 Figma px 与基元默认尺寸冲突时,在该样式系统中固定 Figma 度量,不全局改动基元默认值。第 3 步视觉判定为阻塞项:以 Figma 截图为基线、实时截图为处理对象,先匹配主题极性,再应用评分表写出判定;未通过时修复失败行、重新截图并再次评分,直到通过或不确定;不确定时停止并报告阻塞,不得声称 Gate 4 完成。第 4 步报告 intake 路径、映射要点、判定与证据路径、剩余差距。
硬性禁止:将 Figma MCP 的 Tailwind/React 直接粘贴为产品代码;在 Figma 或仓库已有品牌资产时自行发明;用“差不多”的基元替代明显不同的 Figma 结构;未核对 Figma px 就信任文本/按钮/对话框尺寸令牌;未经视觉判定就声称视觉完成;在 intake.md 存在之前编辑产品 UI。
限制与说明:本文档不主张粘性模式,运行中的 worker 应使用原生完成通知;重复续跑需要操作者请求与受支持的原生调度工具,不得模拟 Cursor /loop。缺失指定审查者会产生不完整审查,绝不能给出干净结论。系统与开发者指令保持优先;既有操作者授权跨轮次持续有效,除非撤回,不因轮次变化而重复询问。