---
title: Build a game UI kit ready for nine-slicing
display: 'Build a *game UI* kit ready for nine-slicing'
nav_title: Game UI kit
summary:
  - "A starter UI kit for Pipsqueen, a mobile strategy game, empty and transparent, whose parts stretch to any size and any language."
  - "Generate every part with no text and identical corners, then slice it in code so corners never stretch."
  - "Three image runs make the whole kit; most of the work is measuring borders and assembling a real screen."
description: Generate buttons, panels, frames and bars with no text and true transparency, then slice them so they stretch to any size and any language.
section: playbooks
order: 17
type: playbook
topic: Games
level: Build
roles: [artist]
time: { read: 10, do: 30, wait: 5 }
needs: ["Any plan with credits", "One or two approved style anchors from your game (an icon, a building)", "A short image script, or an engine or UI tool that supports nine-slice sprites"]
last_verified: 2026-10-16
models_checked: ["GPT Image 2.5 Sunburst"]
hero: playbooks/game-ui-kit/hero-pipsqueen-upgrade-screen-mock.webp
related: [game-icon-set, isometric-tiles-and-buildings, text-and-typography-in-images]
run_in: [model_openai-gpt-image-2-5-sunburst]
thumb: playbooks/game-ui-kit/thumb.webp
steps:
  - title: "Attach the style anchors"
    text: "Create › Images › GPT Image 2.5 Sunburst, Reference Images: your two anchors (here the town hall and Queen Pip). Settings: Quality high, Background transparent."
  - title: "The primary button, empty"
    text: "The run used a custom 1536x512 through the Scenario MCP. The panel's widest Dimensions preset is 21:9 (3360x1440), so use it and crop the button afterward."
    prompt: |-
      References 1 and 2 are the style anchors of this game (a building and the hero): match their chunky stylized 3D look, soft global illumination, tactile materials, royal blue, cream and gold palette and top-left light. Do not copy their objects.

      Game UI element: one wide primary button, empty, with NO text and no icon. A chunky rounded rectangle, glossy royal-blue enamel face with a soft top highlight, a thick gold rim with four small gold rivets, a darker blue bottom edge for depth, like a tactile toy button. Flat front view, perfectly horizontal and symmetric, centered, filling about 90 percent of the width. The middle of the button is plain so it can be stretched horizontally. Transparent background, no shadow outside the button.
  - title: "The dialog panel, made for slicing"
    text: "Same anchors, Dimensions 1:1 (1024x1024). The prompt asks in plain words for a constant border width, four identical corners and a plain, evenly lit center, with no text, icons or title bar."
  - title: "The small parts on one sheet"
    text: "Dimensions 3:2 (1536x1024), the same anchor paragraph first, then each part with space between them. The close X and the gear are symbols, so they stay in the art; everything readable stays out."
    prompt: |-
      References 1 and 2 are the style anchors of this game (a building and the hero): match their chunky stylized 3D look, soft global illumination, tactile materials, royal blue, cream and gold palette and top-left light. Do not copy their objects.

      Game UI kit sheet, front view, every element separate with generous empty space between them, laid out on a clean grid: a round red close button with a white X, a round blue settings button with a gold gear, an empty horizontal progress bar frame in gold with a dark empty track, a short green fill segment for that bar shown on its own, an on/off toggle in both states, a square item slot frame in blue wood and gold, a circular character portrait frame in gold with an empty dark center. NO text, no letters, no numbers anywhere. Transparent background, no shadows outside the elements.
  - title: "Cut the sheet into parts"
    text: "Download as PNG. A short script finds each separate shape in the alpha channel and saves it trimmed to its edges; this sheet split cleanly into eight parts."
  - title: "Measure the slice borders"
    text: "Measure where each corner ornament ends: a 170-pixel border for the 936x917 panel, 210-pixel caps on the left and right of the 1485x360 button. Enter them as the sprite's border in your engine, or cut in code."
  - title: "Assemble a real screen"
    text: "Build one screen from the parts with real text, at the size it ships, before you call the kit done."
