MCP 导入：智能地导入你所要的

Refore 网页转设计 提供了一个 MCP（Model Context Protocol）server。给你的 AI agent（Claude Code、Claude Desktop、Codex、Cursor、WorkBuddy、Kimi Code 等任意支持 MCP 的客户端）配上它之后，你就可以在对话里直接说一句话，让 agent 按你的要求打开页面、点开模块、走完一个操作流程，把看到的每一页挨个导入到 MasterGo、Pixso、即时设计或 Figma 的设计稿里。

它适合做什么

导入 AI 刚生成的页面：agent 在对话里帮你生成了一个页面，接着说一句「导入到 MasterGo」，它就直接把页面导进设计稿，不用再手动保存文件、打开插件、选择文件。
批量导入一个操作流程：比如「打开 xxx.com，把添加用户的整个流程导入 MasterGo」。agent 会自己打开页面、点按钮、填表单，边操作边把列表页、弹窗、填好表单的状态逐个导入成独立的设计帧。
批量导入所有子模块：让 agent 把某个页面下所有的 tab、弹框、下拉菜单挨个点开并导入。

什么时候不建议用 MCP

让 agent 一步步「爬」页面很省心，但要清楚它的两个代价：

慢：总耗时远大于 用浏览器插件录制并导入。
还原度比其他方式差：导入哪些内容、什么时候算「这一页可以了」，都是大模型当场判断的，带有随机性，同一个页面跑两次结果不一定一样。要稳定的高还原度，用浏览器插件录制并导入、或者直接把 HTML 文件拖进插件导入，都比走 MCP 好。

所以 MCP 真正的价值在于不用你亲自操作，以及能和 agent 生成页面的工作流无缝衔接；对还原度要求高、或者你自己点几下就能录完的页面，优先用插件。

安装 MCP

下面这段视频以 WorkBuddy + Figma 为例，演示从安装 MCP 到导入第一个页面的完整过程，全程 3 分钟：

在 MasterGo/Pixso/即时设计/Figma 里打开 Refore 网页转设计插件，切换到 MCP Tab。此时还没有任何 agent 连接，插件里会显示「配置 MCP」的引导。
在引导里选择你用的 agent，用下面任意一种方式完成配置：
把插件里给出的这句话复制下来，直接发给 agent，agent 会自己完成安装并检查环境：
添加 https://www.npmjs.com/package/@refore-ai/html-to-mastergo-mcp 这个 mcp
Claude Code、Claude Desktop、Codex、Cursor、WorkBuddy、Kimi Code 都可以这样装。
安装好后，可以继续发一句话给 agent，来确认是否安装成功、是否需要重启 / 信任新 MCP 等操作，按 agent 的回复做就可以了：
检查一下 refore-html-to-mastergo 这个 mcp 装好了没，能正常用吗？还需要我做什么操作？
Claude Code：
Terminal window
claude mcp add refore-html-to-mastergo -- npx -y @refore-ai/html-to-mastergo-mcp
Codex：
Terminal window
codex mcp add refore-html-to-mastergo -- npx -y @refore-ai/html-to-mastergo-mcp
把下面这段加进 agent 的 MCP 配置文件里（Claude Desktop 是 claude_desktop_config.json，Cursor 是 ~/.cursor/mcp.json，WorkBuddy 在「连接器 → 自定义连接器 → 配置 MCP」里，其它 agent 找它自己的 mcpServers 配置）：
{ "mcpServers": { "refore-html-to-mastergo": { "command": "npx", "args": ["-y", "@refore-ai/html-to-mastergo-mcp"] } } }
Codex 用的是 TOML，写进 ~/.codex/config.toml：
[mcp_servers.refore-html-to-mastergo] command = "npx" args = ["-y", "@refore-ai/html-to-mastergo-mcp"]

每个设计平台对应一个独立的 MCP 包，在各平台的 Refore 网页转设计 插件 MCP 标签页里直接复制即可。
安装多个平台的 MCP 也没问题，可以一起用，只要你在 prompt 里说清楚是要导入到哪里，相应的平台也打开了 Refore 网页转设计 插件 MCP 标签页

