AI 拼遊戲 UI：不要直接改 Prefab，用畫布匯出 Unity / Godot / Cocos

用 Cursor 讓 AI「幫我把 HUD 拼進 Unity」，常見結果是：讀取 .prefab 文字、修改上萬行 YAML——耗時長、Token 成本高，且易損壞 GUID 與 .meta 參照。

更穩妥的做法：AI 不直接改 Prefab；只處理中間層；Prefab 由固定匯出程式產生。

本文涵蓋常見需求：AI 拼 UI、Cursor 改 Prefab、Unity / Godot / Cocos UI Prefab 匯出、Figma / PSD 進引擎而不手搭 Canvas。下文說明中間層分工，以及 VberAI Studio（AI Studio，≠ Google AI Studio）遊戲畫布路徑：設計稿或 AI 整屏 UI → 畫布拆分 → 確定性匯出 Prefab → Engine MCP 綁邏輯。

---

為什麼不要讓 AI 直接拼 Prefab

問題	實際表現
文字量	單屏 UI 的 Prefab 常 1 萬行以上，讀寫 Token 成本高
耗時	單次生成或修改常需 10–20 分鐘，迭代困難
資源風險	YAML 中改動參照、fileID，可能導致 GUID 遺失、資源斷鏈
難以審閱	diff 多為序列化欄位，合併風險高
版本迭代	每次改 UI 需重新生成整份 Prefab，維護成本高

AI 適合理解佈局、選擇控件、填寫欄位；不適合充當 Prefab 編輯器。

---

正確分工：中間層 + 確定性匯出

鏈路分為兩段：

AI：理解設計 → 產出中間表示（非 Prefab 文字）
固定程式：讀取中間表示 → 實例化控件 → 設定 RectTransform → 儲存 Prefab

中間層可以是專案自研格式，或 VberAI Studio 遊戲畫布層級。共同要求是：

• 結構清晰、體量可控，便於 AI 或人工修改
• Prefab 生成 無 LLM 參與，同輸入同輸出
• 匯出前可校驗：越界、必填欄位、綁定命名

玩法腳本在 Prefab 進專案後由 MCP 撰寫；UI 結構與玩法邏輯分離。

---

AI Studio 畫布：預覽、切圖、多引擎匯出

自研中間格式通常還需：掃描控件庫、維護規範文件、開發 Editor 工具、處理切圖與換皮。
VberAI Studio 將中間層與匯出能力產品化：

能力	作用
遊戲畫布	整屏 UI 可預覽，調整間距與層級後再匯出
原位拆分	按鈕、面板按原位置拆分，進引擎無整體偏移（拆分說明）
多類輸入	PSD / Figma、AI 生圖、整屏 PNG 均可匯入畫布
多引擎匯出	Unity UGUI、Godot Control、Cocos UI 同一流程
換皮 / 多語言	換皮、翻譯 後整樹重導
確定性 Prefab	匯出無 LLM 參與，不直接改寫 YAML

相對於純文字描述 UI，畫布同時涵蓋 視覺驗收、切圖、九宮格、活動換皮——若全部寫入自研規範，文件與工具鏈會快速膨脹。

---

推薦工作流：Figma / PSD → Prefab → MCP

步驟	事項	負責
1	設計稿分層與命名（或由 AI Studio 生成整屏 UI）	設計 / 企劃
2	匯入 VberAI Studio，在畫布檢查層級與點擊區域	設計 + 程式抽測
3	原位拆分 → 選擇 Unity / Godot / Cocos → 匯出 Prefab	AI Studio（確定性匯出）
4	Prefab 進專案，按 進引擎 MCP 清單 驗收佈局	程式
5	Cursor + Engine MCP 綁定 Btn_*、血量、彈窗（HUD 範例）	程式
6	提測前完成 發佈前 UI 自查	程式 + QA

交稿規範見 設計稿自查清單；七條常見 AI UI 鏈路見 工具比較。

推薦組合： VberAI Studio + 目標引擎 MCP + Cursor 或 Claude Code。流程示範：3 分鐘 UI 影片。

---

按素材選擇路徑

現有素材	建議路徑
PSD / Figma 分層稿	匯入 → 拆分 → 匯出（Figma 進 Unity）
整屏概念 PNG	落畫布 → 原位拆分 → 匯出（原位切圖）
無現成素材，需 Demo	AI Studio 生成 UI → 拆分 → 匯出 → MCP 綁邏輯

最終產出均為引擎內可掛載的 Prefab / UI 層級，而非由 AI 再次改寫磁碟上的 Prefab 文字。

---

常見問題

AI 可以直接生成 Unity Prefab 嗎？
技術上 LLM 可輸出 Prefab YAML，但不建議：文字量大、耗時長、易損壞 GUID，且難以審閱。更穩妥是 AI 處理中間層（畫布或自研描述），由固定程式匯出 Prefab。

Cursor 拼 UI 和 AI Studio 畫布有何不同？
Cursor + MCP 擅長進專案後寫腳本、綁節點、Play 驗收；不擅長安全地生成整屏 UI Prefab 結構。AI Studio 負責 UI 進引擎；兩者組合：畫布匯出 Prefab → MCP 綁邏輯。

Figma / PSD 如何進 Unity UI，而不手搭 Canvas？
將分層稿匯入 AI Studio → 原位拆分 → 匯出 Unity UGUI Prefab。Godot、Cocos 同一流程。詳見 Figma 到 Unity 與 PSD 切圖進 UGUI。

與 Google AI Studio 有何區別？
Google 側偏通用 Web 與原型；遊戲 Prefab 匯出見 比較文。

專案有自研 UI 框架，畫布是否適用？
匯出為標準引擎 UI 組件樹。若框架綁定自訂 Prefab 模板，可在進專案後二次封裝；仍比 AI 直改 YAML 更安全。

活動換皮是否需重拼？
無需從零手搭。畫布 換皮 後重導 Prefab，邏輯層按綁定名少量調整即可。