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.

  • Use case 1 of 8
  • Checked Oct 16, 2026
Film coming soon

About this use case

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. The models and settings in this use case are as of October 2026.

See moreSee less
  • 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.
Step by step with an agent, through the Scenario MCP (6 steps)Hide the steps
  1. Connect the Scenario MCP

    Connect your agent and sign in once at mcp.scenario.com. Then tell it which Scenario team and project to use, so every file lands there.

  2. Give the agent the files

    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.

  3. Brief the agent: the button and the panel

    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.
  4. 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.
  5. Check every part and redo

    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.
  6. Slice, file and report

    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.
Step by step in the web app (7 steps)Hide the steps
  1. Attach the style anchors

    Create › Images › GPT Image 2.5 Sunburst, Reference Images: your two anchors (here the town hall and Queen Pip). Settings: Quality high, Background transparent.

  2. The primary button, empty

    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.
  3. The dialog panel, made for slicing

    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.

  4. The small parts on one sheet

    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.
  5. Cut the sheet into parts

    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.

  6. Measure the slice borders

    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.

  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.

Read the full article10 min read
CoursesLessonsBrowseMy learning