GameUI AIGameUI AI

操作マニュアル

サイトツールの使い方

概要

GameUI AI はゲームスクショから UI アセットパックまで一貫したワークフローを提供:プロジェクト作成 → レイアウト原型の作成 → レイアウトからUI生成 → UI 要素の分割 → アセットパックのエクスポート。

01

创建项目并绑定画风

先选系统画风或自定义画风,再创建项目进入编辑器,确定后续页面的一致视觉基线。

02

搭建布局原型

通过上传参考图或手动搭建节点,先把页面结构做清楚,再进入生成与微调。

03

生图(10 积分)与微调(5 积分)

基于布局进行生图,针对局部问题创建微调节点持续打磨,快速得到可用页面版本。

04

换皮与风格迁移(10 积分)

可对图集节点执行换皮,也可从现有图集复制风格,复用成熟视觉资产到新页面。

05

切图与导出(10 积分)

手动或一键切图后清理素材,最后按页面或项目维度导出完整资源包。

Step 1

新建项目并选择画风

项目是你后续所有页面、节点和图层的容器。新建项目时把名称、方向和画风选正确,后面的流程会轻松很多。

进入编辑器

操作步骤

  1. 1点击首页中的“新建项目”。
  2. 2输入项目名称,建议使用游戏名称,作为游戏整体素材包。
  3. 3预览画风详情后点击"选择",确认当前项目绑定的参考画风。
  4. 4点击“创建”进入编辑器,系统会为你打开该项目的工作区。

完成后你会得到

  • 一个绑定了指定画风的项目工作区。
  • 后续生成的页面会围绕当前项目组织与保存。
  • 你可以在同一项目下持续添加多个页面。
Step 1.5

自定义画风说明

当系统画风不满足需求时,可通过图片参考或纯提示词创建画风。创建后的画风可在多个项目中复用。

建立可复用画风

操作步骤

  1. 1在首页点击「创建画风」进入新建画风流程。
  2. 2图片模式:上传 1-12 张同画风、同方向的参考图,等待分析完成。
  3. 3纯提示词模式:填写游戏设定与主风格描述,直接生成可用画风。
  4. 4在「我的画风」检查效果,创建项目时选择该画风进行复用。

完成后你会得到

  • 可复用的专属画风模板(图片/纯提示词)。
  • 更稳定的生成一致性,减少跨页风格漂移。
Step 2

搭建页面布局原型

进入项目后,你可以先把页面结构做出来。这个阶段的重点不是最终美术,而是把按钮、面板、标题、进度条等元素的位置关系先确定。

先确定结构

操作步骤

  1. 1在编辑器中创建页面,给当前页面一个清晰的名称。
  2. 2点击生图节点处的布局编辑按钮或者直接点击布局原型图,打开布局编辑器。
  3. 3如果是手动搭建,可依次添加容器、按钮、图标、文字、进度条等节点,并设置名称、位置和尺寸。确认页面层级与主要区域布局后,保存并继续进入图片生成或细节调整阶段。

完成后你会得到

  • 一个结构清晰的页面原型。
  • 可供 AI 生成使用的布局基础。
Step 3

生成页面并持续迭代

布局完成后进入生图与微调。建议先确认整体方向,再通过微调节点逐步处理局部细节,效率更高。

得到可用页面

操作步骤

  1. 1检查当前页面是否已经选择正确的布局参考、风格和必要描述词。
  2. 2点击生成,让系统基于当前布局与风格输出页面结果图(生图节点 10 积分)。
  3. 3对结果图执行 refine 创建 edit 节点,进行局部微调(微调节点 5 积分)。
  4. 4对于需要多版本比较的页面,可以保留多个结果版本,从中挑选最接近目标的一张。
  5. 5当页面主体已经达到可分割状态后,再进入素材提取与编辑步骤。

完成后你会得到

  • 一张或多张可继续加工的页面结果图。
  • 可用于对比的多个生成版本。
  • 更适合后续分割的界面底稿。
Step 4

图集换皮与风格复制

当你已有一版成熟页面或图集时,可以直接执行换皮流程,或把图集风格复制到其他节点,实现快速批量迭代。

低成本复用风格资产

操作步骤

  1. 1在图集/换皮相关节点中选择参考图集与目标页面,确认风格来源。
  2. 2执行换皮任务,系统会生成新的风格化图集结果(换皮 10 积分)。
  3. 3如需跨页面延续同风格,可使用图集复制风格能力继续复用。
  4. 4检查关键按钮、底框和图标的一致性后,再进入切图整理。

完成后你会得到

  • 基于现有资产快速产出的换皮版本。
  • 可跨节点复用的风格结果,减少重复调参。
Step 5

分割元素与精修素材

这一阶段的目标是把页面中的按钮、图标、底框、角色插画等资源拆出来,并做必要的擦除、去背景或局部编辑,整理成可直接使用的素材。

得到独立资源

操作步骤

  1. 1打开结果图对应的资源编辑能力,选择需要处理的页面或版本。
  2. 2手动分割或一键分割:手动分割时框选要提取的区域;一键分割可自动识别并提取效果图中的按钮、图标、底框等元素(切图 10 积分)。
  3. 3如果提取结果边缘不理想,可使用擦除、去背景或裁剪进一步清理。
  4. 4重复以上步骤,逐步把一个界面拆成可管理、可导出的素材集合。

完成后你会得到

  • 可独立复用的按钮、图标、装饰件、底框等素材。
  • 经过简单清理后的干净资源图。
  • 可以回收到页面中继续组合使用的分离元素。
Step 6

导出页面与素材包

当页面和独立元素都整理完成后,就可以按照项目需要进行导出。你可以选择下载当前页,也可以一次导出全部页面与图层资源。

交付最终文件

操作步骤

  1. 1点击资源编辑区「下载本页」按钮获得完整资源包,或者选中单张图片进行下载。
  2. 2完整资源包包括两种分辨率:1k 为 750×1334,2k 为 1500×2668。
  3. 3每种分辨率包含一张当前选中的整图,以及一个子图文件夹。