3 分鐘做出可上線遊戲 UI：AI Studio 影片教學

觀看官方影片

影片： Game developers, you need to see this 👀（VberAI YouTube 頻道）

官方描述要點：

3 分鐘做出可上線的遊戲 UI。無需手工切圖、無需重複搭建、不再浪費數小時。
導入 PSD 與 Figma → AI 生成遊戲 UI → 自動拆資源 → 直接匯出 Unity、Cocos 與 Godot。

影片在示範什麼

VberAI AI Studio（簡稱 AI Studio）把設計稿當作結構化資料，而不是單張 PNG：

• 左側：PSD / Figma 圖層
• 中間：畫布預覽
• 右側：按 Unity / Godot / Cocos 語意匯出引擎層級

與「把圖丟進 Canvas」不同，AI Studio 輸出的是可複用預製體 / 場景節點，適合選單、HUD、商店等重複出現的介面。

適合誰看

角色	價值
美術出 PSD/Figma，程式搭 UI	縮短設計→引擎往返
獨立開發者	快速驗證一螢幕可玩 UI
多引擎團隊	同一設計流程匯出不同引擎

圖文步驟（配合影片操作）

1. 準備設計稿

• 使用分層 PSD 或 Figma Frame（不要只匯出合併圖）
• 控制項分組命名清晰（如 Btn_Start、Panel_HUD）
• 在 VberAI 打開 VberAI AI Studio（AI Studio）

2. 導入並檢查圖層

1. 新建導入任務，上傳 .psd 或連接 Figma 畫板
2. 在圖層面板確認分組對應 UI 模組
3. 隱藏草稿層、修正明顯命名問題

3. 預覽與匯出設定

• 在畫布檢查間距、疊放順序
• 目標引擎選 Unity / Godot / Cocos Creator
• 輸出類型選 UI 層級 / 預製體（不要僅匯出散圖）
• 文字層優先 TextMeshPro（Unity）或引擎對應文字元件

4. 導入引擎並冒煙測試

1. 下載匯出包，放入專案約定目錄
2. 開啟產生預製體，掛到 Canvas（Unity）或 Control 根（Godot）
3. 在 16:9 與直立螢幕比例下 Play 測試

若已設定 Unity MCP 或 Godot MCP，可在導入後讓 AI 批次重新命名節點、綁定按鈕訊號。

與 MCP 插件如何配合

工具	職責
AI Studio	設計稿 → 引擎 UI 結構
Unity / Godot / Cocos MCP	導入後的編輯器自動化
AI Super Matting	圖示透明去背（匯出前）

設計負責佈局殼層，MCP 負責接線與迭代——詳見 Figma 到 Godot：手動 vs AI Studio 對比。

常見問題

這個影片講 MCP 嗎？
主要講 AI Studio 設計稿轉 UI；Cocos Creator MCP 設定請看 Cocos Creator MCP 設定教學。

支援哪些引擎？
影片描述寫明可匯出 Unity、Cocos、Godot。

3 分鐘現實嗎？
在分層規範、單螢幕複雜度適中的前提下，首螢幕導入+匯出可達到分鐘級；複雜主題字型與多語言仍需引擎內打磨。

官方影片連結？
YouTube AWptt6hUZkM，頻道 @vber_ai。

延伸閱讀

• 5 分鐘用 AI Studio 將 PSD 導入 Unity UI
• Cocos Creator MCP 設定教學

訂閱 VberAI YouTube，或打開 VberAI AI Studio 用同一螢幕設計稿試一遍匯出。