Claude 生成的页面导入到设计稿

注意

以下视频以 Figma 为例；国内各平台（MasterGo、Pixso、即时设计）操作相同，使用平台内的 Refore 网页转设计 插件即可。

在 Claude 里生成页面有 3 种常见方式，对应下面 3 种导入方法：

方式一：Claude 对话里下载 HTML 文件，直接导入

适合在 Claude 对话里直接生成的页面。下载页面代码（.html 文件）后，在插件的 AI 生成的 HTML 页面 标签页里直接导入：

1. 在 Claude 对话里点击下载按钮，下载生成的页面代码
2. 在 MasterGo/Pixso/即时设计 里打开 Refore 网页转设计 插件，切换到 AI 生成的 HTML 页面 标签页
3. 把下载好的 .html 文件拖进插件
4. 点击“交互式导入”按钮，查看页面预览
5. 确认无误后点击导入，导入成功

多文件、交互式导入等更多细节，请查看 导入 AI 生成的 HTML 页面。

方式二：Claude Artifacts 发布后录制导入

这种模式一般生成的是完整前端工程，无法直接拿到完整的 HTML 文件并在 Refore 网页转设计 插件里直接导入，所以需要使用浏览器插件录制导入。

适合通过 Claude Artifacts 生成的页面。发布后会得到一个可访问的页面链接，用浏览器插件录制该页面再导入：

1. 打开 Claude Artifacts 入口，按界面提示生成页面
2. 页面生成后，点击发布（Publish），并打开发布后的页面
3. 点开 Refore 网页转设计 浏览器插件，录制页面
4. 在 MasterGo/Pixso/即时设计 中启动 Refore 网页转设计 插件
5. 导入刚刚录制的页面，导入成功

方式三：Claude Design 预览页录制导入

这种模式一般生成的是完整前端工程，无法直接拿到完整的 HTML 文件并在 Refore 网页转设计 插件里直接导入，所以需要使用浏览器插件录制导入。

适合通过 Claude Design 生成的页面。在 New Tab 中打开预览页后，用浏览器插件录制再导入：

1. 打开 Claude Design 入口，按界面提示生成页面
2. 页面生成后，点击 New Tab 打开预览页
3. 点开 Refore 网页转设计 浏览器插件，录制页面
4. 在 MasterGo/Pixso/即时设计 中启动 Refore 网页转设计 插件，导入之前录制的页面