Generate & Edit Screens

The hardest part of designing is getting past the blank page. With the Stitch CLI and the /stitch skill, you can create a project, generate an initial screen, branch out into variations, and refine one detail at a time without leaving your terminal.

Start a project and pin it

Every screen lives inside a Stitch Canvas project. Create a new project (or list your existing ones) and pin it to your folder so you never have to pass --project again:

stitch create project --title "Analytics Workbench"
stitch config set project <project-id>

If you’re working inside a coding agent with the /stitch skill installed (stitch agent-skills add), you can also just ask /stitch to create a project and generate your first screen in one turn.

Generate your first screen

Your first prompt doesn’t need to be a novel. Describe what the screen is, the general vibe, and the specific content that belongs on it:

Run stitch generate screen with --device DESKTOP or --device MOBILE:

stitch generate screen \
  --title "Revenue Overview" \
  --device DESKTOP \
  --prompt "A revenue telemetry dashboard for a subscription business on a warm editorial paper surface (#FAF8F5) with deep charcoal ink (#181615), featuring a 12-month revenue comparison chart, a three-column KPI summary strip, and a recent transactions table."

Explore variations when you want big swings

Why settle for the first layout you see? Variations let you branch out into 1 to 5 different options at once.

When you run stitch generate variants, pick the Creative Range (--creative-range) and the Aspects (--aspects) you want Stitch to vary:

• Use REFINE when the layout is working and you just want to test subtler font, spacing, or color polish.
• Use EXPLORE or REIMAGINE when you want to see completely different layouts (LAYOUT), color palettes (COLOR_SCHEME), or typography (TEXT_FONT).

stitch generate variants \
  --screen <screen-id> \
  --count 3 \
  --creative-range EXPLORE \
  --aspects LAYOUT,COLOR_SCHEME \
  --prompt "Explore a compact high-density layout and a high-contrast dark theme"

Edit one thing at a time

Once you have a screen you like, switch from broad exploration to targeted edits. Pick one change you want to make and be specific about what to change and how:

Target specific component

Specific visual instruction

New UI element

Replace the top KPI cards with a compact single-line horizontal ticker and add a date-range selector in the top-right header.

Pass that instruction to stitch edit screen:

stitch edit screen <screen-id> \
  --prompt "Replace the top KPI cards with a compact single-line horizontal ticker and add a date-range selector in the top-right header."

Preview on localhost and pull the HTML

To see how your screens feel in a real browser—or let your coding agent inspect the live DOM—start the local preview server:

stitch serve

When you’re ready to pull a screen’s HTML into your project or open it on the Stitch Canvas in your browser:

stitch get screen <screen-id> --code --output ./screens/revenue-overview.html
stitch open screen <screen-id>

For a full walkthrough on combining custom artwork, stitch serve, and interactive edits with your coding agent, head over to Iterate with Coding Agents.