Make a 9-slice UI kit for your engine

Last updated: October 14, 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. 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, cleans the edges and middle so they stretch, 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 plain middles.

  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 cleaned.

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 stretches

  1. Open a piece full-size and choose Stretched above it. It is drawn twice as wide, the way the engine stretches it: the corners should keep their size and nothing should smear.

A piece that comes back without insets had detail across its middle. 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).

Unity

One atlas PNG and its .meta. 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 Sliced; on a SpriteRenderer, set Draw Mode to Sliced.

Godot 4

One atlas PNG and a StyleBoxTexture .tres per element. Copy the folder into your project and assign a .tres to a Button's or Panel's theme style, or read its texture margins into a NinePatchRect's patch margins.

CSS

One PNG per element in an images folder and a stylesheet giving each element a class with a border-image rule. 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.

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.
  • 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.
  • Download as... offers no UI kit. None of the selected files has insets. Check that the pieces were made as 9-slice elements.
  • 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