Make a 9-slice UI kit for your engine

Last updated: October 30, 2026

Make the buttons, panels and frames of a game screen as 9-slice elements, and export them as a UI kit for your engine.

What you'll make

A set of UI elements (panels, buttons, dialog frames, tabs) as PNGs, each with its 9-slice insets recorded: how far in from each edge its corners reach. The edges and middle of each are made to tile. Exported together as one zip laid out for Unity, Godot 4, CSS, or PixiJS and Phaser, with a README that gives the import steps and every element's insets.

Before you start

  • Decide the look: the material of the frames, the ornament, the palette. A reference image or a trained reference set keeps every piece in it.

  • Each piece is one image generation. See Creative Units for how runs are charged.

Brief the agent for 9-slice pieces

The agent makes each piece as a 9-slice element: after the image is made, Layer finds where its corners end, makes the edges and middle tile, and records the insets on the file. For briefing in general, see Write a brief for the agent.

  1. In the agent's composer, list the pieces, describe the look, and say they are 9-slice elements with ornament in the corners only and nothing running across the middle.

  2. Send the brief and review the run the agent proposes: the pieces, the model and the cost.

  3. Select Approve. The pieces start on the board.

  4. Each piece lands with its corners measured and its edges and middle made to tile.

Working from an assistant through MCP or from the API, set nine_slice to true on the generation for the same result.

Check that each piece tiles

  1. Open a piece full-size and choose Tiled above it. It is drawn twice as wide, the way the engine tiles it: the corners should keep their size and the middle should repeat without a seam.

A piece that comes back without insets had detail across its middle: a crest, a label, a seam or a pattern. Painted texture is fine there. Brief it again with a plain middle, or set its guides by hand with Make a 9-slice UI element, which also turns art you already have into 9-slice pieces.

Export the kit

  1. Switch the board to Gallery and select every piece of the kit.

  2. Right-click a selected piece and choose Download as....

  3. Under UI kit (9-slice), pick your engine: Unity, Godot 4, CSS or Atlas + JSON.

  4. Select Download All. You get one zip for the whole kit.

Hand it off

Every zip holds a README.txt with the import steps and each element's insets (left, top, right, bottom, in pixels). Godot and CSS fit a whole number of tiles to the element, Unity tiles and cuts the last tile, and PixiJS and Phaser stretch.

Unity

One atlas PNG and its .meta, with each sprite meshed as a full rectangle so it can tile. Copy both into your project's Assets folder together: Unity slices the atlas into one sprite per element, each with its border set. On a UI Image, set Image Type to Tiled; on a SpriteRenderer, set Draw Mode to Tiled. Unity tiles at the sprite's own size and cuts the last tile, so size an element to whole repeats of its middle for the far edge to meet its corners.

Godot 4

One atlas PNG and a StyleBoxTexture .tres per element, set to tile fit: the edges and centre repeat, scaled so a whole number of tiles fills the element. Copy the folder into your project and assign a .tres to a Button's or Panel's theme style. For a NinePatchRect, read the texture margins into its patch margins and set its axis stretch modes to Tile Fit.

CSS

One PNG per element in an images folder and a stylesheet giving each element a class with a border-image rule set to round, which repeats the edges and centre and scales them so a whole number of tiles fills the element. Keep the folder beside the stylesheet. Change border-width on a rule to draw an element larger or smaller.

PixiJS and Phaser

One atlas PNG and a TexturePacker JSON (hash format). Each frame carries borders, which PixiJS reads for a NineSliceSprite, and scale9Borders, which Phaser reads for its NineSlice object. Both stretch the edges and centre rather than tiling them, so the texture stretches with the element.

Figma

Place a 9-slice piece from the Layer plugin in Figma and it arrives as a component of nine rectangles with stretch constraints, so resizing it in a mockup keeps the corners as they are.

Scale it up

  • Hold the look. Brief every piece of a screen in one go, or attach a finished piece as a reference, so the material and ornament match across the kit.

  • Keep corners consistent. Pieces that sit together read better when their corners are a similar size. Make them at the same base size, near the smallest size each is drawn at.

  • Leave text out. Make buttons and tabs plain and set their labels as text in the engine, so one button serves every label and every language.

  • Light the frame, not the middle. Shading in the border is kept; light in the middle is evened out so the repeats don't show. Brief the lighting into the frame.

  • From an assistant. Through MCP, export_ui_kit builds the same zip from a set of 9-slice files and returns a download link.

If something goes wrong

  • UI kit (9-slice) is greyed out. Some selected files have no insets. Only images with 9-slice insets export as a UI kit; make a 9-slice copy of the others, or leave them out of the selection.

  • The far edge of a Unity panel stops short of its corner. Unity cuts the last tile. Size the element to whole repeats of its middle, or use the Godot or CSS kit, which fit whole tiles.

  • A piece has a checkerboard around it. The model painted a transparent background into the image. Ask for a solid background colour, then remove the background.

  • The corners look huge in the engine. The piece was made far larger than it is drawn. Make it near its smallest on-screen size.

Related