游戏 UI 设计：传统流程与 AI 生图 + VberAI Studio 拆分对比

效果对比

① 只交整屏 PNG

程序常见做法：对着一张图估按钮区域，在 Unity / Photoshop 里 重切、重摆。改一版文案或按钮位置，往往 整屏重导。

② 在 Studio 里拆成图层后再交

同一屏在 VberAI Studio 里 自动识别并拆分 按钮、面板、图标，相对位置与尺寸仍对齐原稿。改单个模块不必动整张底图。

③ 拆完自查：图层面板与命名

拆分后对照原稿，确认每个按钮、面板都有独立图层，并按团队规范改名（便于程序检索）。

若控件与背景 颜色融在一起，或整屏只有氛围、没有清晰边界，拆出来往往是碎层——需要重出 控件分区更清晰 的 flat 稿，或在 PS 里先分大层再导入。

④ 导出给程序

Studio 导出支持 分层 PSD 与 图片集（按拆分图层导出的 PNG 等资源，命名与图层面板一致）。程序要在 Photoshop 继续改稿用 PSD；要在引擎里自己搭 Canvas、或走既有切图规范时，交 图片集 即可，不必再手工从整屏 PNG 重切一遍。

需要少搭层级时，还可选 Unity / Godot / Cocos UI 预制体 / 层级（以 Studio 面板为准）。

---

传统流程 vs Studio 流程

环节	传统（PS / Figma 为主）	VberAI Studio
出稿	PS 分层或 Figma 组件	导入 PNG / PSD / Figma，或在画布 AI 生图 / 图生图
切图	手工切片、导出多张 PNG、写命名规范	AI 识别 UI 元素并原位拆分（原位切图说明）
交给程序	手工切图 zip、layout 截图 + 标注文档	分层 PSD 或 图片集；可选 Unity / Godot / Cocos 预制体（以 Studio 面板为准）
改一版	重切、重发 zip，程序重对坐标	在画布改模块或重导拆分结果，结构可延续

已有 规范分层 PSD / Figma 时，可直接 导入 Studio 再导出，不必从 flat 效果图做起。只有 整屏效果图或 AI 出图 时，重点是用拆分把「一张图」变成「可编辑结构」。

程序侧 Prefab 验收、九宫格、真机等问题见 设计稿自查 与 handoff 系列，本文不展开。

---

操作步骤

在 VberAI Studio中：

1. 进稿 — 新建任务：上传图片（PNG 效果图、分层 PSD 等），或使用 AI 生图 / 图生图 在画布出整屏 UI。
2. 拆分 — 对整屏稿执行 图层识别 / 原位拆分，在图层面板检查模块是否对应按钮、面板、图标；按需改名（如 Btn_、Panel_）。光效、半透明装饰可先用 AI 超强抠图 / 光效抠图说明 去背，再回 Studio 原位拆分。
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 才能用 Studio 吗？
不必。设计师完成 进稿 → 拆分 → 导出 PSD 或图片集 即可；引擎导入可由程序负责。

和只在 Midjourney 里出一张图有何不同？
Studio 把结果留在 可拆分画布，并可 导出分层 PSD / 图片集（或再选引擎导出），而不是只能下载一张整屏 PNG。

PSD、图片集、引擎 Prefab 怎么选？
要在 Photoshop 里继续改图层结构 → 分层 PSD。程序按团队规范自己进包、自己摆 RectTransform → 图片集。希望少手工搭 Canvas → 引擎导出。同一项目可以混用，但应在规格里写清交付格式。