操作マニュアル
サイトツールの使い方
概要
GameUI AI はゲームスクショから UI アセットパックまで一貫したワークフローを提供:プロジェクト作成 → レイアウト原型の作成 → レイアウトからUI生成 → UI 要素の分割 → アセットパックのエクスポート。
01
创建项目并绑定画风
先选系统画风或自定义画风,再创建项目进入编辑器,确定后续页面的一致视觉基线。
02
搭建布局原型
通过上传参考图或手动搭建节点,先把页面结构做清楚,再进入生成与微调。
03
生图(10 积分)与微调(5 积分)
基于布局进行生图,针对局部问题创建微调节点持续打磨,快速得到可用页面版本。
04
换皮与风格迁移(10 积分)
可对图集节点执行换皮,也可从现有图集复制风格,复用成熟视觉资产到新页面。
05
切图与导出(10 积分)
手动或一键切图后清理素材,最后按页面或项目维度导出完整资源包。
Step 1
新建项目并选择画风
项目是你后续所有页面、节点和图层的容器。新建项目时把名称、方向和画风选正确,后面的流程会轻松很多。
操作步骤
- 1点击首页中的“新建项目”。
- 2输入项目名称,建议使用游戏名称,作为游戏整体素材包。
- 3预览画风详情后点击"选择",确认当前项目绑定的参考画风。
- 4点击“创建”进入编辑器,系统会为你打开该项目的工作区。
完成后你会得到
- 一个绑定了指定画风的项目工作区。
- 后续生成的页面会围绕当前项目组织与保存。
- 你可以在同一项目下持续添加多个页面。
Step 1.5
自定义画风说明
当系统画风不满足需求时,可通过图片参考或纯提示词创建画风。创建后的画风可在多个项目中复用。
操作步骤
- 1在首页点击「创建画风」进入新建画风流程。
- 2图片模式:上传 1-12 张同画风、同方向的参考图,等待分析完成。
- 3纯提示词模式:填写游戏设定与主风格描述,直接生成可用画风。
- 4在「我的画风」检查效果,创建项目时选择该画风进行复用。
完成后你会得到
- 可复用的专属画风模板(图片/纯提示词)。
- 更稳定的生成一致性,减少跨页风格漂移。
Step 2
搭建页面布局原型
进入项目后,你可以先把页面结构做出来。这个阶段的重点不是最终美术,而是把按钮、面板、标题、进度条等元素的位置关系先确定。
操作步骤
- 1在编辑器中创建页面,给当前页面一个清晰的名称。
- 2点击生图节点处的布局编辑按钮或者直接点击布局原型图,打开布局编辑器。
- 3如果是手动搭建,可依次添加容器、按钮、图标、文字、进度条等节点,并设置名称、位置和尺寸。确认页面层级与主要区域布局后,保存并继续进入图片生成或细节调整阶段。
完成后你会得到
- 一个结构清晰的页面原型。
- 可供 AI 生成使用的布局基础。
Step 3
生成页面并持续迭代
布局完成后进入生图与微调。建议先确认整体方向,再通过微调节点逐步处理局部细节,效率更高。
操作步骤
- 1检查当前页面是否已经选择正确的布局参考、风格和必要描述词。
- 2点击生成,让系统基于当前布局与风格输出页面结果图(生图节点 10 积分)。
- 3对结果图执行 refine 创建 edit 节点,进行局部微调(微调节点 5 积分)。
- 4对于需要多版本比较的页面,可以保留多个结果版本,从中挑选最接近目标的一张。
- 5当页面主体已经达到可分割状态后,再进入素材提取与编辑步骤。
完成后你会得到
- 一张或多张可继续加工的页面结果图。
- 可用于对比的多个生成版本。
- 更适合后续分割的界面底稿。
Step 4
图集换皮与风格复制
当你已有一版成熟页面或图集时,可以直接执行换皮流程,或把图集风格复制到其他节点,实现快速批量迭代。
操作步骤
- 1在图集/换皮相关节点中选择参考图集与目标页面,确认风格来源。
- 2执行换皮任务,系统会生成新的风格化图集结果(换皮 10 积分)。
- 3如需跨页面延续同风格,可使用图集复制风格能力继续复用。
- 4检查关键按钮、底框和图标的一致性后,再进入切图整理。
完成后你会得到
- 基于现有资产快速产出的换皮版本。
- 可跨节点复用的风格结果,减少重复调参。
Step 5
分割元素与精修素材
这一阶段的目标是把页面中的按钮、图标、底框、角色插画等资源拆出来,并做必要的擦除、去背景或局部编辑,整理成可直接使用的素材。
操作步骤
- 1打开结果图对应的资源编辑能力,选择需要处理的页面或版本。
- 2手动分割或一键分割:手动分割时框选要提取的区域;一键分割可自动识别并提取效果图中的按钮、图标、底框等元素(切图 10 积分)。
- 3如果提取结果边缘不理想,可使用擦除、去背景或裁剪进一步清理。
- 4重复以上步骤,逐步把一个界面拆成可管理、可导出的素材集合。
完成后你会得到
- 可独立复用的按钮、图标、装饰件、底框等素材。
- 经过简单清理后的干净资源图。
- 可以回收到页面中继续组合使用的分离元素。
Step 6
导出页面与素材包
当页面和独立元素都整理完成后,就可以按照项目需要进行导出。你可以选择下载当前页,也可以一次导出全部页面与图层资源。
操作步骤
- 1点击资源编辑区「下载本页」按钮获得完整资源包,或者选中单张图片进行下载。
- 2完整资源包包括两种分辨率:1k 为 750×1334,2k 为 1500×2668。
- 3每种分辨率包含一张当前选中的整图,以及一个子图文件夹。