用途:把当前 UI 实现捕获并发送到 Figma,生成可编辑的设计图层,包括真实框架、组件、自动布局和文本图层,而不是扁平截图。工具为远程模式,不受标准 Figma MCP 速率限制,适用于 Figma Design 文件。
主要能力与触发场景:用户说“push to Figma”“send to Figma”“capture UI”“code to canvas”“sync Figma”时使用;也可在功能实现完成后发给设计师评审,或同步 Figma 文件与当前实现状态,支持 Figma→代码→Figma→设计师细化→代码的往返流程。
使用方式:先确定目标,有三种去向——新建 Figma 文件(未指定时的默认项,创建在用户团队或组织草稿中,工具会询问使用哪个组织或团队)、已有 Figma Design 文件(用户提供文件 URL,需编辑权限,若 URL 指向的不是 Figma Design 文件则改为新建)、剪贴板(手动粘贴图层到 Figma 文件)。随后调用 generate_figma_design,提供清晰的捕获内容和发送目标描述,例如新建文件、指定文件 URL 或剪贴板。若本地服务器已在运行可省略“Start a local server”。工具会自行启动服务器、注入捕获脚本并打开浏览器窗口,打开时自动执行初次捕获。之后用户在浏览器工具栏中选择 Entire screen(捕获整个界面当前状态)或 Select element(选择特定元素捕获)。完成后,若捕获到 Figma Design 文件,用户点击 Open file 查看结果;若捕获到剪贴板,用户手动粘贴。
决策规则:提供 Figma URL 则用作已有文件目标;未指定目标则默认新建并询问组织/团队;需要多个页面或状态时重复调用,同一会话内复用同一文件;首次捕获后再说“also capture checkout”无需重新指定文件;从线上 Web 应用或生产站点捕获时提示工具用 Playwright 注入脚本;本地开发服务器无需额外步骤;需要响应式变体时在捕获之间调整浏览器视口大小。
限制与注意:仅支持 Figma Design 文件,目标为已有文件时需要编辑权限;用户需自行操作捕获工具栏并完成最后确认;捕获范围、状态与断点需用户自行选择,工具不自动决定。其他细节暂未提供。