Iterate with Coding Agents

When you pair a coding agent with the Stitch CLI, your terminal becomes a design studio. The best results don’t come from asking an agent for a generic app template. They come from giving Stitch a real visual anchor, framing the composition cleanly on the first pass, and iterating on live HTML.

Start with artwork to drive the design

If you start from a blank prompt, you risk getting a generic color palette. Give Stitch something real to react to first.

Before prompting Stitch for the UI, generate the artwork that belongs inside your interface. You can generate these in Google AI Studio using Gemini 3 Pro Image (gemini-3-pro-image) with a 1:1 aspect ratio—telling the model to fill the frame edge-to-edge so you get a pure album cover without a border or wall mockup.

Here are the two prompts used for the album covers—Late Sun on the Hudson (warm burnt sienna and ochre) and Cobalt Shadows (twilight cobalt and indigo):

PROMPT

Full-bleed edge-to-edge square impasto oil painting filling the entire 1:1 frame to all four edges (not a photo of a canvas on a wall; the image itself is the painting surface edge-to-edge). Expressive palette-knife and brush strokes depicting late afternoon sun over the Hudson River: warm burnt sienna, golden ochre, and cadmium orange sunlight reflecting across deep ultramarine and Prussian blue water, with atmospheric skyline silhouettes in the distance.

PROMPT

Full-bleed edge-to-edge square impasto oil painting filling the entire 1:1 frame to all four edges (not a photo of a canvas on a wall; the image itself is the painting surface edge-to-edge). Expressive palette-knife and brush strokes depicting twilight over a quiet harbor: deep cobalt blue, Prussian indigo, and cool slate-violet water with pale moonlight silver and warm amber harbor reflections.

Late Sun on the Hudson — 1:1 impasto oil painting

Track 01 — Late Sun on the Hudson

Cobalt Shadows — 1:1 impasto oil painting

Track 02 — Cobalt Shadows

Save the generated images locally and upload them to your Stitch project with stitch upload screen:

stitch upload screen ./hudson-album-art.png \
  --title "Late Sun on the Hudson"

stitch upload screen ./cobalt-shadows-art.png \
  --title "Cobalt Shadows"

Once your artwork is on the canvas, you can grab its hosted URL with stitch get screen <screen-id> --format json or edit the uploaded screen directly. Passing that hosted URL in your prompt tells Stitch to embed your exact artwork pixel-for-pixel instead of inventing a placeholder.

Frame the design on the first prompt

When you ask for a whole app at once, models love to fill every corner with status dots, pill badges, and fake navigation bars. Tell Stitch what belongs on the canvas and leave everything else out.

A good recipe for a focused, studio-framed shot follows four beats:

PROMPT

CanvasCenter a single, sculptural music player card on a completely empty, solid warm stone background (#EAE6DF) with generous outer margins. The outer background canvas must remain completely blank with no text, headers, or footers outside the player card.

PrinciplesEvery element and piece of text inside the card must be essential and earn its place. Include only the album sleeve with its vinyl record, the exact titles, numerals, and controls listed below—render all text as plain, unbordered words without status dots, badge containers, or extra technical labels.

ArtworkInside the centered player card (warm alabaster surface #FAF8F4 with deep espresso ink #181615, set in Plus Jakarta Sans), display the uploaded square impasto oil painting on the left. Extending smoothly from behind the right edge of the square sleeve with about 28% of the disc visible, render a tactile matte-black vinyl LP record with subtle concentric micro-grooves, realistic vinyl sheen, and a warm terracotta center label.

PlaybackOn the right side of the card, set the track title “Late Sun on the Hudson” in 30px bold Plus Jakarta Sans with artist name “Clara Vance” directly beneath in 16px muted warm grey. Below that, place a clean horizontal scrub bar (“02:14” to “05:48”) with a warm terracotta playhead handle, three centered playback controls (previous, solid espresso-ink circular play/pause button, and next), and a three-row tracklist showing only plain track numbers, titles, and durations (“02 Cobalt Shadows 04:12”, “03 Nocturne for Pier 17 06:05”, “04 Alabaster Study 03:49”).

Run stitch edit screen against your uploaded artwork screen to build the player around the painting:

stitch edit screen <screen-id> \
  --device DESKTOP \
  --prompt "Center a single, sculptural music player card on a completely empty, solid warm stone background (#EAE6DF)..."

Stitch builds the player around your uploaded painting, pulling the warm terracotta accents on the vinyl center label and scrub bar straight from the brushwork:

Stitch

Sculptural music player card with uploaded impasto oil painting and tactile vinyl LP on a blank stone canvas

Preview on localhost and make it interactive

Static screenshots only tell half the story. Run stitch serve to spin up a local preview server so you and your coding agent can inspect the live DOM on localhost:

stitch serve

Stitch

Stitch Serve terminal workbench serving the Sculptural Music Player Card on localhost:3300

Now pick one change that brings the design to life. Because Stitch outputs real HTML, CSS, and JavaScript, you don’t have to stop at a static layout. Ask Stitch to wire up the tracklist and transport buttons so clicking a track swaps the active song, sleeve painting, and vinyl label color:

PROMPT

InteractionMake this music player interactive so clicking any track in the tracklist or clicking the previous and next track buttons switches the active track, updates the title, duration, and scrub bar, and swaps the square album sleeve artwork and vinyl center label color.

PreservationKeep the exact same clean, unadorned layout and blank #EAE6DF outer background canvas with no extra labels, status dots, or badges.

TracksInclude all four tracks in the interactive tracklist (“01 Late Sun on the Hudson 05:48”, “02 Cobalt Shadows 04:12”, “03 Nocturne for Pier 17 06:05”, “04 Alabaster Study 03:49”) with Track 02 (“Cobalt Shadows” by Clara Vance, elapsed “01:18” of “04:12”) active by default. Swap between the uploaded Hudson sunset painting (terracotta #C85A32 vinyl label and playhead) for Track 01 and the uploaded twilight harbor painting (deep cobalt #2C5E9E vinyl label and playhead) for Track 02, highlighting the active row in bold #181615 ink while inactive tracks rest in muted #7D7571 grey.

stitch edit screen <screen-id> \
  --device DESKTOP \
  --prompt "Make this music player interactive so clicking any track in the tracklist or clicking the previous/next track buttons switches the active track..."

Open the updated screen in your running stitch serve session and click through the queue. Selecting Cobalt Shadows swaps the sleeve to the twilight harbor painting and shifts the vinyl label and playhead from warm terracotta to deep cobalt:

Stitch

Interactive music player switched to Track 02 (Cobalt Shadows) with twilight harbor impasto artwork and deep cobalt vinyl accents

Keep iterating

You have the loop: anchor with real assets, frame the screen with clear constraints, and test interactive states on localhost. When the design feels right, pull the HTML into your codebase or keep refining one step at a time.

Generate & Edit Screens — Explore variants and targeted edits from the CLI.
Sync Design Systems — Keep your local DESIGN.md in sync with your Stitch project.
CLI Command Reference — Full flag reference for stitch upload screen, stitch edit screen, and stitch serve.