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）接口無法正確解析或還原全部頁面結構和細節。