GameUI AIGameUI AI
Back to Home

Operation Manual

Site tools and workflow guide

Overview

GameUI AI provides an end-to-end workflow from game screenshots to UI asset packs: create a project → build layout prototypes → generate UI from layout prototype → segment UI elements → export asset packs.

01

Create a project

Pick a public style or your own style pack, then open a new project in the editor.

02

Build the layout

Upload layout reference images or build nodes manually to get an editable layout prototype.

03

Generate UI from layout prototype

Use AI to generate a complete UI interface that matches the style based on the layout prototype.

04

Extract and export assets

Manually segment or one-click segment, clean up, and export the page or separated UI resources when the result is ready.

Step 1

Create or choose a style pack

The style pack defines the visual direction of the project. Public styles are fine for a quick test, but custom styles are better for production work.

Lock the art direction

Steps

  1. 1Go to the homepage and open "Create Style Pack".
  2. 2Enter a clear style name, such as "Dark RPG HUD" or "Anime Inventory UI".
  3. 3Upload up to 6 reference screenshots with similar size, subject, and lighting.
  4. 4Confirm portrait or landscape, then create the pack and wait for processing.
  5. 5After creation, the pack will appear under "My Styles" and can be reused in new projects.

What you will get

  • A reusable custom style pack.
  • Less repeated setup when creating future projects.
  • More consistent visual output across pages and assets.
Step 2

Create a new project

A project contains your pages, layers, and generated results. Getting the name, orientation, and style right early will save time later.

Open the workspace

Steps

  1. 1Click "New Project" from the homepage.
  2. 2Enter a project name, preferably the game name, as the overall asset pack.
  3. 3Preview the style details and click "Select" on the style you want.
  4. 4Click "Create" to open the project in the editor.

What you will get

  • A project workspace linked to a chosen visual style.
  • A place to store all future pages and iterations.
  • A cleaner workflow for multi-page UI production.
Step 3

Build the page layout

This stage is about structure, not final polish. Focus on placing panels, buttons, labels, and major regions so the page logic is clear.

Define the structure

Steps

  1. 1Create or rename the current page inside the editor.
  2. 2Click the layout edit button on the generate node or click the layout prototype directly to open the layout editor.
  3. 3If building manually, add containers, buttons, icons, text, and progress bars. Review the hierarchy and save once the structure is correct.

What you will get

  • A clean page prototype.
  • A stronger base for later AI generation.
Step 4

Generate the page and iterate

Once the layout is ready, generate a result and refine it in passes. It is usually better to fix overall direction first and fine details second.

Get a usable page

Steps

  1. 1Check that the layout, style, and descriptive prompts are correct.
  2. 2Run generation to create the page result.
  3. 3Use refine to create edit nodes on finished images for clean backgrounds, clean frames, and text-free buttons and icons.
  4. 4Keep multiple versions when comparing different visual directions.
  5. 5Move to asset extraction when the page is good enough to segment.

What you will get

  • One or more usable page outputs.
  • A version history for comparison.
  • A stronger base for segmentation.
Step 5

Segment and refine assets

Use this stage to pull buttons, icons, frames, portraits, or decorative elements out of the generated page and clean them up for reuse.

Create reusable assets

Steps

  1. 1Open the result in the asset editing workflow.
  2. 2Manual segment or one-click segment: box-select areas to extract manually, or use one-click to auto-detect and extract all buttons, icons, panels and other elements.
  3. 3Clean the result with erase, crop, or background removal if needed.
  4. 4Repeat until the page has been broken into a usable asset set.

What you will get

  • Reusable buttons, icons, frames, and decorative parts.
  • Cleaner standalone asset images.
  • Elements that can be recombined into other pages.
Step 6

Export pages and asset packs

When your page and extracted assets are ready, export only what you need: a full page, all pages, separated resources, or annotated previews for team communication.

Deliver final files

Steps

  1. 1Click the "Download this page" button in the asset editor to get the full asset pack, or select a single image to download.
  2. 2The full asset pack includes two resolutions: 1k is 750×1334, 2k is 1500×2668.
  3. 3Each resolution includes the currently selected full image and a sub-image folder.
← Back to Home