企业官网建设流程全解析

先给一个判断：用 AI 生成游戏 UI 素材，真正难的不是“生成”，而是“可用”。你可以让任意一款图像生成工具画出很好看的按钮、图标、面板背景，但如果没有透明背景、没有切图规范、分辨率不对、风格不能成套复用，它就只能躺在素材库里吃灰，进不了 Unity 或 Unreal 的工程。
本文不围绕某个单一项目做“一键安装测评”，而是给出一套完整的实操路线：从工具选型、环境准备、提示词设计、风格一致性控制，到批量生成、透明底处理、九宫格切图、接口化调用，最终让 AI 图片变成真正能放进游戏项目里的 UI 资源。
文章信息密度会比较高，建议先收藏，后面实际动手时直接对照操作。全程以通用流程为主，不绑定某一款具体软件，本地部署和在线工具都会覆盖，具体命令和参数均注明“按实际环境调整”。

1. 核心能力速览

先把“AI 生成可用游戏 UI”这件事拆成能力项，方便判断你的项目目前缺什么：

从材料看，当前主流方案集中在Stable Diffusion WebUI、ComfyUI、Midjourney、即梦、文心一格等工具上。前两个适合本地批量生产，后几个适合做风格探索和单张预览。没有哪款工具能直接生成“放进引擎就能用”的整套 UI，因此本文的重点是“生成后续链路”，而不是某款工具的炫技。

2. 适用场景与使用边界

先说明适合什么人用这套流程：

• 独立游戏开发者：需求多变、预算有限，需要快速产出可用的原型 UI。
• Game Jam / 黑客松：48 小时内需要大量占位素材，AI 生成能显著节省人力。
• 美术预研阶段：在正式绘制前快速验证“如果 UI 走这个风格，整体效果如何”。
• 小型团队：没有专职 UI 美术时，用 AI 补齐按钮、图标、技能框、面板背景等产出。
• Unity 插件 / 素材商店开发者：批量制作统一风格的 UI 资源包。

在使用边界上，有三类情况建议谨慎：

1. 需要完整图层源文件的项目。AI 生成的是合并后的平面图，没有 PS 图层结构，调整字体、替换图标、改局部配色都很麻烦。如果团队后期要频繁改版，还是需要设计师在 AI 底图基础上重建图层。
2. 像素级还原要求很高的生产交付。比如运营活动 UI 有严格的对齐规范、固定字体字号、精确描边投影，AI 生成图只能作为底稿或灵感参考，不能直接交付给客户。
3. 文字密集型界面。AI 生成中文或英文标题时经常出现错字、偏旁异常、笔画粘连。按钮上需要文字时，建议生成“无文字版本”，到引擎里用 Text 组件或后期排版再叠加文字。

另外，版权边界必须明确：AI 生成图片的训练数据来源、生成结果是否可商用，在不同平台有不同规则；UI 中如果包含第三方字体、品牌 Logo、知名角色形象，需要先确认授权状态。素材商店上架前，更要逐张检查素材是否涉及抄袭或侵权风险。

3. 生成前的 UI 规范：先定尺寸再做图

很多人的操作顺序是反的：先打开 AI 工具随机出图，再考虑这个图能不能用。正确顺序应该是先列 UI 资源清单，再定画布尺寸，最后才开始生成。

UI 资源不是“一张好看的图”，而是“一群互相配套、尺寸规范、状态完整的资源”。以一个简单的格斗游戏 Demo 为例，开局前至少需要：

尺寸建议只做参考，不同游戏类型、不同引擎适配要求差异很大，实际以项目分辨率规范为准。但有一点是通用的：生成分辨率最好高于最终使用分辨率，因为后处理阶段可能涉及裁剪、缩放、加描边，高分辨率底图更耐折腾。

同时建一份资源清单，把目标变成可执行任务：

{ "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 8288

Stable 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. 先生成 1 个风格满意的“锚点图标”；
2. 把锚点图标作为参考图；
3. 固定提示词中的“元素”部分，替换图标主体；
4. 批量生成 8 至 16 个同风格图标；
5. 人工筛选构图好、透视没崩的图进入后处理环节。

一个实际经验是：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_ok=True) 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(f"btn_normal_{name}.png")

实际项目中，Unity 的 Sprite Editor、Unreal 的 UMG Nine Slice、Cocos Creator 的九宫格设置，都支持直接在引擎里配置裁剪值，不一定要物理切图。但理解九宫格的原理，能帮你判断“AI 生成的边框设计适不适合拉伸”。如果 AI 生成的边框带复杂花纹或不对称装饰，拉伸效果会非常难看，这时要么重新生成纯边框素材，要么放弃拉伸、做整图适配。

7.3 命名规范与压缩

从 AI 工具导出后，文件名称通常是一串随机字符，必须重命名。推荐格式：类型_名称_状态，例如：

• btn_main_start_normal.png
• btn_main_start_pressed.png
• icon_skill_fire_normal.png
• panel_bag_normal.png

批量重命名的脚本很简单，推荐在生成后立刻做一个自动重命名步骤，否则素材数量一多，后期找图会很痛苦。压缩方面，UI 素材一般建议存储为压缩后的 PNG，颜色简单的图标可以尝试 WebP 减少包体，但透明底和边缘效果需要逐张确认。

from PIL import Image import os input_dir = "./ui" output_dir = "./ui_compressed" os.makedirs(output_dir, exist_ok=True) 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", optimize=True) 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, indent=2, ensure_ascii=False))

注意：工作流 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 降低显存占用的常用做法

1. 降低输出分辨率，先跑小图确认构图，再放大跑高清。
2. 减少 batch size。
3. 启用低显存优化参数（具体参数因工具版本而异）。
4. 定期清理 ComfyUI / WebUI 缓存目录。
5. 避免同时运行多个绘图工作流进程。

9.5 端口冲突与进程残留

本地服务启动后未正常关闭，再次启动时可能出现端口占用。可以查看并结束残留进程：

# 查看某个端口被谁占用 lsof -i :8188 # 结束对应进程，kill 命令需谨慎，不要误杀其他进程 kill <PID>

如果服务在远程服务器上，还要注意监听地址是否绑定到了可访问的 IP，否则从浏览器访问不到。

10. 常见问题与排查方法

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 组件做模板化提示词库、将批量任务接入到定时构建流程。先跑通最小链路，再逐步扩大范围，是这套方法最稳的推进方式。