agent_steps:
  - title: "Connect the Scenario MCP"
    text: "Connect your agent and sign in once at [mcp.scenario.com](https://mcp.scenario.com). Then tell it which Scenario team and project to use, so every file lands there."
  - title: "Give the agent the files"
    text: "One or two approved style anchors from your game (here the town hall and Queen Pip), in that order: the prompts call them references 1 and 2. Upload them with upload_asset or give their asset IDs."
  - title: "Brief the agent: the button and the panel"
    text: "Generate every part empty and for slicing: no text, constant border, identical corners, a plain center. Labels are set in the engine."
    prompt: |-
      Use GPT Image 2.5 Sunburst (model_openai-gpt-image-2-5-sunburst) for every part of the UI kit: referenceImages [anchor 1, anchor 2] as an array, in that order, quality "high", background "transparent". Start the runs with wait: false and collect them with one jobs_wait. Quote the cost with a dry run first and wait for my go.

      Part 1, the primary button: width 1536, height 512. Prompt, word for word:
      References 1 and 2 are the style anchors of this game (a building and the hero): match their chunky stylized 3D look, soft global illumination, tactile materials, royal blue, cream and gold palette and top-left light. Do not copy their objects.

      Game UI element: one wide primary button, empty, with NO text and no icon. A chunky rounded rectangle, glossy royal-blue enamel face with a soft top highlight, a thick gold rim with four small gold rivets, a darker blue bottom edge for depth, like a tactile toy button. Flat front view, perfectly horizontal and symmetric, centered, filling about 90 percent of the width. The middle of the button is plain so it can be stretched horizontally. Transparent background, no shadow outside the button.

      Part 2, the dialog panel: width 1024, height 1024. Prompt: the same anchor paragraph first, then this description, word for word:
      one empty dialog panel, front view, perfectly square and symmetric. A cream parchment center that is plain and evenly lit so it can be stretched, a chunky painted royal-blue wooden border of constant width, gold corner pieces with a small crown stud in all four corners, all four corners identical. NO text, no icons, no title bar.
  - title: "The small parts on one sheet"
    prompt: |-
      Part 3, the small parts: same model, references and settings, width 1536, height 1024. Quote the cost with a dry run first and wait for my go.

      Prompt, word for word:
      References 1 and 2 are the style anchors of this game (a building and the hero): match their chunky stylized 3D look, soft global illumination, tactile materials, royal blue, cream and gold palette and top-left light. Do not copy their objects.

      Game UI kit sheet, front view, every element separate with generous empty space between them, laid out on a clean grid: a round red close button with a white X, a round blue settings button with a gold gear, an empty horizontal progress bar frame in gold with a dark empty track, a short green fill segment for that bar shown on its own, an on/off toggle in both states, a square item slot frame in blue wood and gold, a circular character portrait frame in gold with an empty dark center. NO text, no letters, no numbers anywhere. Transparent background, no shadows outside the elements.
  - title: "Check every part and redo"
    text: "Accept when no part contains letters or numbers, every edge is clean on a dark and a light background, the panel's four corners are identical and the button's middle is plain enough to stretch. Reject baked-in text or icons, corners that differ, a textured center or a halo around the alpha."
    prompt: |-
      Download every part with asset_download in format "png": a JPG export flattens the alpha channel. Check each one on a dark and on a light background and tell me which pass and which fail, and why. Redo only a part that fails; if the sheet keeps adding labels, generate that part alone.
  - title: "Slice, file and report"
    text: "The model draws; code measures and cuts. Then assemble one real screen with real text before you call the kit done."
    prompt: |-
      Cut the sheet into separate parts by the shapes in its alpha channel, each trimmed to its edges. Measure where the corner ornaments end on the panel and the button and propose a slice border for each. Then create a collection for the UI kit with the button, the panel and the sheet, and report the model, every asset ID, the borders and the total cost spent.
updated: 2026-10-16
canonical: https://learn.scenario.com/playbooks/game-ui-kit
---

Last updated: 2026-10-16

# Build a game UI kit ready for nine-slicing

> Generate buttons, panels, frames and bars with no text and true transparency, then slice them so they stretch to any size and any language.

In short:

- A starter UI kit for Pipsqueen, a mobile strategy game, empty and transparent, whose parts stretch to any size and any language.
- Generate every part with no text and identical corners, then slice it in code so corners never stretch.
- Three image runs make the whole kit; most of the work is measuring borders and assembling a real screen.


