Google AI Studio 生成的页面导入到设计稿

注意

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

Google AI Studio 有 Chat 和 Build 两种常见的页面生成方式，对应下面两种导入方法：

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

在 Google AI Studio Chat 中生成并预览页面，下载 HTML 文件后通过插件直接导入：

1. 在 Google AI Studio Chat 中按界面提示生成页面
2. 页面生成后打开预览，点击下载并保存 HTML 文件
3. 在 MasterGo/Pixso/即时设计中打开 Refore 网页转设计 插件，切换到 AI 生成的 HTML 页面 标签页
4. 把下载好的 HTML 文件拖进插件
5. 点击“交互式导入”按钮，查看页面预览
6. 确认无误后点击导入，导入成功

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

方式二：AI Studio Build 生成的页面，录制并导入

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

Google AI Studio Build 可以生成包含多个页面的可交互应用。依次打开并录制需要导入的页面，再从插件中批量导入：

1. 打开 Google AI Studio Build，输入提示词生成可交互的应用界面
2. 页面生成后，点开对应的预览页
3. 依次打开需要导入的页面，用 Refore 网页转设计 浏览器插件逐页录制
4. 在 MasterGo/Pixso/即时设计中打开 Refore 网页转设计 插件，切换到 Captures 标签页
5. 选择刚刚录制的页面并导入