用途:将可运行的 Claude Code 原型转换为结构化 Figma 文件,把每个交互流程拆成独立画框,便于跨职能伙伴异步评审。核心目标是 1:1 视觉一致与设计系统原生。
主要能力:通过无头浏览器渲染再序列化(规则 0),全程在终端完成、不弹窗口;把捕获元素对接到已发布到 Figma 的 DS 组件实例、绑定变量与文字样式(规则 2);在每个节点上标注状态流转(规则 4)。不新建 Figma 组件(规则 1),不省略任何可见元素(规则 3)。
必要用法:需无头浏览器(优先本机已安装 Chrome 以 headless 模式驱动,puppeteer-core 或 Playwright channel:'chrome',其次 CDP;仅在找不到时回退下载 Chromium)和可运行的开发服务器。捕获由 generate_figma_design 完成(navigate → strip CSP → 注入 capture.js → window.figma.captureForDesign({captureId, endpoint, selector:'body'})),轮询直到完成;写入与标注用 use_figma,文件定位用 whoami、create_new_file。
适用场景:设计师在纯代码环境中工作、需从原型生成可供评审的 Figma 稿;流程为 Phase 0 解析文件与能力检测,1a 分析原型,1b 确认范围(3+ 流程时),Phase 2 映射设计系统,Phase 4 替换与绑定,Phase 6 汇总。
限制:若完全没有浏览器则停止,不得回退可见标签页,也不得手工从源码重建并声称 1:1。若设计系统未以组件/变量发布到 Figma,则只能就地标注 DS 漂移,不引入外部库组件。客户端支持分档:全支持(Claude Code/Desktop/Cursor 等)输出带 DS 组件、原生标注与 Code Connect;仅写入端输出原生标注;仅检查端输出 Prototype Spec 文档;不支持端仅凭代码分析输出 Spec。具体收费、价格暂未提供。