The parts a game interface needs (buttons, panels, frames, bars) in your game's style, empty and transparent, prepared for nine-slicing so a button fits "OK" or a long German word and the corners never stretch.

:::note As of October 2026
The models, settings and screens in this article are the ones Scenario offered in October 2026. New models and updates arrive often, so check the app for newer options before you choose.
:::

![An "Upgrade complete!" dialog over a blurred isometric village: blue wood and gold panel, Queen Pip in a round gold portrait frame, a progress bar, three building slots and a Collect button](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/91376020d4f3fc5d75b86550571f0c88c361b96f87f1c8b154cab6bc77f58e48.webp "An upgrade screen assembled from the kit. All text is set in code; none of it was generated.")

## The brief

| Field | Brief |
|---|---|
| Goal | A starter UI kit for Pipsqueen, a mobile strategy game by the invented studio Brightkeep Games |
| Parts | Primary button, dialog panel, close and settings buttons, progress bar frame and fill, toggle (on and off), inventory slot, round portrait frame |
| Format | Transparent PNG; button and panel generated large, then sliced |
| Fixed | Royal blue, cream and gold palette, chunky stylized 3D finish, light from the top left |
| Rule | No text, no numbers, no icons baked into any part |
| Accept when | The panel stretches to any size with intact corners; the button fits labels in three languages; every part has a clean alpha edge |

The kit matches the Pipsqueen village. The style anchors are the game's approved town hall and its hero, Queen Pip. The buildings in the slots come from [Isometric tiles and buildings](https://learn.scenario.com/playbooks/isometric-tiles-and-buildings.md).

## Approach

:::flow
Attach anchors | Building and hero as style references |
Button | GPT Image 2.5 Sunburst, transparent, empty | image
Panel | Constant border, identical corners | image
Small parts | One sheet, space between parts | image
Cut and slice | Alpha shapes, measured borders |
Mock screen | Real text at shipping size |
:::

Three rules carry the whole kit.

