Refore 网页转设计 MCP：智能地导入你所要的到设计稿

现在让 AI Agent 生成一个页面已经很容易了。生成之后想把它拿到设计稿里继续改，本来就有两条挺顺手的路：如果拿到的是静态 HTML 文件，直接把文件拖进 Refore 网页转设计插件就能导入（导入 HTML 文件）；如果页面已经在浏览器里跑起来了，用浏览器插件录制再导入也一样（2 分钟录制并导入你的第一个页面）。这两种方式都快捷、方便，还原也准。

真正费劲的是另一类活儿：想让 AI 按你的要求，从一堆页面里挑出某几个页面、某几个模块导入；或者把一个操作流程上会经过的页面全都导入。这时候用 MCP 更省精力——给你的 Agent 配上 Refore 网页转设计 MCP，在对话里说一句「帮我导入到 Figma 里」，剩下的它自己跑。

MCP 也有缺点：比上面两种常规方法慢很多。所以它适合的是这样的场景——你希望 Agent 智能地把你要的那些页面导进设计稿，而时间上并不着急，比如：让 Agent 干活，你去吃个饭。

安装 “Refore 网页转设计” MCP：把一句 Prompt 发给 Agent

三种装法，门槛最低的一种是发一句 Prompt 给 Agent，让 Agent 自己装：在设计工具里打开 Refore 网页转设计插件、切到 MCP 标签页，把里面给出的那句话复制出来发给 Agent，它会自己完成安装并检查环境。也可以用命令行，或者把 JSON 片段贴进配置文件，插件面板里每种 Agent 的现成片段都有。

几个要留意的点：

• 每个设计平台对应一个独立的 npm 包（MasterGo、Pixso、即时设计、Figma 各一个），装多个也没问题，只要在对话里说清楚是要导到哪里。
• 本机需要 Node.js 18 或更高版本。
• Codex 桌面端（现在这个 App 叫 ChatGPT）装完 MCP 要完全退出再打开一次；WorkBuddy 里新加的 MCP 需要在「自定义连接器」里手动点一次「信任」。

Claude Code、Claude Desktop、Codex、Cursor、WorkBuddy、Kimi Code……任意支持 MCP 的客户端都能接。详细的安装步骤见文档：MCP 导入：智能地导入你所要的

例子一：WorkBuddy 刚生成的页面，一句话进设计稿

在 WorkBuddy 里让它生成一个登录页，页面出来之后，紧接着一句「帮我导入到 Figma 里」：

不用保存文件，也不用切窗口——就在同一个对话里往下说一句。

上图在 Figma 里的样子：页面已经落在画布上，帧的名字是「登录 - imported by Refore HTML to Figma(MCP)」，插件面板里能看到是哪个 Agent 连进来的、导入任务跑到哪一步了。

例子二：让 Agent 走完一个流程，边走边导

这才是 MCP 最能发挥作用的地方——多页面、带交互的流程。

比如把「打开某个页面，把添加用户的整个流程导入设计稿」交给 Claude Code，它会自己打开页面，先导列表页；点「添加」按钮，把弹出的弹窗导进去；在表单里填内容、做勾选，把填好的状态也导一份。流程走完就停。你在设计稿里拿到的是三张独立的设计帧。

同样的思路也可以用来「把这个页面下所有的 tab、弹框、下拉菜单挨个点开并导入」——这些以前要一个个手动点开再抓的状态，现在交给 Agent 去跑就行。

上面两个例子的完整过程，都在下面这段视频里：

什么时候不适合用 MCP

得说清楚代价。让 Agent 一页页「爬」很省心，但它比你自己用浏览器插件录制再导入要慢；而且导入哪些内容、什么时候算「这一页可以了」，都是模型当场判断的，同一个页面跑两次结果不一定完全一样。

所以：要稳定的高还原度，用浏览器插件录制并导入，或者直接把 HTML 文件拖进插件，这两条路都比走 MCP 强。MCP 的价值在别处——你完全不用亲自操作，以及它能和 Agent 生成页面的工作流无缝接上。

另外，导入页面会消耗免费额度，付费用户则不限量。

Figma、MasterGo、Pixso、即时设计都支持，操作完全一样。