用途:采集网页并转换为可编辑的 Figma 设计文件,基于 Figma MCP 完成。
主要能力与流程:先解析参数,输入包含一个或多个 URL 及可选标志,--existing <fileKey> 表示加入已有文件而非新建;未提供 URL 时需询问用户。随后对每个 URL 判断采集方式:若为本地开发服务器(localhost、127.0.0.1)且页面源码含 "mcp.figma.com/mcp/html-to-design/capture.js",使用 URL Fragment 轻量方式;否则使用 Playwright 注入方式,外部站点也用此方式。
必要用法:先连接远程 Figma MCP:claude mcp add --transport http figma https://mcp.figma.com/mcp;Playwright 路径需可用 playwright npm 包。用 mcp__figma__generate_figma_design 获取 capture ID,首个 URL 用 outputMode: "newFile",多个团队或套餐时询问保存位置;后续 URL 用 outputMode: "existingFile" 并传入首个 fileKey。URL Fragment 方式打开带参数的链接:open "<URL>#figmacapture=<CAPTURE_ID>&figmaendpoint=https%3A%2F%2Fmcp.figma.com%2Fmcp%2Fcapture%2F<CAPTURE_ID>%2Fsubmit&figmadelay=1000",等待 5-10 秒后轮询状态。Playwright 方式运行脚本:node $HOME/.claude/skills/dev-figma-capture/scripts/figma-capture.mjs --url <URL> --capture-id <CAPTURE_ID>,脚本会打开无头 Chromium、剥离 CSP 头、注入 capture.js 并提交 DOM;可用 --headless false、--delay <ms>、--selector <css>、--viewport-w <px>、--viewport-h <px>。成功后返回 claim URL,用 open "<claim-url>" 打开。多页面采集时,每页各自 capture ID,都会成为同一 Figma 文件中的新页面。
限制:captureForDesign() 常不 resolve,脚本以超时处理,可查控制台 "[Figma Capture] Success!";外部站点 CSP 错误由脚本自动处理,仍失败可加 --headless false;超过 10MB 的页面可能失败,可用 --selector 采集局部。具体要求、收费与平台支持暂未提供。