导入 AI 生成的 HTML 页面
接下来重点介绍前者。
直接导入 .html 文件
打开 Refore 网页转设计 插件，点开 AI 生成的 HTML 页面 Tab，并按提示操作，如下图：
点击选择文件按钮，选择相应的 .html 文件即可。或者也可以直接把 HTML 文件拖到插件里导入。然后，您会看到这样的弹框，在这里可以选择导入的页面视口宽度，以及是否使用 交互式导入
交互式导入
以下 2 中情况请使用用 Refore 网页转设计 浏览器插件录制再导入 或 交互式导入（推荐后者）。
- 需要导入的页面内容是需要点击才能看到的，比如弹框
- 需要导入的页面内容是需要鼠标悬停才能看到的，比如菜单、按钮悬停样式
具体使用方法请看下面视频：
一键导入所有子模块
AI 生成的网页往往不只一屏——点击才出现的弹框、下拉/侧边菜单、多 tab、跳转过去的子页面，都是页面的一部分。过去想把这些子模块也变成设计稿，得在预览里一个个点开再手动导入，页面一多就很繁琐。
现在只要在导入流程里点一下 Import All（全部导入），AI 就会自动识别每个页面及其所有子模块——弹框、下拉/侧边菜单、多 tab、跳转到其它页面的链接——逐个「点开 → 导入」成独立的设计帧，并顺手把「点这里 → 到那个页面」连成可演示的点击原型连线。全程有进度、随时能取消。（Figma、MasterGo、Pixso、即时设计 均可使用，用平台内的 Refore 网页转设计 插件。）
视频里丢进两个页面，一键跑完就得到 8 张设计帧、6 个子状态、4 条点击原型连线，每个子模块都成了独立、可编辑、可点击跳转的稿子。
蓝色连线正是自动生成的点击原型（Flow 1）——导入进来的就是一套可点、可演示的原型，而不只是静态截图。
常见问题
交互式导入卡在页面准备中状态
用当前运行 Refore 网页转设计插件 的同一个浏览器打开这个 HTML 文件，如果不能正常打开，说明这个页面依赖一些您当前浏览器环境请求不到的资源，请检查网络情况，或者尝试使用 VPN。
如果还有问题，请联系我们