用途:把指定 Figma 节点实现到目标代码库,产出可度量的实现契约。完成边界是“已实现 + 可度量契约”,需在目标仓库留下 Inventory、Spec、Assets 三部分的持久文件路径;仅会话内表格不算完成。像素对齐由 figma-pixel-verify 负责,本次运行会继续进入该技能。
主要能力:解析 Figma URL 或 fileKey+nodeId;获取结构化设计上下文;对大型 frame 先取元数据再逐段实现;建立屏幕/区块×视觉状态清单;识别主题结构(多模式变量或分主题 frame);在目标仓库写入 living spec(含 Inventory、Spec、Assets,Verify 留空);映射到项目已有组件、token 与布局原语;导出真实图片/SVG 资源;有 Storybook 等工作台时编写覆盖清单的 stories;按项目主题机制映射主题变量。
使用方式:需先具备 Figma 设计上下文能力(硬性门槛),否则停止并告知用户如何启用 Figma MCP/插件或等价方案;可选加载平台自带的 Figma→代码指南。优先使用 figma.com 设计链接或明确 fileKey+nodeId。按顺序执行解析目标、获取设计上下文、处理大 frame、建立清单、检测主题、构建 living spec、映射项目、导出资源、编写 stories 与组件测试、主题映射、交接给 figma-pixel-verify。
适用场景:从 Figma 节点实现 UI 到代码库,并需要可度量、可验证的规格与资源。
限制:不得仅凭 URL 编造 UI;不得把 MCP 代码当最终代码;不得用 CSS mask 重着色替代 Figma 导出的扁平资源;不得虚构 hover 或暗色值;不得把会话内表格当作完成;缺少 Assets 子节即未完成;有组件工作台但 stories 未覆盖清单行也算未完成;平台无关,不要求特定 MCP 服务器 id 或 CLI 作为唯一路径。