用 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 接。