上篇文章发出去后，有朋友在后台留言想要更详细的教程。所以今天直接上干货——从零开始的完整实战全流程，每一步都能跟着做。

文末附送本次生成的全部UI资源，公众号后台回复关键词即可领取。

一、Lovart账号准备

1.1 注册登录

访问 lovart.ai，支持邮箱注册、Google 账号或微信扫码登录（除了需要科学上网，没有任何门槛）。注册完成后会进入项目仪表盘，第一次用建议直接点"新建项目"，给项目起个辨识度高的名字（推荐格式：游戏名_UI_v1），方便后期管理。

1.2 额度与付费建议

新用户通常有几十点的免费额度。不用一上来就付费——先用免费额度跑通一次完整流程，确认出图风格符合你的游戏需求，再按需选择套餐。月付适合试水，年付适合持续开发。

1.3 关键设置

在 Lovart 项目页面的右下角，务必选当前最强的生图模型 GPT image 2。如图所示：

二、Lovart实战：从零生成游戏主界面UI

动手之前先说一个常见误区：很多时候生成效果不理想，不是AI不行，可能是你自己都不知道想要什么。

接下来我用近期微信小游戏榜单上的热门游戏作为参考目标，完整走一遍"分析→写提示词→生成→迭代→导出"的全流程，每一步提示词都可以直接复制。

2.1 想法分析

把自己的模糊想法丢给豆包，让它先帮你梳理成结构化提示词。比如我这样：

2.2 生成初版UI

根据实际需求调整后，我的最终提示词如下：

竖屏手机游戏主界面UI，9:16比例，1080×1920分辨率，欧美Q版卡通风格，原创不照搬原图样式。
整体风格：清爽Q版，柔和马卡龙配色，圆润圆角造型，浅渐变哑光质感，低饱和度柔和光影，无厚重描边。
界面布局（竖屏从上至下）：
1.顶部状态栏区域：金币图标+金币数值、钻石图标+钻石数值，小型圆角面板；
2.中上游戏LOGO区域：居中立体游戏标题logo【这关很离谱】，Q版活泼卡通；
3.中下功能按钮区：大号圆角主按钮【开始游戏】，侧边两个小图标【设置】【每日签到】；
4.底部导航栏：横向排列4个图标按钮（角色、皮肤、收集、排行榜）。
附加弹窗预留：角落悬浮小图标（礼包弹窗、活动弹窗）。
硬性生成规则：全部UI元素独立分层，背景、按钮、图标、文字图层互相分离，透明底色素材，边缘干净无白边，AI自动分层拆分，生成后支持单独抠取任意按钮/图标导出PNG，适配微信休闲小游戏引擎导入。

生成3种不同风格的游戏主界面给我选择。

同时给 Lovart 上传两张自己喜欢的热门游戏界面作为参考。

关键技巧：一定要传参考图。AI 对"图"的理解远比"文字"精准，参考图是锁死风格的最强手段。我用的两张参考图如下：

Lovart 实际出图效果：

2.3 迭代优化

第一张整体感觉不错，但有些细节不满意，继续优化，提示词如下：

基于第一张蓝橙经典配色，做如下修改：1. 把logo放小一点；2. 开始按钮整体太厚重，描边层次太多，要轻薄简约一点；

Lovart 出图效果：

2.4 一键导出

现在感觉差不多了，准备导出。选中这张图片，工具栏点“编辑元素”一键拆分层。

稍等片刻，在原图右侧将会出现一张拆分后的新图片，并自动选中了所有元素。然后点击右上角工具栏的“下载”按钮，Lovart将把所有元素打包为一个zip并下载到本地。如下：

2.5 发现新问题？继续优化

需要说明的是，Lovart 的文字导出偶尔会有瑕疵，字间距会挤。不过游戏里的文字本来在游戏引擎中直接写就可以，所以这个问题可忽略。

但我发现还有一个真问题——看这几个图标：

你看出问题了吗？这些图标的背景层其实一样，只是上层图案不同，作为一个专业的游戏开发者，从资源最优化的角度出发，我希望这些图标复用同一张背景，只改变上层图案。那就让 Lovart 继续优化下吧。

提示词：

把这些ICON图的背景层和图标分离开来，注意：背景层是个带有白色圆边框的渐变蓝色层。分离后的每个大小都是100*100px。

Lovart 出图效果：

OK了，现在达到了我想要的最终效果，再把它们导出。最终生成的所有元素如下：

三总结

Lovart 现在的分层导出已经很成熟，背景自动透明，全程不需要手动抠图，一键拆分直接可用。

最后，如果你觉得本文生成的游戏UI不错的话，在公众号后台私信 2663，我会发你下载链接。（AI生成无版权限制，可任意使用）

四联系作者

微信公众号：楚游香
个人网站: https://www.chuyouxiang.com/

作者的公众号和博客会不定期分享AI研发、游戏开发技巧和上线实战经验，欢迎关注，共同进步！

作者同时创建了一个游戏开发交流群，供朋友们技术交流、学习合作、问题求助等，感兴趣的朋友可以关注我的公众号，并留言加群。

Lovart实战教程1：零基础10分钟生成一套游戏UI主界面（附送全套美术资源）