Capability

Get started with Stitch

From DESIGN.md to prompt to editing images — the core Stitch workflow.

#stitch#design#workflow

Google Stitch is Google Labs' AI-native UI design tool. Describe a screen in plain language — or upload a wireframe or screenshot — and it generates a high-fidelity UI plus front-end HTML/CSS. The trick to getting consistent, on-brand output is to feed it your design system first, then prompt, then refine. This page walks that path: DESIGN.md → prompt → editing images → export.

DESIGN.mdyour design system
Prompttext or image
GenerateUI + code
Edit & refineelements, images
Exportcode · Figma · MCP
Set the constraints once with DESIGN.md, then prompt and iterate — Stitch keeps every screen on-system.

1 · Start with DESIGN.md

DESIGN.md is an agent-friendly markdown file that encodes your design system — color roles, typography, spacing, radius and shadows. When you prompt, Stitch passes it to Gemini and treats the values as hard constraints, not suggestions, so every generated screen follows your system.

Two ways to create one

Write it from scratch in Stitch's editor, or point Stitch at a live URL — it scrapes the design tokens and produces the file for you.

Where it lives

Drop it in your repo root, or keep it tidy at .stitch/DESIGN.md. Import or export it to move a system between projects and tools.

A minimal example:

DESIGN.md
## Colors
- Primary: #1A73E8
- Background: #FFFFFF
- Text Primary: #202124

## Typography
- Font Family: Inter, sans-serif
- Heading 1: 32px, 700 weight

## Spacing
- Base unit: 8px
- Values: 4, 8, 16, 24, 32, 48px

It travels

The same DESIGN.md format is what other agent tools read and write — Claude Code's Impeccable plugin, for instance, generates a DESIGN.md in this exact shape. One file keeps design and code in sync.

2 · Write the prompt

With the system in place, describe the screen. Be specific about what it is, who it's for, and the mood — and name constraints like accessibility directly.

  1. 1

    Describe in natural language

    text
    Design a settings page for a personal budgeting app.
Calm and trustworthy; accessible to WCAG 2.1 AA.
Sections: profile, notifications, linked accounts, danger zone.
  2. 2

    …or bring a visual

    Upload a sketch, wireframe, or screenshot to generate from, and add a reference image when you want Stitch to match a particular style. You can drop images, text, or code onto the canvas as extra context.
  3. 3

    Generate connected screens

    Stitch produces a high-fidelity screen (and can stitch several together into a flow you can preview). Tags worth keeping in mind:text promptwireframe uploadreference imageWCAG

3 · Edit & refine the images

You don't have to re-prompt for small changes. Stitch supports direct editing and conversational refinement together.

Edit elements directly

Click any element to edit its text, swap or replace images, and adjust spacing — no re-prompt needed.

Refine with follow-ups

Ask for changes in plain language, e.g. “change the background to dark gray” or “show this screen in three color palettes.”

Iterate at the canvas

You can speak to the canvas for live critiques, let the design agent explore parallel directions, and hit Play to walk the prototype before you commit.

4 · Export & hand off

When a screen is right, take it out of Stitch:

  • Code — clean HTML/CSS (a starting point; refactor into React/Vue components as needed).
  • Figma — hand the visual off to designers.
  • DESIGN.md — export the system to reuse in another project or tool.

Pull designs straight into Claude Code

To skip copy-paste and have Claude fetch a screen's HTML and screenshots directly, connect the Stitch MCP — then just ask Claude to design and build a screen for you.

Learn more