用途:将代码或浏览器 UI 反向转回 Figma 画布,生成可编辑设计图层。适用于本地开发服务器页面、公开 URL,以及需规划安全路径的认证或预发页面。
主要模式:capture-local 把本地开发服务器页面转为 Figma 图层;capture-public 转换公开 URL;capture-private 为需认证页面规划安全方案;reconcile 对比生成的 Figma 图层与源 UI 并列出偏差;fallback 在缺少 code-to-canvas 工具时给出人工重建说明。
工作流:先确认 URL 或应用来源、视口、目标 Figma 文件与页面及隐私等级;本地页面需启动或验证开发服务器并先截图,再触发 Figma 生成;若请求 code-to-canvas 或生成设计,请调用已安装的 figma:figma-generate-design 技能;生成后尽量读回 Figma 元数据或截取 Figma 截图,并输出对账报告,包含源 URL、视口、生成目标、可见不匹配与后续修改。
限制与注意:未经明确批准,不要将私有认证页面、Cookie、客户数据或内部 URL 发送到远程服务;若 Figma MCP 不可用,改为人工重建框架与组件方案;若页面无法访问,请求截图或导出并转交 figma-canvas-editor;若因隐私无法远程生成,保持本地处理并说明人工辅助导入路径;在承诺能力前先阅读 $CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.md。输出使用 assets/code-to-canvas-report.md 模板。