3 分钟做出可上线游戏 UI：AI Studio 视频教程

观看官方视频

视频： Game developers, you need to see this 👀（VberAI YouTube 频道）

官方描述要点：

3 分钟做出可上线的游戏 UI。无需手工切图、无需重复搭建、不再浪费数小时。
导入 PSD 与 Figma → AI 生成游戏 UI → 自动拆资源 → 直接导出 Unity、Cocos 与 Godot。

视频在演示什么

VberAI AI Studio（简称 AI Studio）把设计稿当作结构化数据，而不是单张 PNG：

• 左侧：PSD / Figma 图层
• 中间：画布预览
• 右侧：按 Unity / Godot / Cocos 语义导出引擎层级

与「把图丢进 Canvas」不同，AI Studio 输出的是可复用预制体 / 场景节点，适合菜单、HUD、商店等重复出现的界面。

适合谁看

角色	价值
美术出 PSD/Figma，程序搭 UI	缩短设计→引擎往返
独立开发者	快速验证一屏可玩 UI
多引擎团队	同一设计流程导出不同引擎

图文步骤（配合视频操作）

1. 准备设计稿

• 使用分层 PSD 或 Figma Frame（不要只导出合并图）
• 控件分组命名清晰（如 Btn_Start、Panel_HUD）
• 在 VberAI 打开 VberAI AI Studio（AI Studio）

2. 导入并检查图层

1. 新建导入任务，上传 .psd 或连接 Figma 画板
2. 在图层面板确认分组对应 UI 模块
3. 隐藏草稿层、修正明显命名问题

3. 预览与导出设置

• 在画布检查间距、叠放顺序
• 目标引擎选 Unity / Godot / Cocos Creator
• 输出类型选 UI 层级 / 预制体（不要仅导出散图）
• 文本层优先 TextMeshPro（Unity）或引擎对应文本组件

4. 导入引擎并冒烟测试

1. 下载导出包，放入工程约定目录
2. 打开生成预制体，挂到 Canvas（Unity）或 Control 根（Godot）
3. 在 16:9 与竖屏比例下 Play 测试

若已配置 Unity MCP 或 Godot MCP，可在导入后让 AI 批量重命名节点、绑定按钮信号。

与 MCP 插件如何配合

工具	职责
AI Studio	设计稿 → 引擎 UI 结构
Unity / Godot / Cocos MCP	导入后的编辑器自动化
AI Super Matting	图标透明抠图（导出前）

设计负责布局壳层，MCP 负责接线与迭代——详见 Figma 到 Godot：手动 vs AI Studio 对比。

常见问题

这个视频讲 MCP 吗？
主要讲 AI Studio 设计稿转 UI；Cocos Creator MCP 配置请看 Cocos Creator MCP 配置教程。

支持哪些引擎？
视频描述写明可导出 Unity、Cocos、Godot。

3 分钟现实吗？
在分层规范、单屏复杂度适中的前提下，首屏导入+导出可达到分钟级；复杂主题字体与多语言仍需引擎内打磨。

官方视频链接？
YouTube AWptt6hUZkM，频道 @vber_ai。

延伸阅读

• 5 分钟用 AI Studio 将 PSD 导入 Unity UI
• Cocos Creator MCP 配置教程

订阅 VberAI YouTube，或打开 VberAI AI Studio 用同一屏设计稿试一遍导出。