设计工具	npm 包
MasterGo	`@refore-ai/html-to-mastergo-mcp`
即时设计	`@refore-ai/html-to-jsdesign-mcp`
Pixso	`@refore-ai/html-to-pixso-china-mcp`
Figma	`@refore-ai/html-to-figma-mcp`

Codex 桌面端：安装 MCP 后，需要重启 Codex

Codex 桌面端现在已经改名叫 ChatGPT（桌面 App 的名字就是 ChatGPT，Codex 是它里面的一个模式）。在它里面装好 MCP 之后不会立刻生效，需要完全退出 ChatGPT 再重新打开一次。

WorkBuddy 新增的 MCP 不会自动生效

在 WorkBuddy 里装好之后，新加的 MCP 需要你手动信任一次：

在左侧边栏点「专家·技能·连接器」，在弹出的菜单里选「连接器」。
在打开的页面里，点右上角的「自定义连接器」
在随后打开的「MCP 服务管理」弹框里找到刚装的 refore-html-to-mastergo，点「信任」，并确认它已经启用（右侧开关打开、名称后面是绿点）。

确认 agent 已经连上插件

最直接的办法是让 agent 用一下这个 MCP，它能读到你正在编辑的设计稿就说明连通了：

用 refore-html-to-mastergo 这个 MCP 读一下我正在设计工具里编辑的这份设计稿，告诉我文件名、里面有哪几个 Page，以及我现在停在哪个 Page 上。

也可以在插件的 MCP Tab 里直接看：点顶部的「已连接 N 个 Agent」展开「MCP 连接」列表，每一条下面会写明是哪个 agent 连进来的。

连上后显示成 codex-mcp-client：

插件里看到 Codex 已连接

连上后显示成 claude-code，前面是它启动时所在的目录；开了几个 Claude Code 会话就会有几条。

连上后显示成 refore-html-to-mastergo：

插件里看到 WorkBuddy 已连接

导入一个页面

安装好之后，在 agent 的对话里直接下命令就行。比如让 agent 生成一个登录页，然后说：

帮我导入到 MasterGo

agent 就会调用 Refore 网页转设计 MCP 把页面导入到设计稿里。你可以在插件的 MCP Tab 看到导入任务的进度，导入完成后页面会出现在当前画布上。

也可以直接给一个网址：

把 https://baidu.com 导入 MasterGo
把 https://reforeai.cn 导入 MasterGo （因为图很多，会很慢）

让 agent 批量导入一个流程

这是 MCP 最能发挥作用的场景：把一个多页面、带交互的操作流程交给 agent 去走，它会边操作边导入。

以 Claude Code 为例（前提是 Claude Code 也已经按上面的方法装好了 MCP），把需求写进去：

打开 https://reforeai.cn/dash/team，把添加用户的整个流程中的所有页面导入到 MasterGo

接下来 agent 会：

打开目标页面，先把成员列表页导入。
点「添加」按钮，把弹出的添加用户弹窗导入。
在表单里输入内容、做勾选，把填好表单的状态也导入。
流程走完就停下来。你在设计稿里得到的是一个流程的三张独立设计帧：列表页、空白弹窗、填好的弹窗。

流程很长的话，让 agent 慢慢爬慢慢导是很省心的；但要注意总耗时会明显长于用浏览器插件录制连续多个页面后一次导入，可以按需选择。

常见问题

插件里一直显示「0 connected」

确认 agent 已经把 MCP 装好（Claude Code 可以用 claude mcp list 查看）。
WorkBuddy 需要在「自定义连接器」里手动点「信任」，见 WorkBuddy 新增的 MCP 不会自动生效。
Codex 桌面端（现在叫 ChatGPT）装完 MCP 需要重启一次应用，见安装 MCP 后，需要重启 Codex。
确认安装的包和当前设计工具是同一个平台（比如在 MasterGo 里连的是 html-to-mastergo-mcp，不是 html-to-figma-mcp）。

导入的页面不完整

agent 抓到的页面内容取决于它当时看到的 DOM。需要滚动加载、或者鼠标悬停才出现的内容，可以在命令里明确说明，比如「滚动到底再导入」「把导航菜单展开后导入」。

环境要求

本机需要安装 Node.js 18 或更高版本（agent 通过 npx 拉起 MCP server）。

了解 Refore 网页转设计