1. **Generate every part empty** ([Typeset text, never generate it](https://learn.scenario.com/browse)). Text in a UI must change with the language, the value and the player, so it never belongs in the image. Ask for "NO text, no icons" in capitals and set all labels in the engine. See [Text and typography in images](https://learn.scenario.com/images/text-and-typography-in-images.md).
2. **Generate for slicing.** Ask for constant border width, identical corners, and a plain, evenly lit center. That is what makes nine-slicing work: the four corners stay fixed, the edges stretch in one direction, the center stretches in both.
3. **Slice in code or in the engine** ([Do the exact part in code](https://learn.scenario.com/browse)). The model draws; code measures the border and cuts. See [Let code own what must be exact](https://learn.scenario.com/browse).

As of October 2026, all parts came from **GPT Image 2.5 Sunburst** with **Background** set to transparent and two style anchors attached; it is ranked first for transparent game assets. Large single parts (the button, the panel) got their own generation for the most detail; small parts came together on one sheet.

## Steps

:::steps
1. **Attach the style anchors** ([Lock a style anchor](https://learn.scenario.com/browse)). Open **Create**, choose **Images**, pick **GPT Image 2.5 Sunburst**. Under **Reference Images**, add your anchors (here, the town hall and Queen Pip). Under **Settings**, set **Quality** to `high` and **Background** to `transparent`.

2. **Generate the primary button.** This run used a wide custom size, 1536x512, set through the Scenario MCP. The web panel's **Dimensions** menu offers presets only; the widest is 21:9 (3360x1440), so in the panel use it and crop the button afterward. Prompt:

   ```text
   References 1 and 2 are the style anchors of this game (a building and the
   hero): match their chunky stylized 3D look, soft global illumination,
   tactile materials, royal blue, cream and gold palette and top-left light.
   Do not copy their objects.

   Game UI element: one wide primary button, empty, with NO text and no icon.
   A chunky rounded rectangle, glossy royal-blue enamel face with a soft top
   highlight, a thick gold rim with four small gold rivets, a darker blue
   bottom edge for depth, like a tactile toy button. Flat front view,
   perfectly horizontal and symmetric, centered, filling about 90 percent of
   the width. The middle of the button is plain so it can be stretched
   horizontally. Transparent background, no shadow outside the button.
   ```

   Click **Generate**. The price shows on the button before you run.

3. **Generate the dialog panel.** Same anchors, **Dimensions** 1:1 (1024x1024), and a prompt that describes slicing in plain words: "one empty dialog panel, front view, perfectly square and symmetric. A cream parchment center that is plain and evenly lit so it can be stretched, a chunky painted royal-blue wooden border of constant width, gold corner pieces with a small crown stud in all four corners, all four corners identical. NO text, no icons, no title bar."

4. **Generate the small parts on one sheet.** **Dimensions** 3:2 (1536x1024). List each part and ask for space between them:

   ```text
   Game UI kit sheet, front view, every element separate with generous empty
   space between them, laid out on a clean grid: a round red close button
   with a white X, a round blue settings button with a gold gear, an empty
   horizontal progress bar frame in gold with a dark empty track, a short
   green fill segment for that bar shown on its own, an on/off toggle in both
   states, a square item slot frame in blue wood and gold, a circular
   character portrait frame in gold with an empty dark center. NO text, no
   letters, no numbers anywhere. Transparent background, no shadows outside
   the elements.
   ```

   Put the same anchor paragraph first. The close X and the gear are symbols, so they stay in the art; everything readable stays out.

5. **Cut the sheet into parts.** Download as PNG. A short script finds each separate shape in the alpha channel and saves it as its own file, trimmed to its edges. The sheet in this run split cleanly into eight parts: close, settings, bar frame, bar fill, two toggles, slot and portrait frame.

6. **Measure the slice borders.** Trim each large part, then measure where the corner ornament ends. For the 936x917 panel, the gold corner pieces end about 155 pixels in, so a 170-pixel border keeps them whole. For the 1485x360 button, the rivets end about 145 pixels in, and 210-pixel caps on the left and right keep the rivets and the rounded ends. Enter these values as the sprite's border in your engine, or cut in code.

7. **Assemble a real screen.** Build one screen from the parts with real text, at the size it ships, before you call the kit done.
:::

**With the Scenario MCP:** run `model_openai-gpt-image-2-5-sunburst` with `referenceImages: [anchor_1, anchor_2]`, `background: "transparent"`, `quality: "high"` and the width and height of each part. Download with `format: "png"` for the widest compatibility with engines and editors; a JPG export flattens the alpha channel.

![The generated pieces on dark blue: blue wood panel with gold crown corners, blue button with gold rivets, red close and blue settings buttons, gold progress frame and green fill, two toggles, a square slot and a round portrait frame](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/a556c4863048db4d867d9bc431803a2d0b0e5c645e06eb39daea32552cd1008a.webp "Everything the three generations produced, after cutting.")

## Check the result

:::check
**Accept when:** no part contains letters or numbers; every edge is clean on a dark and a light background; the panel's four corners are identical; the button's middle is plain enough to stretch; all parts share one light direction and palette.
**Reject when:** a part has baked-in text or an icon you did not ask for, corners differ from each other (they will not slice), the center carries a texture feature that smears when stretched, or a halo of background color rims the alpha.
:::

The test that matters is stretching. Scaled plainly to a wide format, the panel's square gold corner pieces and crowns stretch into wide slabs, and the side borders thicken. Nine-sliced with the 170-pixel border, the same panel stretches to any width and the corners stay square.

:::compare
![The panel stretched plainly to a wide shape above the same panel nine-sliced: on top the gold corners and crowns are stretched wide](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/545ff0bf22ba516852e6926c0468f865bb6da7ce616d6988780c2454fbe3fb7c.webp "Top: plain stretch, corners and crowns distorted. Bottom: nine-slice, corners intact.")
![The blue button three-sliced to fit Collect, Récupérer and Einsammeln](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/f4aa0727c4e61dad7782c2a0f1e9d0b9b9bc712ba25c28dda9000f5439715f5c.webp "One button, three widths, three languages. The caps and rivets never stretch.")
:::

All three runs passed on the first try: no letters anywhere, clean alpha, four identical corners. The panel's center has a slightly torn parchment edge just inside the wood; it stretches without visible smearing at the sizes tested.

A perfectly flat center would be safer for very wide panels. Ask for "flat, untextured parchment center" if your layout needs panels much wider than tall.

:::quiz Check yourself
? The dialog panel resized to a wide shape two ways. Which one goes in the game?
![The dialog panel resized to a wide shape two ways, one above the other](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/4b6186e148855b941e982d629e88811e726a848a60d3defc5e559be80b8a5207.webp "Top: Take A. Bottom: Take B")
- [x] Take A: its gold corners and crowns keep their shape at the new width
- [ ] Take B: scaling the whole panel keeps it simple, and the parts are all still there
- [ ] Either one: players will not notice the corners at that size
> Take B was scaled plainly: the corner pieces and crowns stretch into wide slabs. Take A was nine-sliced with the measured border, so the corners stay fixed and only the edges and the center stretch.

? The small-parts sheet comes back with the word OK printed on the round button. What do you do?
- [x] Reject that part: put "NO text, no letters, no numbers" in capitals, repeat it at the end, and generate the part alone if the sheet keeps adding labels
- [ ] Keep it: OK reads the same in most languages
- [ ] Ship the sheet and set the other labels in the engine around it
> Every readable label is set in the engine, because it changes with the language, the value and the player. A part with baked-in text fails the check.
:::

## Make it repeatable

- **Store the kit with its numbers.** Keep each part with its slice border in the file name or a small manifest (`panel_border170.png`, `button_caps210.png`). Engines read the border once and reuse it.
- **Workflow for new parts** ([Package it as a workflow or skill](https://learn.scenario.com/browse)). In the **Node Editor**: two **Image** nodes for the anchors, a **Text** input for the part description, a **Prompt Builder** that adds the fixed rules (no text, constant border, plain center), an **Image Generator** on GPT Image 2.5 Sunburst with transparent background, and an **Approval** node. See [Build your first workflow](https://learn.scenario.com/workflows/build-your-first-workflow.md).
- **Platform App to compare.** Under **Workflows**, **Apps**, **Game UI Framer** turns a character or object image into a game screen layout. It is useful for exploring screen ideas; for a production kit, generate parts empty as above.

## Runs and time

| Step | Model | Runs | Kept | Wait |
|---|---|---|---|---|
| Primary button, 1536x512 | GPT Image 2.5 Sunburst, 2 references | 1 | 1 | about 40 s |
| Dialog panel, 1024x1024 | GPT Image 2.5 Sunburst, 2 references | 1 | 1 | about 50 s |
| Sheet of small parts, 1536x1024 | GPT Image 2.5 Sunburst, 2 references | 1 | 1 | about 45 s |
| Cutting, trimming, slicing, mock screen | local script | 0 | n/a | seconds |

About 1 minute with the runs in parallel. The three runs cost about the same; most of the time in this playbook is measuring and assembling, which costs nothing. The price shows on the **Generate** button before you run.

## Variations

- **Alternate states:** generate pressed, hover and disabled buttons with the approved button attached: "the same button, pressed: face 4 px lower, darker blue, no highlight".
- **Seasonal or event skins:** reskin the whole kit with the method in [Reskin a set of assets](https://learn.scenario.com/playbooks/edit-one-thing-campaign.md); keep the slice borders, which do not change if the silhouette does not.
- **Mobile and console:** generate parts at 2x the largest size you ship and downscale; slice borders scale with them.
- **Non-game apps and learning platforms:** the same approach makes branded panels and badges; replace the anchors with your brand assets.
- **Localization test:** before shipping, run the longest translated label through the three-sliced button, as in the comparison above.

## If it breaks

- **Text appears on a part.** Put "NO text, no letters, no numbers" in capitals and repeat it at the end. If one sheet keeps producing labels, generate that part alone.
- **Corners are not identical.** Ask for "perfectly symmetric, all four corners identical"; if one corner still differs, mirror the best corner in code.
- **The center smears when stretched.** Ask for a plain, evenly lit center, or fill the center region in code with a flat color sampled from the part.
- **Parts touch on the sheet and cut as one.** Ask for "generous empty space between them" or generate fewer parts per sheet.
- **A colored halo shows around the alpha.** Download as PNG, which engines and editors read most widely, not JPG; if the halo persists, run **Remove Background** on that part.

Source: https://learn.scenario.com/playbooks/game-ui-kit