Nine-slice UI kit

Generate a coordinated nine-slice panel, four button states, and a sixteen-icon sheet.

Visual directionNine-slice interface kit

Disable primary actionLoading sheets…

FIELD JOURNAL / DAY 03

The meadow is waiting.

Pack a few essentials, take the long way home, and see what the afternoon brings.

Kindness packed

Your next small adventure starts here.

Drag the corner to resize the frame. Text and controls stay live; the generated sheets supply the artwork.

Sixteen icons

heart

Four button states

normal

hover

pressed

disabled

Make it yours

Give your agent the brief, author a workflow, or start by using the finished assets.

FX guide Workflow source

Build an FX workflow for a small interface kit: a nine-slice panel, four aligned button states, and sixteen icons. Use

1this meadow as the visual reference, validate the sheet geometry, and preserve independent review verdicts. Deliver measured insets and cells so the UI can resize without redrawing its corners. Plan offline before asking for a live generation ceiling.

1 reference

Paste into your agent. Copy includes text and reference links; attach your own files to make it yours.

Shell

# From examples/ui-kit in the FX repository.
# Install the CLI first: npm install -g grida
uv sync
source .venv/bin/activate
python ../fetch_showcase_inputs.py .

grida fx plan workflow.py:build --max-usd 15

# Start the local service for the browser viewer.
grida fx start --background

# After reviewing the plan, choose a provider spending ceiling.
grida fx run workflow.py:build --live --max-usd 15 --open

The Python builder reads the included ui.json and style direction. The download retrieves the original meadow reference. Planning is offline; live runs use your provider account. The ceiling limits spending and does not guarantee completion.

JavaScript

const base = "https://fx-cdn.grida.co/showcase/showcases/412d71164da3e787e38babfa4d99c0497cac942bf796847b3ce6608a4c8c1835/ui-kit";
const panel = await fetch(
  base + "/assets/panel_frame_validation.json"
).then((response) => response.json());

// Use the measured geometry, not guessed border sizes.
console.log(panel.cells, panel.insets);
console.log(panel.band_fill, panel.draw_scale);
// Draw fixed corners; fill the edges and center
// according to the recorded rules.

Consume the recorded files directly. No engine or provider call is needed to display them. Rendering excerpts assume your application's canvas or media setup.

The template holds the shape

Four meadow-themed button states painted into the template — The guide fixes the four button-state positions. The generated sheet supplies the artwork; local finishing prepares the downloadable sheet.

The geometry template for four aligned button states — The guide fixes the four button-state positions. The generated sheet supplies the artwork; local finishing prepares the downloadable sheet.

How it comes together

Interface art has to survive interaction. A panel needs corners that stay crisp as it grows; a button needs states that line up. This workflow draws and validates those sheets, then hands a renderer the measured cells and insets. Try the same art at different sizes below.

01
Specify
Define panel, button, and icon roles before drawing.
02
Draw
Generate a coordinated kit from one visual direction.
03
Measure
Validate cells, corners, insets, and button-state geometry.
04
Use
Render the nine slices and try the kit's real interaction states.

Take it from here

Real files from this run. Use them in your own renderer, prototype, or engine.

A good fit for

Small coordinated interface kits
Panels that resize through measured nine slices
Consistent pointer, keyboard, and disabled button states

Production notes

The panel and buttons passed the workflow's judge. The icons are retained as a study because their palette differs from the requested direction.

Demo manifest

Keep exploring

47-tile terrain atlas