用 AI 對 PSD 切圖並拼成 Unity UGUI 預製體

VberAI Studio（短稱 AI Studio，≠ Google AI Studio）能對 PSD 做兩件程式實際要的事：切圖（圖層變成可用 Sprite），以及拼 UI 預製體（按原階層生成 Unity UGUI Prefab，掛到 Canvas 下）。入口：AI Studio。術語：PSD。

「用 AI 對 PSD 切圖和拼 UI 預製體」問的不是濾鏡，而是：設計師給了分層 .psd，程式能不能少做「匯出 PNG → 拖 Image → 對間距 → 設錨點」這一圈。

這就是 PSD 進 Unity 預製體 的交接問題：Photoshop 分組應變成 Canvas 下的節點樹。

切圖和拼預製體不是同一步

工作	你拿到什麼	仍要手做的
只切圖	一堆 PNG / Sprite	在 Hierarchy 裡重擺位置、嵌套、錨點
只匯出整圖	一張背景圖	按鈕點不到，也改不了文案
切圖 + 拼預製體	Sprite 加上 Canvas 階層 / Prefab	綁點擊、接資料、補適配

傳統流水線把這兩步拆給美術和程式：Photoshop 切片，Unity 裡再拼。引擎內 PSD2UGUI 一類外掛把解析放進編輯器，通常還要圖層按規則命名。AI Studio 把解析放在遊戲畫布：先看階層，再匯出 Prefab，而不是先丟一個散圖資料夾。

更細的「五分鐘匯入清單」見 PSD 匯入 Unity UI。本文只講驗收口徑：怎樣才算「拼好了」，以及什麼 PSD 拼不好。

產出必須能進 UGUI

一次可用的轉換，至少同時有：

1. 碎圖 — 按鈕底、圖示、九宮格面板等分開，能當 Image。
2. 文字 — 盡量落到 TextMeshPro，而不是烤進貼圖（要改 copy、做多語言時才改得動）。
3. 階層 — 組 → 子節點，對應 PSD 分組，而不是全攤在 Canvas 根下。
4. Prefab — 能拖進已有 Canvas，RectTransform 大致對上設計座標。

它不代替：按鈕 OnClick、紅點邏輯、安全區腳本、TMP 字型資源與專案 Atlas 規範。那些在預製體進工程後做；已裝 Unity MCP 時，可用 Cursor / Claude Code 批次改名、掛引用。

PSD 怎樣才切得動、拼得上

AI 不是對着一張海報猜控件。原始檔越像 UI 結構，Prefab 越乾淨。

建議	原因
控件單獨成組，組名可讀（Btn_Start、Panel_HUD）	映射成 Prefab 根 / 按鈕節點
底圖、圖示、文字分圖層，不要先合併	才能分別變成 Image / TMP
少用不可控的圖層樣式、非正常混合	否則只能柵格成一張，丟失互動
交分層 .psd，不要只給合併 PNG	扁平圖走 原位切圖，沒有 PSD 分組資訊

Group 47、全柵格化、陰影全打在同一層上的稿，匯入後仍要在畫布或 Unity 裡整理——這不是轉換失敗，是原始檔沒有結構。

在 AI Studio 裡怎麼做

按鈕文案以面板為準。

1. 匯入分層 PSD

打開 AI Studio，匯入 .psd。在圖層面板核對：頂欄、底欄、彈窗、按鈕組是否還在，而不是已被壓成一張。

2. 畫布上當 UI 看，不當海報看

檢查疊放順序、間距、隱藏的標註層。該點的是按鈕還是裝飾，盡量在匯出前分好組。需要透明邊時，可接 摳圖。

3. 匯出 UGUI 預製體，不要只匯出散圖

目標引擎選 Unity，輸出類型優先 UI 階層 / Prefab。文字優先 TMP；可拉伸面板保留九宮格能力（以面板為準）。

4. 拖到 Canvas 上做冒煙

匯入到約定目錄（如 Assets/UI/），Prefab 掛到場景 Canvas。Play 一次 16:9 和目標豎屏比例，點主路徑按鈕。

同屏若來自 Figma 而不是 PSD，走 Figma → Unity。Godot / Cocos 同一畫布換匯出目標即可，組件名不同（Control / Widget），驗收思路一樣。

進 Unity 之後先查這幾項

• 點不了 — Canvas 有 Graphic Raycaster；可點 Image 開了 Raycast Target。
• 字不對 — TMP Font Asset 與 PSD 用字不是同一套時，要在工程裡指定。
• 糊 — Sprite 過濾、Canvas Scaler、Pixels Per Unit；小圖示不要放大超過 100%。
• 錨點漂 — 全屏背景和貼邊欄分開錨；安全區另加，不要指望 PSD 裡畫瀏海。
• 改一版 PSD — 大改佈局就重新匯出 Prefab；只改兩個按鈕顏色，直接在 Unity 改。

和「Unity 裡裝個 PSD 外掛」差在哪

	引擎內 PSD2UGUI / 命名規則外掛	VberAI Studio
工作位置	Unity 編輯器視窗	瀏覽器遊戲畫布
輸入	多為規範命名的 PSD	PSD；扁平效果圖另走原位切圖；也接 Figma
匯出後	仍在 Unity 裡繼續搭	可先在畫布改、拆、摳，再出 Prefab
綁邏輯	手寫或自建工具	預製體進工程後可用 Unity MCP

外掛適合「已經按外掛文件做了圖層規範」的團隊。畫布適合還要改一版、對一下引擎語義、再決定進 Unity / Godot / Cocos 的交接。兩者都解決不了「PSD 本身是一張效果圖」——那種先分層或走原位切圖。

適合誰

獨立小團隊、UI 程式接分層 Photoshop 稿：已經嫌「只切 PNG 再對 RectTransform」慢，又還沒想綁死某一套引擎內 PSD2UGUI 命名規範。

邊界

• 第一次匯出很少等於上線終稿；字型、多語言、動效、安全區仍在工程裡收。
• 複雜圖層樣式可能被打平，互動控件會變少。
• VberAI Studio ≠ Google AI Studio；見 對比。

小結

要的不是「再切一次圖」，而是 PSD 的結構變成 UGUI Prefab 的結構。切圖只是中間產物；能拖進 Canvas、點得動、字改得了，才算拼完。在 AI Studio 匯入分層 PSD，匯出 Prefab，再在 Unity 裡接邏輯。

常見問題

用 AI 對 PSD 切圖和拼 UI 預製體，具體指什麼？
兩件事一起做：圖層匯出為 Sprite，並按 PSD 分組生成 Unity UGUI 階層 / Prefab，而不是只給散圖。

VberAI 能從 PSD 生成 UGUI Prefab 嗎？
能。在 AI Studio 匯入分層 PSD，匯出 Unity UI 階層或預製體（以面板為準），再掛到 Canvas 下驗收。

和只切 PNG 有什麼不同？
切 PNG 丟掉座標與分組；拼預製體保留相對位置和節點樹，程式少對齊一次。

PSD 沒有分層怎麼辦？
走 原位切圖 識別控件；有 Figma / 分層 PSD 時不要用那條路。

會不會自動寫按鈕程式碼？
不會。Prefab 解決顯示與點擊區域；事件和資料用腳本或 Unity MCP 接。