AI 辅助生成原型图

一、HTML 转设计稿工具介绍

网页转设计稿工具

使用 MasterGo 的 html-to-mastergo 插件可将网页转为设计稿，支持：

• 任意在线 HTML 文件（通过将 AI 生成的 UI 发布为在线页，可通过 Vercel 实现）
• 离线的单页面 HTML 文件

参考视频：网页转设计稿(HTML to MasterGo/Pixso/Figma) 快速教程 | 任意网页一键转为设计稿 | DemoWay

---

二、实际案例演示

1. 原始网页

2. 网页录制结果导入为原型图

---

三、结合 Cursor 生成 HTML 原型

可以结合 Cursor 生成的 HTML 文件生成初步原型图，提示词需要根据具体字段修改。

1. 保留导航栏的完整界面生成

提示词示例：

使用前端三件套，参考图片样式，保留侧边栏和顶部样式，在红色区域内添加库存盘点表ui页面，相应字段自行设置即可，页面放在一个html中即可

参考图片：

生成结果：

2. 仅保留核心功能页

提示词示例：

修改HTML文件，只保留核心UI页面，去除左侧导航栏和顶部导航功能。

或者：

使用前端三件套，参考图片样式，设计库存盘点ui页面，相应字段为XXX，页面放在一个html中即可。

后续可根据生成结果进一步细调。

生成结果：

---

四、相关工具收费标准

1. html-to-mastergo 插件收费标准

2. Cursor 收费标准

3. MasterGo 收费标准

---

五、特别提示

Cursor 免费续杯方法：使用 yeongpin/cursor-free-vip 工具

支持 0.49.x 版本，可重置 Cursor AI 机器 ID 并绕过更高 Token 限制。解决"You’ve reached your trial request limit"或"Too many free trial accounts used on this machine"等提示问题。

六、网页设计稿修改方案

cusor配置设计稿转代码的mcp
设想：将从其他网页上转成的设计稿通过该mcp转为html代码，并通过与大模型对话进行二次修改，再通过网页转设计稿工具重新导入为原型图。
存在问题：MasterGo 插件导出的设计稿层级较深，导致在 Cursor 与 MasterGo 交互时，MCP（Magic Code Platform）接口无法正确解析或还原全部页面结构和细节。