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.

Create a project with style

Pick a system or custom style first, then create a project so all pages share a consistent visual baseline.

Build a layout prototype

Upload layout references or place nodes manually to lock structure before generation.

Generate (10 credits) and refine (5 credits)

Generate from layout, then use refine/edit nodes for local improvements without restarting the whole page.

Atlas reskin and style transfer (10 credits)

Reskin atlas nodes or copy style from existing atlas outputs to speed up variant production.

Segment and export (10 credits)

Use manual/one-click segmentation, clean assets, then export page packs or project-ready resources.

Step 1

Create a new project

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

Open the workspace

Steps

1Click "New Project" from the homepage.
2Enter a project name, preferably the game name, as the overall asset pack.
3Preview the style details and click "Select" on the style you want.
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 1.5

Custom Style Guide

If system styles are not enough, create your own style from reference images or pure prompts, then reuse it across projects.

Build a reusable style

Steps

1Click "Create Style" on the homepage.
2Image mode: upload 1-12 references with matching art direction and orientation.
3Prompt mode: provide game concept and style intent to generate a style directly.
4Review in "My Styles" and bind it when creating projects.

What you will get

A reusable style template from image mode or prompt mode.
More stable cross-page visual consistency.

Step 2

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

1Create or rename the current page inside the editor.
2Click the layout edit button on the generate node or click the layout prototype directly to open the layout editor.
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 3

Generate the page and iterate

After layout is ready, generate first, then iterate with edit nodes. Fix global direction before local polish.

Get a usable page

Steps

1Check that the layout, style, and descriptive prompts are correct.
2Run generation to create the page result (image generation node: 10 credits).
3Use refine to create edit nodes for local cleanup and replacement (edit node: 5 credits).
4Keep multiple versions when comparing different visual directions.
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 4

Atlas reskin and style copy

When you already have stable atlas assets, reskin them or copy style to new nodes for faster production.

Reuse existing style assets

Steps

1Choose source atlas/style and target page or node.
2Run atlas reskin to generate a new variant (reskin: 10 credits).
3Use atlas style copy when you need the same style across multiple nodes/pages.
4Validate key UI controls and then continue to segmentation.

What you will get

Fast style variants built from existing assets.
Reusable style continuity across nodes and pages.

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

1Open the result in the asset editing workflow.
2Manual segment or one-click segment: box-select areas manually, or auto-detect elements with one-click segmentation (slicing: 10 credits).
3Clean the result with erase, crop, or background removal if needed.
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

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

Credits

Users start with 100 credits, and can get more via top-ups, redemption codes, referral rewards, and other methods. Credit consumption rules: 1. Image generation costs 10 credits per run. 2. Refinement costs 5 credits per run. 3. Style replacement costs 10 credits per run. 4. Style-pack creation costs 5 credits per run. 5. One-click segmentation costs 10 credits per run. 6. In rare cases, failures may trigger automatic refunds, such as server restarts or service congestion. Layout analysis and regular/manual segmentation are free. Any user who has made at least one successful payment on GameUI becomes a permanent VIP and enjoys the following benefits: 1. Run multiple image-generation tasks at the same time 2. Priority queue 3. VIP-exclusive features 4. Commercial use rights for generated works

Custom Style Guide

Custom styles help keep project visuals consistent. Upload 1-12 game screenshots with the same art style, same size, and same orientation (all landscape or all portrait). The system extracts style features only and does not directly publish your references or use them as training data. After creation, the style appears in "My Styles" and can be selected when creating a new project.

Project Permissions

Project permissions are Private, Preview-only, and Public. Private projects are inaccessible to non-owners; Preview-only projects support preview mode only; Public projects can be accessed and copied by anyone via link.

Referral Rewards

Share your referral link with friends. When they register and log in through the link, they receive 100 permanent credits. Limit: 20 people (max 2000 credits).

Copyright Notice

AI-generated content copyright remains unclear at present, but works created by members are permitted for commercial use. We will not make public any images you provide or any generated images without your consent. Generated images do not infringe on reference images: the layout editor only extracts layout data from references, and custom styles do not use images directly as references or training data.

← Back to Home