Game art, generated

Godot UI Theme Generator

Design your whole screen once, then export it as Godot resources: elements as PNGs, StyleBoxTextures with your 9-slice margins already set, and a Theme ready to assign.

Build a UI kitHow it works
Panels export as StyleBoxTexture
A wide ornate panel UI element generated for a Godot game
A round ornate panel frame for a Godot UI theme
Round panel
A framed panel UI element with a border
Framed panel
A square ornate panel for dialogue and menus
Square panel
State families map to Godot control states
A radio button in normal, on, and off states for a Godot CheckButton
Tabs
Three tab UI elements in cream, green, and red for a Godot TabBar
Icons come out as separate transparent PNGs
Game UI icons: cauldron, mortar, vial, jar, coin, heart, star, and scroll
Bars come as a separate track and fill
Progress bar track and fill UI elements for a Godot ProgressBar

What Godot theming actually needs

Godot's theming system works well once you have art for it. A Theme wants a StyleBox for each control state. A StyleBoxTexture wants a texture plus four margin values, and if those are wrong the corners of your button stretch as soon as a label runs long. Until that art exists, most projects sit on flat ColorRect placeholders.

The UI Kit Builder works the other way around. You design the whole screen as one concept, approve it, and the pieces get rebuilt from that design as separate transparent elements. You set the 9-slice borders once while reviewing them, and the export writes the Godot resources for you. That means the PNGs, a StyleBoxTexture for each scalable piece with your margins already set, and a Theme that maps the state families it can resolve without guessing.

How it works

1

Start with the whole screen

Describe your game and the screen you need, then pick from the full-screen concepts you get back. Every element is designed next to the ones it sits beside, so panels, buttons, and icons drawn in the same picture already agree on palette, outline weight, and lighting.

Generated UI concepts for a cozy potion shop game
2

Rebuild it as separate pieces

The approved concept is rebuilt as a component sheet on a transparent background: frames, buttons, tabs, bars, and icons, each isolated so it can be cut out. Ask for complete interaction states and you get hover, pressed, disabled, on/off, and selected variants as full families.

A component sheet with the pieces rebuilt from the concept
3

Export the Godot package

Pick Godot on the export step and you get a zip with a SpriteCook folder to copy into your project. Elements, StyleBoxTexture resources carrying the margins you set, the Theme, the manifest, and the concept image as a layout reference all come along.

What's in the Godot export

  • SpriteCook/UI Kit/elements/: every element as a transparent PNG
  • SpriteCook/UI Kit/styles/: a .tres StyleBoxTexture per scalable piece, with your reviewed texture margins
  • SpriteCook/UI Kit/ui-kit-theme.tres: a Theme that maps unambiguous state families to their controls
  • SpriteCook/UI Kit/ui-kit.spritecook.json: every piece with its type, state group, and border values
  • SpriteCook/UI Kit/concept.png: the screen the kit was designed from

Keep going

UI Kit Builder guide

Every step and setting in the builder, in order.

The concept-first workflow

Why designing the screen first is what keeps a kit consistent.

Godot sprites guide

Import settings for the rest of your game art.

Godot tilesets

Terrain-ready autotile sets with a .tres TileSet.

Frequently asked questions

Which Godot version does the export target?+
Godot 4. The StyleBoxTexture and Theme resources are written in the format 3 resource syntax that Godot 4 uses. Copy the SpriteCook folder into your project and the resources appear ready to assign.
Do I have to set the 9-slice margins in the inspector?+
No. The margins you set in the builder are written into each StyleBoxTexture as texture_margin_left, _top, _right, and _bottom, so the resource arrives ready to use.
Why are only some styles in the Theme file?+
The Theme only maps families it can resolve without guessing. If your kit has one button family, its normal, hover, and pressed styles get assigned to Button automatically. If it has three different button families, we do not guess which one is the default Button, so those ship as StyleBoxTexture resources you assign yourself. Every piece is always in the export either way.
Can I use the pieces without the Theme?+
Yes. The StyleBox resources work on their own: drop one on any Control that takes a StyleBox, or load the PNGs directly into TextureRect and NinePatchRect nodes.
Will it match the art style of my game?+
Describe the style in your own words, or add up to three reference images, like screenshots of your game. There is also a button that reads your references and writes the style description for you.
Can I use the UI in a commercial game?+
Yes. Everything you generate is yours to use commercially, including in games you sell.