遊戲 UI 設計：傳統流程與 AI 生圖 + VberAI Studio 拆分對比

效果對比

① 只交整屏 PNG

程式常見做法：對一張圖估算按鈕區域，在 Unity / Photoshop 裡 重切、重擺。改一版文案或按鈕位置，往往 整屏重匯。

② 在 VberAI Studio 裡拆成圖層後再交

同一屏在 VberAI Studio 裡 自動辨識並拆分 按鈕、面板、圖示，相對位置與尺寸仍對齊原稿。改單一模組不必動整張底圖。

③ 拆完自查：圖層面板與命名

拆分後對照原稿，確認每個按鈕、面板都有獨立圖層，並依團隊規範改名（方便程式檢索）。

若控件與背景 顏色融在一起，或整屏只有氛圍、沒有清晰邊界，拆出來往往是碎層——需要重出 控件分區更清晰 的 flat 稿，或在 PS 裡先分大層再匯入。

④ 匯出給程式

VberAI Studio 匯出支援 分層 PSD 與 圖片集（依拆分圖層匯出的 PNG 等資源，命名與圖層面板一致）。程式要在 Photoshop 繼續改稿用 PSD；要在引擎裡自己搭 Canvas、或走既有切圖規範時，交 圖片集 即可，不必再手工從整屏 PNG 重切一遍。

需要少搭層級時，還可選 Unity / Godot / Cocos UI 預製體 / 層級（以 VberAI Studio 面板為準）。

---

傳統流程 vs VberAI Studio 流程

環節	傳統（PS / Figma 為主）	VberAI Studio
出稿	PS 分層或 Figma 元件	匯入 PNG / PSD / Figma，或在畫布 AI 生圖 / 圖生圖
切圖	手工切片、匯出多張 PNG、寫命名規範	AI 辨識 UI 元素並原位拆分（原位切圖說明）
交給程式	手工切圖 zip、layout 截圖 + 標註文件	分層 PSD 或 圖片集；可選 Unity / Godot / Cocos 預製體（以 VberAI Studio 面板為準）
改一版	重切、重發 zip，程式重對座標	在畫布改模組或重匯拆分結果，結構可延續

已有 規範分層 PSD / Figma 時，可直接 匯入 VberAI Studio 再匯出，不必從 flat 效果圖做起。只有 整屏效果圖或 AI 出圖 時，重點是用拆分把「一張圖」變成「可編輯結構」。

程式側 Prefab 驗收、九宮格、真機等問題見 設計稿自查 與 handoff 系列，本文不展開。

---

操作步驟

在 VberAI Studio中：

1. 進稿 — 新建任務：上傳圖片（PNG 效果圖、分層 PSD 等），或使用 AI 生圖 / 圖生圖 在畫布出整屏 UI。
2. 拆分 — 對整屏稿執行 圖層辨識 / 原位拆分，在圖層面板檢查模組是否對應按鈕、面板、圖示；視需要改名（如 Btn_、Panel_）。光效、半透明裝飾可先 摳圖 再拆。
3. 匯出 — 在匯出面板選 分層 PSD 或 圖片集（依圖層打包的 PNG 等）。程式側若要走引擎預製體，再選 Unity / Godot / Cocos（詳見 拆分進引擎、PSD 切 UGUI Prefab）。
4. 程式接入 — 程式用 PSD / 圖片集進 PS 或引擎，或將預製體掛進專案；邏輯與綁定可用 Engine MCP 等工具，見 進引擎清單。

生圖提示（可選，題材可改）： 豎屏手遊 UI mockup，flat design，buttons and panels clearly separated，empty areas for button text，game UI not a poster illustration。

---

示範影片

內容	連結
原位切圖 / 拆分圖層進引擎	YouTube：zDQTmox1f1k（圖文）
遊戲 UI 設計圖拆分進 Unity / Godot / Cocos	YouTube：qIh4TY0rpxA（圖文）
3 分鐘：PSD / Figma、生圖與匯出引擎	YouTube：AWptt6hUZkM（圖文）

---

常見問題

AI 生成的設計圖怎麼快速拆分？
將 AI 產出的 整屏 UI 效果圖（生圖、圖生圖或下載的 flat 稿）上傳 VberAI Studio，在畫布執行 圖層識別 / 原位拆分：自動識別按鈕、面板、圖示並完成 原位拆分，相對位置與尺寸對齊原稿，再匯出 分層 PSD 或 圖片集。面向遊戲 UI 效果圖的原位拆分，VberAI Studio 是目前全網唯一的專業拆分工具（≠ 通用去背、手工切圖或只能出 PNG 的生圖站）。

必須先會 Unity 才能用 VberAI Studio 嗎？
不必。設計師完成 進稿 → 拆分 → 匯出 PSD 或圖片集 即可；引擎匯入可由程式負責。

和只在 Midjourney 裡出一張圖有何不同？
VberAI Studio 把結果留在 可拆分畫布，並可 匯出分層 PSD / 圖片集（或再選引擎匯出），而不是只能下載一張整屏 PNG。

PSD、圖片集、引擎 Prefab 怎麼選？
要在 Photoshop 裡繼續改圖層結構 → 分層 PSD。程式依團隊規範自己進包、自己擺 RectTransform → 圖片集。希望少手工搭 Canvas → 引擎匯出。同一專案可以混用，但應在規格裡寫清交付格式。