AI生成游戏UI素材全流程：从提示词设计到九宫格切图

先给一个判断用 AI 生成游戏 UI 素材真正难的不是“生成”而是“可用”。你可以让任意一款图像生成工具画出很好看的按钮、图标、面板背景但如果没有透明背景、没有切图规范、分辨率不对、风格不能成套复用它就只能躺在素材库里吃灰进不了 Unity 或 Unreal 的工程。本文不围绕某个单一项目做“一键安装测评”而是给出一套完整的实操路线从工具选型、环境准备、提示词设计、风格一致性控制到批量生成、透明底处理、九宫格切图、接口化调用最终让 AI 图片变成真正能放进游戏项目里的 UI 资源。文章信息密度会比较高建议先收藏后面实际动手时直接对照操作。全程以通用流程为主不绑定某一款具体软件本地部署和在线工具都会覆盖具体命令和参数均注明“按实际环境调整”。1. 核心能力速览先把“AI 生成可用游戏 UI”这件事拆成能力项方便判断你的项目目前缺什么能力维度说明满足条件文生图 / 图生图输入提示词生成按钮、图标、面板、背景等基础资源部署本地绘图工具或使用在线绘图平台风格一致性多张素材保持同一画风、同一光影、同一配色体系固定提示词结构、风格参考图、LoRA、ControlNet批量生成一次生成多张同风格图标或多个按钮状态本地工作流 / 接口任务队列透明底导出输出带 Alpha 通道的 PNG能直接叠到游戏界面上生成后使用 rembg、Photoshop 等后处理九宫格切图按钮、面板等可拉伸资源在引擎中不变形后处理脚本 引擎九宫格配置接口 API把生成能力接入自己的批量任务系统ComfyUI API / 在线服务 API可复用目录管理图标、按钮、背景按规范存放方便查找和替换项目级资源目录规范从材料看当前主流方案集中在Stable Diffusion WebUI、ComfyUI、Midjourney、即梦、文心一格等工具上。前两个适合本地批量生产后几个适合做风格探索和单张预览。没有哪款工具能直接生成“放进引擎就能用”的整套 UI因此本文的重点是“生成后续链路”而不是某款工具的炫技。2. 适用场景与使用边界先说明适合什么人用这套流程独立游戏开发者需求多变、预算有限需要快速产出可用的原型 UI。Game Jam / 黑客松48 小时内需要大量占位素材AI 生成能显著节省人力。美术预研阶段在正式绘制前快速验证“如果 UI 走这个风格整体效果如何”。小型团队没有专职 UI 美术时用 AI 补齐按钮、图标、技能框、面板背景等产出。Unity 插件 / 素材商店开发者批量制作统一风格的 UI 资源包。在使用边界上有三类情况建议谨慎需要完整图层源文件的项目。AI 生成的是合并后的平面图没有 PS 图层结构调整字体、替换图标、改局部配色都很麻烦。如果团队后期要频繁改版还是需要设计师在 AI 底图基础上重建图层。像素级还原要求很高的生产交付。比如运营活动 UI 有严格的对齐规范、固定字体字号、精确描边投影AI 生成图只能作为底稿或灵感参考不能直接交付给客户。文字密集型界面。AI 生成中文或英文标题时经常出现错字、偏旁异常、笔画粘连。按钮上需要文字时建议生成“无文字版本”到引擎里用 Text 组件或后期排版再叠加文字。另外版权边界必须明确AI 生成图片的训练数据来源、生成结果是否可商用在不同平台有不同规则UI 中如果包含第三方字体、品牌 Logo、知名角色形象需要先确认授权状态。素材商店上架前更要逐张检查素材是否涉及抄袭或侵权风险。3. 生成前的 UI 规范先定尺寸再做图很多人的操作顺序是反的先打开 AI 工具随机出图再考虑这个图能不能用。正确顺序应该是先列 UI 资源清单再定画布尺寸最后才开始生成。UI 资源不是“一张好看的图”而是“一群互相配套、尺寸规范、状态完整的资源”。以一个简单的格斗游戏 Demo 为例开局前至少需要资源类型常见尺寸建议说明主按钮256 x 128 或 512 x 256至少要生成 normal / pressed 两个状态图标256 x 256 或 512 x 512技能、道具、关卡入口图标面板背景1024 x 1024 或 2048 x 1024设置面板、背包面板、对话框背景分割线 / 装饰纹理512 x 128 或 256 x 64列表分隔、标题底纹进度条底 / 填充条512 x 64 或 1024 x 64血条、经验条、加载进度条弹窗底图1024 x 768 左右带边框和标题栏的弹窗尺寸建议只做参考不同游戏类型、不同引擎适配要求差异很大实际以项目分辨率规范为准。但有一点是通用的生成分辨率最好高于最终使用分辨率因为后处理阶段可能涉及裁剪、缩放、加描边高分辨率底图更耐折腾。同时建一份资源清单把目标变成可执行任务{ project: demo_ui, items: [ { name: btn_main_start, type: button, size: [256, 128], state: [normal, pressed] }, { name: icon_skill_fire, type: icon, size: [256, 256], state: [normal] }, { name: panel_bag, type: panel, size: [1024, 768], state: [normal] } ] }这份列表决定了你要生成多少张图、每张图大概是什么比例。后面批量任务、接口调用的输入数据也可以直接使用这份 JSON 结构。4. 本地部署环境准备与云端方案选择如果只是偶尔生成几张风格探索图直接用在线绘图平台最省事。但如果要批量产出整套 UI、做风格一致性控制、接 API 自动化生成本地部署仍然是目前最可控的方案。4.1 本地环境通用检查清单无论使用 Stable Diffusion WebUI 还是 ComfyUI都建议先检查这些环境项# 查看显卡型号和驱动状态 nvidia-smi # 查看 Python 版本部分工具需要 3.10 以上 python --version # 查看磁盘剩余空间模型文件体积较大 df -h硬件门槛方面给一个通用判断标准4G 显存及以下可以跑一些轻量优化方案或低分辨率出图但批量生成会非常勉强8G 显存左右适合跑常规 SD 1.5 系列模型是本地出图的基本推荐配置12G 以上显存可以比较从容地跑 SDXL、做批量任务以及叠参考图控制纯 CPU 也可以出图但速度会慢很多只建议做少量效果验证。以上是通用经验判断不是某个工具写死的参数实际占用以你本机运行情况为准。4.2 ComfyUI 启动命令模板ComfyUI 的优势是工作流可视化且 API 结构比较清晰适合做批量任务。启动方式通常是# 进入 ComfyUI 项目目录后执行具体命令以官方说明为准 python main.py --port 8188启动后浏览器访问http://127.0.0.1:8188即可看到工作流界面。端口占用时可以换成其他端口python main.py --port 8288Stable Diffusion WebUI 的启动方式类似常见路径下会有webui.bat或webui.sh双击或命令行执行即可。这两类工具的模型文件通常要下载并放到models/Stable-diffusion目录具体目录结构以工具版本为准不要混用版本。4.3 云端方案不想折腾本地环境时可以考虑云 GPU 平台或在线绘图工具。云 GPU 平台一般是租一台带显卡的远程机器流程仍然是部署 WebUI / ComfyUI但入口改成了浏览器 Web 页面。在线绘图平台更简单但可控性弱批量任务和 API 能力取决于具体平台开放策略。5. 生成基础 UI 素材的提示词写法提示词是“可用”的第一关。游戏 UI 素材的提示词要同时控制三个维度内容元素、材质风格、画幅比例与背景。5.1 按钮类提示词模板这里给出一套可直接改的通用结构英文提示词在大部分工具中效果更稳定game UI button, metal frame, dark fantasy style, glowing blue crystal core, rounded rectangle, center empty, no text, no letters, clean background, high detail, game asset, UI element, 8k, best quality Negative prompt: text, letters, watermark, signature, low quality, blurry, distorted, extra frame核心点在于写入了center empty和no text避免 AI 在按钮中间生成多余图案或乱码文字。很多初学者最容易踩的坑就是提示词里没写“不要文字”结果按钮上出现了一堆奇怪字符后期完全没法用。5.2 图标类提示词模板游戏图标最怕的是“装饰太多、识别度太低”。技能图标尤其需要主体突出mobile game skill icon, fireball, circular frame, simple background, strong silhouette, vivid color, centered composition, game asset, UI icon, no text, flat design style建议把图标主体放在提示词前面背景描述放在后面AI 会更倾向于优先绘制主体。如果某个工具对英文理解不稳定可以在“风格”部分改用斜杠分隔或直接复制风格参考图。5.3 面板背景类提示词模板面板背景一般比较素不能和前景内容抢视觉冲突game UI panel background, empty interior, antique parchment texture, dark gold border, victorian frame, transparent inside, no text, seamless game UI, high resolution生成面板时一个常见问题是 AI 会把面板内部也填满纹理导致后续放列表、放文字时视觉噪点过多。解决办法是在提示词里加强对inside的描述生成后如果内部仍然太花可以在后处理阶段做高斯模糊或调低不透明度。5.4 自定义分辨率多数工具可以设置输出分辨率和比例。按钮类资源建议2048 x 1024附近出图后统一缩放因为最终按钮可能要被拉伸成不同宽度高分辨率底图能保留更多边缘细节。图标类建议1024 x 1024起步。面板类根据实际比例设置避免强行拉伸导致比例失调。6. 风格一致性与图标成套化生成一张好看的 UI 素材并不难难的是让同一套按钮、图标、面板看起来是同一个游戏里的东西。这里有四层做法按成本从低到高排列6.1 固定提示词结构把风格关键词固化成一段“签名式后缀”每次生成都追加到提示词末尾例如, dark fantasy UI style, gold trim, blue crystal accent, dark wood base, game asset这样做有两个好处一是风格描述不会波动二是如果要换风格只需要修改这一段后缀不用重写整段提示词。6.2 用参考图锁风格在支持图生图的工具里把已经满意的素材当作参考图传入。提示词中注明style reference让生成结果从构图到配色都向第一张图靠拢。这是目前性价比最高的一致性方案不需要额外训练模型。6.3 用 LoRA 固化画风如果项目周期长、UI 素材量大可以考虑训练一个专门固化画风的 LoRA。在这里需要提一句训练素材要尽量都是你自己拥有版权、已获得授权的图片。LoRA 适合把“某一类风格”固定下来比如“暗黑奇幻金属 UI”“卡通像素风边框”但冷门风格需要积累足够的训练样本投入产出比要提前想清楚。6.4 用 ControlNet 控制构图ControlNet 主要用于控制姿势、边缘、深度等信息但对 UI 素材同样有价值。比如先用线稿画出技能图标的轮廓再用 ControlNet Canny 配合生成可以让同一套图标保持近似构图只是变换不同元素。图标成套化建议这样做先生成 1 个风格满意的“锚点图标”把锚点图标作为参考图固定提示词中的“元素”部分替换图标主体批量生成 8 至 16 个同风格图标人工筛选构图好、透视没崩的图进入后处理环节。一个实际经验是icon_skill_fire、icon_skill_ice、icon_skill_thunder这类按“元素替换”批量生成的图标比每张都重新写提示词的方案更容易保持背景一致。7. 后处理把“AI 图”变成“可用素材”这是整个流程里最容易被忽略、却最决定最终质量的部分。AI 生成图默认是带背景的方形图直接当成 UI 素材导入游戏项目会出现白底、边缘锯齿、文件过大、按钮拉伸变形等问题。7.1 透明底处理最常用的方案是 rembg一个开源抠图库支持命令行和 Python 调用。以 Python 为例from rembg import remove from PIL import Image import os input_dir ./raw output_dir ./ui os.makedirs(output_dir, exist_okTrue) for file in os.listdir(input_dir): if not file.lower().endswith((.png, .jpg, .jpeg)): continue in_path os.path.join(input_dir, file) out_path os.path.join(output_dir, os.path.splitext(file)[0] .png) with open(in_path, rb) as f: input_data f.read() output_data remove(input_data) with open(out_path, wb) as f: f.write(output_data) print(done)如果 UI 元素边缘比较复杂比如装饰边框、细线、粒子特效rembg 默认模型可能把半透明区域裁掉建议在后处理环节打开图像检查一遍。按钮和图标这类边缘清晰的素材通常效果都不错。7.2 九宫格切图逻辑这是游戏 UI 素材“可用”的关键概念。一张按钮图片如果直接拉伸四个圆角会被拉糊边框粗细不匀。九宫格切图的思路是把图片切成 3x3 九块四角固定不变四条边在特定方向上拉伸中心区域自由缩放。假设一张按钮是 200 x 100 像素顶部留 20 像素边框、左右留 20 像素边框那么切图逻辑可以这样概括from PIL import Image img Image.open(btn_normal.png).convert(RGBA) w, h img.size left 20 right w - 20 top 20 bottom h - 20 slices { top_left: img.crop((0, 0, left, top)), top_center: img.crop((left, 0, right, top)), top_right: img.crop((right, 0, w, top)), middle_left: img.crop((0, top, left, bottom)), middle_center: img.crop((left, top, right, bottom)), middle_right: img.crop((right, top, w, bottom)), bottom_left: img.crop((0, bottom, left, h)), bottom_center: img.crop((left, bottom, right, h)), bottom_right: img.crop((right, bottom, w, h)) } for name, part in slices.items(): part.save(fbtn_normal_{name}.png)实际项目中Unity 的 Sprite Editor、Unreal 的 UMG Nine Slice、Cocos Creator 的九宫格设置都支持直接在引擎里配置裁剪值不一定要物理切图。但理解九宫格的原理能帮你判断“AI 生成的边框设计适不适合拉伸”。如果 AI 生成的边框带复杂花纹或不对称装饰拉伸效果会非常难看这时要么重新生成纯边框素材要么放弃拉伸、做整图适配。7.3 命名规范与压缩从 AI 工具导出后文件名称通常是一串随机字符必须重命名。推荐格式类型_名称_状态例如btn_main_start_normal.pngbtn_main_start_pressed.pngicon_skill_fire_normal.pngpanel_bag_normal.png批量重命名的脚本很简单推荐在生成后立刻做一个自动重命名步骤否则素材数量一多后期找图会很痛苦。压缩方面UI 素材一般建议存储为压缩后的 PNG颜色简单的图标可以尝试 WebP 减少包体但透明底和边缘效果需要逐张确认。from PIL import Image import os input_dir ./ui output_dir ./ui_compressed os.makedirs(output_dir, exist_okTrue) for file in os.listdir(input_dir): if not file.lower().endswith(.png): continue img Image.open(os.path.join(input_dir, file)).convert(RGBA) img.save(os.path.join(output_dir, file), PNG, optimizeTrue) print(compressed)8. 批量任务与接口 API 接入当素材量上到几十张甚至上百张时逐张在 WebUI 里点按钮生成就不现实了。批量任务有两种常见路线一种是在 ComfyUI 里直接跑工作流队列一种是调用 API 让程序自动提交任务并下载结果。8.1 工作流队列方式ComfyUI 本身支持把多个任务排进队列。把“读取提示词 - 加载模型 - 出图 - 保存图片”连成一张工作流然后通过修改输入节点批量替换提示词或文件名即可连续生成多张素材。这种方式适合还在人工挑选风格阶段的场景你可以先批量跑 20 张再从中挑 3 张满意的继续深化。8.2 API 方式ComfyUI 的 API 模式本质上就是把一张可视化工作流导出为 API 格式的 JSON然后通过 HTTP 请求提交任务。通用调用逻辑如下import requests import time import json server http://127.0.0.1:8188 # 这个 JSON 需要从 ComfyUI 的“导出 API 格式工作流”功能获取字段名以实际版本为准 workflow {} # 实际使用时替换为导出的工作流内容 resp requests.post(f{server}/prompt, json{prompt: workflow}) data resp.json() prompt_id data.get(prompt_id) if not prompt_id: print(提交失败, data) exit(1) # 轮询输出结果 outputs None for _ in range(120): history_resp requests.get(f{server}/history/{prompt_id}) history history_resp.json() if history and prompt_id in history: outputs history[prompt_id].get(outputs, {}) break time.sleep(2) print(json.dumps(outputs, indent2, ensure_asciiFalse))注意工作流 JSON 里的inputs、class_type、输出节点名称都来源于你实际导出的工作流不同版本的 ComfyUI 字段会有差异。不能直接拿网上任意 JSON 就认为一定能跑通要以自己工作流导出的结果为准。8.3 任务队列与目录设计批量任务要解决两个问题输入怎么组织输出怎么落盘。建议用类似下面的目录结构project_ui/ ├── inputs/ │ ├── prompt_batch.csv │ └── style_ref.png ├── work/ │ ├── raw/ │ ├── cutout/ │ └── final/ └── logs/ └── task_20240720.log提示词批量文件可以用 CSV 管理每行是一个任务filename,prompt btn_main_start_normal,game UI button, metal frame, dark fantasy style, no text btn_main_start_pressed,game UI button pressed state, dark fantasy style, no text icon_skill_fire,fireball skill icon, circular frame, no text批量任务脚本读取 CSV拼接完整提示词再调用 API 提交任务。任务执行完成后按filename重命名输出文件直接进入后处理目录。失败任务记到日志里方便人工复查。9. 资源占用与性能观察本地跑 AI 生成时资源占用是绕不开的话题。这里不求精确数字但讲透观察方法和优化思路。9.1 显存占用如何观察生成过程中可以用nvidia-smi实时查看显存watch -n 2 nvidia-smi更细的执行过程可以用nvidia-smi dmon查看显卡利用率、显存、温度。UI 素材应用的分辨率通常不会特别大但如果在 2048 分辨率下批量生成显存压力会明显上升。9.2 分辨率、步数、批量数的影响分辨率翻倍显存占用接近翻倍生成时间明显增加。UI 素材建议按最终使用尺寸的 1.5 到 2 倍生成不必盲目冲到 4K。步数影响质量和时长。曝光、线稿、卡通类素材通常不需要极高步数用默认推荐值先跑一张质量不够再加步数。批量数batch size一次性生成多张会显著增加显存占用。显存不够时最稳妥的做法是调低批量数一次生成 1 到 2 张靠次数堆数量而不是靠单批数量堆性能。9.3 CPU 推理与 GPU 推理的差异CPU 可以推理但速度慢很多主要是模型计算本身高度依赖显卡并行能力。只在两类场景下推荐 CPU一是调试工作流时临时验证逻辑是否正确二是生成尺寸很小、数量很少的图片。真正的批量任务阶段CPU 模式会非常拖进度。9.4 降低显存占用的常用做法降低输出分辨率先跑小图确认构图再放大跑高清。减少 batch size。启用低显存优化参数具体参数因工具版本而异。定期清理 ComfyUI / WebUI 缓存目录。避免同时运行多个绘图工作流进程。9.5 端口冲突与进程残留本地服务启动后未正常关闭再次启动时可能出现端口占用。可以查看并结束残留进程# 查看某个端口被谁占用 lsof -i :8188 # 结束对应进程kill 命令需谨慎不要误杀其他进程 kill PID如果服务在远程服务器上还要注意监听地址是否绑定到了可访问的 IP否则从浏览器访问不到。10. 常见问题与排查方法问题现象可能原因排查方式解决方案启动后页面打不开端口被占用或服务未启动查看启动日志确认端口监听状态换端口或重启服务生成图片带大量乱码文字提示词未限制 text / letters检查提示词是否包含 no text在负面提示词加入 text、lowercase、letters若仍不行改用无文字版本后叠加文字批量生成风格不一致提示词风格后缀不固定或未使用参考图对比每张图的提示词差异固定风格签名后缀用参考图锁风格透明底处理失败rembg 模型对复杂边缘支持不足查看抠图后边缘是否破损使用 PS 人工精修或换其他抠图模型按钮导入引擎拉伸变形未理解九宫格原理确认按钮是否设置了边框切片在引擎中配置九宫格或重新设计可拉伸边框API 提交任务失败工作流 JSON 字段不匹配对比导出 JSON 与实际请求结构用官方“导出 API 格式工作流”功能重新导出显存不足分辨率、步数、批量数设置过高观察 nvidia-smi 占用降低分辨率或批量数启用低显存优化生成结果风格像素材拼贴提示词里混入了过多风格词汇检查是否堆砌了大量风格标签精简风格描述用参考图代替大量关键词素材多出重名覆盖批量脚本命名逻辑不完整检查文件名是否包含唯一标识使用 CSV 中的 filename 字段作为输出名11. 最佳实践与合规建议这段是整个流程的工程化收口。先建立最小可运行配置。第一次做项目时不要立刻追求几十张素材的批量产出。先用 1 张按钮、1 个图标、1 个面板背景跑通“生成 - 抠图 - 九宫格 - 导入引擎”的完整链路确认风格满意、流程没问题后再扩大批量规模。这样能避免在错误的方向上批量生产大量废图。资源和输入分离。生成原始图放在raw目录后处理后的最终资源放在final目录中间产物可以随时重新生成但最终资源要保证版本稳定。不要把 AI 生成的原图和已经切好的游戏资材混在一起否则改版时很难定位文件来源。批量任务必须加日志。批量生成时至少记录每张图的提示词、模型名、参数、输出路径、成功或失败原因。否则 50 张图里混了 3 张失败图你根本不知道是哪几张、是哪个环节出了问题。接口服务要限制访问范围。如果把 ComfyUI 或 WebUI 部署成可远程访问的服务建议只绑定内网地址或用防火墙限制访问 IP不要在公网上裸奔。服务端口不要使用默认的8188、7860等常见端口如果有能力加一层身份验证会更稳妥。合规红线必须反复确认。涉及人脸、角色形象时确认素材来源授权涉及字体时确认字体商用授权涉及品牌 Logo、受版权保护的游戏美术时不要直接输入到生成工具里做风格迁移。上架素材商店或用于商业项目前逐张检查生成结果是否包含不受控的第三方元素。发布前一定做效果复核。AI 生成的素材在色彩、边缘、文字上可能不稳定尤其是放大到不同比例的 UI 上时容易出现边缘锯齿或压缩噪音。图可以交给 AI 生成但“最终能不能上到正式包”这件事必须由人来判断。12. 总结与下一步回到一开始的判断AI 生成游戏 UI 素材的价值在于把“从零到有”的时间压缩到极短并且让没有专职美术的团队也有了快速试错的能力。最值得先验证的一步是你自己的项目中需求最大、最容易出效果的那类素材。如果是战斗类游戏先做一套技能图标如果是女性向经营游戏先做一套按钮和面板背景。一次性生成几十张从中挑出满足风格、构图、边缘质量的 3 到 5 张再进入透明底和九宫格处理。最容易踩的坑是两个一是忽略“无文字版”原则结果 AI 生成的按钮文字没法用二是把 AI 生成的方块图直接扔进引擎拉伸导致边框和圆角变形。先把这两个问题从流程上解决掉后面的批量生产就会顺很多。后续可以继续扩展的方向包括把生成流程接到自己的素材管理工具里、给固定风格训练 LoRA、对常见 UI 组件做模板化提示词库、将批量任务接入到定时构建流程。先跑通最小链路再逐步扩大范围是这套方法最稳的推进方式。