5 分鐘用 AI Studio 將 PSD 導入 Unity UI

為什麼 PSD 進 Unity UI 仍然很慢

多數遊戲 UI 仍從 Photoshop 起步。設計師交付帶按鈕、面板、圖示和字樣的分層 PSD 後，程式往往要在 Unity 裡花數小時重建同一套結構：Canvas、RectTransform、Image、TextMeshPro 以及巢狀預製體。

目標不只是「把像素弄進引擎」，而是：

• 保留正確的圖層層級與命名
• 錨點與安全區能適配不同解析度
• 產出可復用預製體，而不是場景裡的一次性節點
• PSD 改版時有清晰的再導入路徑

本指南介紹一套 5 分鐘導入流程，使用 VberAI AI Studio——VberAI 的 AI Studio 設計稿轉引擎工具（左側 PSD / Figma，中間畫布預覽，右側匯出到引擎）。也會說明 PSD 側應如何準備，才能讓導入結果更乾淨。

開始之前需要準備什麼

打開 Unity 前先確認：

• Unity 2022.3 LTS 或 Unity 6（本指南以 uGUI 為主）
• 分層 PSD（不要只用合併後的 PNG）
• 在 VberAI 使用 VberAI AI Studio（AI Studio）
• Unity 專案中已有 Canvas 場景（建議 Scale With Screen Size）

PSD 規範清單（最省時間）：

做法	原因
每個控制項單獨成組	便於對應預製體根節點
統一命名（如 Btn_Start、Panel_HUD）	Hierarchy 裡更好找
避免不可控的合併特效	減少 Image 元件手工修圖
按 1x 出稿或註明縮放比例	避免 RectTransform 尺寸異常

用 AI Studio 的 5 分鐘流程

第 1 分鐘 — 上傳並檢查圖層

1. 打開 AI Studio，新建 PSD 導入任務。
2. 上傳 .psd 檔案。
3. 在圖層面板確認分組是否對應 UI 模組（頂欄、底欄、按鈕行、彈窗等）。

AI Studio 會保留 PSD 結構，而不是只給你一張需要反向拆解的圖集。

第 2 分鐘 — 在畫布上預覽

1. 選中主介面或根畫板分組。
2. 在中間畫布檢查間距、字型與疊放順序。
3. 在檢查器中修正明顯問題（重新命名分組、隱藏除錯層）。

若某層是裝飾還是可點擊控制項，建議在此階段就分組標記，可減少 Unity 裡的清理工作。

第 3 分鐘 — 映射為 Unity UI 語義

在匯出設定中：

• 目標引擎：Unity
• 輸出類型：UI 預製體 / 可直接掛 Canvas 的層級（不要僅匯出散圖）
• 文字層優先 TextMeshPro
• 面板、按鈕等可拉伸區域保留 9-slice 能力

AI Studio 會把設計圖層翻譯為引擎概念：RectTransform 佈局、Image 精靈、文字元件——而不是把一張 PNG 丟到 Canvas 上就結束。

第 4 分鐘 — 匯出到 Unity

1. 點擊 Export to Unity（或按 Studio 當前流程下載 Unity 包 / 工程修補）。
2. 在 Unity 中導入到 Assets/UI/（或團隊約定目錄）。
3. 打開產生的預製體，檢查 Canvas 子節點與錨點。

你應能看到與 PSD 分組對應的預製體層級，可直接拖到現有 Canvas 下。

第 5 分鐘 — 進場景並冒煙測試

1. 將預製體拖入場景 Canvas。
2. 進入 Play Mode，分別在 16:9 與豎屏比例下查看。
3. 記錄錨點或字型回退問題；優先在預製體模式修改，暫不必立刻回 PSD 整頁重導。

若團隊已使用 Unity MCP，可在導入後讓 AI 客戶端批次重新命名節點或綁定按鈕參考——對 PSD 裡 Group 47 這類通用命名尤其有用。

不用 AI Studio 時的手工路徑

傳統做法通常是：

1. 從 Photoshop 切 PNG
2. 在 Unity 導入 Sprite
3. 手工建立 Image / Text
4. 用 RectTransform 錨點重做佈局

單螢幕 UI 往往需要 30–90 分鐘，因此重複性介面工作更適合設計到引擎的自動化工具。

導入後常見問題

文字樣式不對 — 為 TMP 指定與設計一致的 Font Asset；回退字型常與 Photoshop 不一致。

真機發糊 — 檢查 Canvas Reference Resolution 與 Sprite Pixels Per Unit；避免把小圖示放大超過 100%。

按鈕點不到 — 確認 Canvas 有 Graphic Raycaster，可互動 Image 開啟 Raycast Target。

iPhone 安全區被裁切 — 在預製體根節點加 Safe Area 佈局或內邊距。

何時重新導入 vs 在 Unity 裡改

情況	建議
只改兩個按鈕顏色	直接在 Unity 改預製體
佈局重構（新增頁籤）	在 AI Studio 重新導入 PSD
新增整螢幕	新畫板 → 新預製體
加多語言	優先 TMP + 字串表

佈局以 PSD 為源、邏輯與互動留在 Unity，能避免反覆合併的痛苦。

與 VberAI 產品棧的關係

VberAI AI Studio（AI Studio）負責設計稿 → Unity UI 結構。Unity MCP（可選）適合導入後的編輯器自動化——掛按鈕、換圖、校驗參考。AI Super Matting 則適合圖示層在變成 Image 元件前做透明摳圖。

三者組合可以縮短從稿到可玩 UI 的週期，又不必拋棄美術已熟悉的 Photoshop 工作流程。

結語

在 PSD 被當作「結構化資料」而非單張圖片、並用 AI Studio 輸出 Unity 層級的前提下，5 分鐘完成 PSD → Unity UI 導入是可行的。準備好命名規範的分組，按 Unity UI 語義匯出，預製體掛到 Canvas 下，再用兩種寬高比冒煙測試即可。

想在下一張介面上試一遍？打開 VberAI AI Studio，上傳分層 PSD，一次匯出你的第一個 Unity UI 預製體。