Operation Manual
Site tools and workflow guide
Overview
GameUI AI provides an end-to-end workflow from game screenshots to UI asset packs: choose or create a style reference → create a project and build layout prototypes → segment and redraw UI elements → export asset packs.
Prepare style references
Collect 1 to 6 screenshots with a consistent visual style before you start.
Create a project
Pick a public style or your own style pack, then open a new project in the editor.
Build the layout
Use screenshot upload, manual nodes, or reference-based generation to define the page structure.
Extract and export assets
Segment, clean up, and export the page or separated UI resources when the result is ready.
Before you begin
A little preparation makes the workflow much smoother. If you organize your references and target page type first, you will spend less time redoing steps later.
- Use screenshots from the same game or the same visual system whenever possible.
- Decide what page you are making first, such as main menu, inventory, character panel, popup, or battle HUD.
- If you plan to add tutorial screenshots later, save both a full-screen view and a close-up action view at each stage.
- Choose portrait or landscape before creating the project to avoid rebuilding pages later.
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.
Steps
- 1Go to the homepage and open "Create Style Pack".
- 2Enter a clear style name, such as "Dark RPG HUD" or "Anime Inventory UI".
- 3Upload up to 6 reference screenshots with similar size, subject, and lighting.
- 4Confirm portrait or landscape, then create the pack and wait for processing.
- 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.
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.
Steps
- 1Click "New Project" from the homepage.
- 2Enter a descriptive project name based on the target page or feature.
- 3Choose the screen orientation and browse either public or custom styles.
- 4Preview the style details and click "Select" on the style you want.
- 5Click "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.
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.
Steps
- 1Create or rename the current page inside the editor.
- 2Start from a screenshot upload, manual node editing, or reference-based generation.
- 3Add containers, buttons, icons, text, and progress bars as needed.
- 4Fill in important labels and page text before generating visuals.
- 5Review the hierarchy and save the layout once the structure is correct.
What you will get
- A clean page prototype.
- A stronger base for later AI generation.
- Better separation between layout issues and art issues.
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.
Steps
- 1Check that the layout, style, and descriptive prompts are correct.
- 2Run generation to create the page result.
- 3If the structure is right but the details are weak, adjust prompts or specific nodes and generate again.
- 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 and cleanup.
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.
Steps
- 1Open the result in the asset editing workflow.
- 2Use segmentation to select the element you want to isolate.
- 3Clean the result with erase, inpaint, crop, or background removal if needed.
- 4Send the cleaned asset back to the page or save it as a standalone resource.
- 5Repeat 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.
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.
Steps
- 1Open the download or export action from the page or asset editor.
- 2Choose whether to export the current page or all pages.
- 3Select the format that best matches your next step, such as separated layers or preview images.
- 4Download the files and verify names, transparency, and dimensions.
- 5Import the exported assets into your design tools, engine, or handoff docs.
What you will get
- Exported page files or asset packs.
- Preview images for communication or documentation.
- Final production-ready resources.
Helpful notes
Should I create the style pack first?
If you are just testing, a public style is enough. If you already know your target look, creating a style pack first is usually better.
What should I adjust first when the result looks off?
Start with layout structure, reference consistency, and node descriptions before focusing on visual polish.
How should I prepare tutorial screenshots?
Keep one full workflow screenshot and one close-up action screenshot for each major stage.
What is the most important export check?
Verify the selected version, dimensions, transparency, and whether any temporary layers are still included.