Training a Game UI style in Layer allows you to generate buttons, frames, menus, banners, and other interface elements with a unified look and feel. Whether you’re designing for mobile games, casual titles, or complex HUD systems, this guide will help you train a style that’s flexible, readable, and visually consistent.
Start with Your Assets
Prepare a dataset of UI elements that share a consistent format. That could mean a matching button style, similar frame shapes, or the same lighting and stroke treatment across all UI components.
We recommend using around 25 high-quality images. If your goal is to generate UI boxes without text, make sure your training assets follow that same pattern. Avoid mixing UI assets with different shapes, text layouts, or rendering approaches unless you want variety in your outputs.
Why Captions Matter (and What to Check)
When uploading UI assets, Layer will auto-caption each image to describe the visual elements. Because UI components often involve subtler stylistic details, it’s worth doing a close review of these captions.
What to focus on:
Clarity of function: Are the captions correctly identifying buttons, banners, or frames? You may want to manually clarify the intended use of each element.
Style traits: Do the captions mention stroke thickness, gradients, rim lights, drop shadows, or glass effects? If not, consider adding those manually to make the style more recognizable.
Content control: If you don’t want text baked into your generated outputs, don’t train with examples that contain heavy labels or embedded writing. Keep it minimal and clean.
If your assets follow a predictable structure — such as “A flat, front-facing view of a rectangular game button with rounded edges and soft lighting” — you can build that into your Prompt Prefix or Suffix to guide the model during generation.
How to Start Training
Once your captions are cleaned up, follow the standard training workflow outlined in the How to Create a Custom Style guide:
 | Go to the Art Styles page and click Build a New Style |
 | Upload your assets or select files in your Layer Drive to create a style |
 | Choose a Style Base (SDXL, BRIA, or FLUX) |
 | Select UI as your Style Type |
 | Add at least 3 example prompts that reflect the types of UI you want to generate |
 | Kick off training — you’ll be notified once the style is ready |
Best Practices for UI Style Training
 | Use clean, minimal examples |
 | Be consistent with layout and orientation |
 | Call out rendering and detail styles |
 | Don’t mix drastically different themes |
While It’s Training: Set Up Prompt Prefix + Suffix
Prompt Prefix and Suffix help guide your generations once the style is trained. Use these to lock in structure and style elements for better results.
Example:
Prompt Prefix: “A flat, front-facing view of a rectangular UI frame”
Prompt Suffix: “Stylized game UI with glowing borders, soft gradients, and thick outlines”
These additions help the model stay consistent across prompts, especially if you’re generating new layouts or variations later.