先讲几个核心判断：MasterGo AI 并不具备传统意义上的“一键格式转换”能力，例如将设计稿直接导出为 PDF 或 Sketch 文件，也不能把 Word、PPT 自动变为设计稿。它真正的强项是另一条路径——根据你提供的文字描述、手绘草图或现有原型，直接生成高保真可编辑的设计稿，并支持后续导出代码。这套逻辑才是你真正需要的“自动转化”能力。下面，我们来详细拆解具体的操作方法。
用 MasterGo AI 生成可编辑原型稿
这是最常用、也最稳定的一条路径。简单概括就是：输入需求 → AI 生成 → 插入画布 → 编辑优化。具体操作步骤如下：
- 登录 MasterGo 后，点击右上角的【新建文件】，进入空白画布。
- 点击顶部工具栏的【AI 图标】，选择【AI 生成界面】。
- 在输入框中，尽可能写清楚你的需求：页面类型（网页、APP 还是后台？）、结构模块（导航栏、轮播图、列表区……）、风格关键词（比如主题色 #FA2549、圆角 8px、明暗模式）。
- 按回车后，等待大约 10 秒，AI 会先生成一个结构化描述。确认无误后，点击【开始生成】，一个图层完整的设计稿就出现了。
- 最后点击【插入到画布】，你就可以在 MasterGo 中直接调整间距、替换图片、修改文案，甚至添加交互标注了。
用 html-to-mastergo 插件实现 HTML 转设计稿
如果你手头已经有现成的 HTML 页面——比如用 Cursor 生成的原型——可以通过一个插件快速导入为可编辑的设计稿。这个插件叫 html-to-mastergo，它能保留 DOM 层级和基础的样式信息。
- 在 MasterGo 的插件市场里搜索并安装【html-to-mastergo】。
- 它支持三种输入方式：① 直接捕获当前浏览器打开的网页；② 粘贴一个已发布的在线 HTML 地址（例如 Vercel 的部署链接）；③ 把本地的单页 HTML 文件直接拖进插件窗口。
- 转换完成后，页面元素会按语义自动分组为 Frame 和 Layer。文本、按钮、图片基本都可以直接选中编辑。不过需要注意，CSS 动画、复杂的 flex 布局等效果，可能需要你手动微调一下。
用 MasterGo MCP + Cursor 实现双向联动
这其实不算传统意义上的“格式转换”，更像是打通了设计与开发之间的数据链路。你可以从 MasterGo 读取 DSL（设计结构数据），然后在 Cursor 中让 AI 生成对应的代码；反过来，用代码生成 HTML 后，再导入 MasterGo 进行精细化编辑。
- 在 MasterGo 的安全设置中，先生成一个个人 Token。
- 在 Cursor 的 MCP 配置里填入这个 Token，并安装 @mastergo/magic-mcp 包（确保你的 Node 版本 ≥ 18）。
- 在 Cursor 中粘贴 MasterGo 画布的容器链接，启用 Agent 模式。AI 就能基于 DSL 生成 React 或 Vue 的代码了。
- 反向操作同理：在 Cursor 里写好 HTML → 保存为本地文件 → 用 html-to-mastergo 插件导入 → 在 MasterGo 中调整视觉细节和标注。
注意事项与常见卡点
这些细节决定了整个流程能否真正跑通：
- 提示词的质量决定一切：AI 生成的效果高度依赖你输入的提示词。避免写“好看一点”这种模糊的说法，要具体到“顶部固定导航栏，深蓝背景+白色文字，中间轮播图高度 200px，下方三列图标带文字说明”。
- html-to-mastergo 的兼容性：这个插件对内联样式兼容得比较好，但外部 CSS 文件或由 JS 动态渲染的内容，它是无法识别的。建议在导出前，先用浏览器的 DevTools 检查一下页面是否已经静态化。
- MCP 连接失败的排查：遇到 MCP 连接失败，多半是因为 node 版本过低、网络无法访问 npmjs.org，或是 Windows 下 cmd 的权限不足。建议优先检查终端能否顺利执行 npx -y @mastergo/magic-mcp 这个命令。
- 记住，所有生成结果都只是起点：MasterGo 最大的价值恰恰在于它的“可编辑性”。生成后，务必进入画布仔细检查图层的命名、组件的嵌套关系，以及响应式断点是否合理。这些细节才是决定最终产品品质的关键。