Skip to content

Stitch Prompt Guide

How to write Stitch prompts that produce consistent, correct designs.

Why Stitch needs detailed prompts

Stitch generates random designs when prompts are vague. It does not know your brand, your components, or your design system unless you tell it explicitly in every prompt.

Vague prompt result: random colours, wrong layout, made-up components. Detailed prompt result: correct colours, correct layout, matches your design system.

The solution: three building blocks — a shared context block, component sheets, then page layouts.

The three building blocks

1. stitch_context.md — NepWalk base context (auto-prepended)

One file generated by design: system. Contains:

  • App identity, purpose, target device
  • Full colour palette with exact hex values
  • Typography (font, sizes, weights)
  • Hard constraints (375px, WCAG AA, bottom nav always visible, time conflict colour)

Prepend this to EVERY Stitch prompt. Never re-type these values — they drift when copy-pasted. Read the file and paste it.

When design_system.md tokens change, run design: sync-tokens to regenerate stitch_context.md.

2. Component sheets — atoms → molecules → organisms

Each component gets its own file in stitch_prompts/components/. The context block handles the brand; the component file only describes what's unique: the grid layout, variants, states, real content.

3. Page layouts — reference component URLs

Page prompts reference component screen URLs from stitch_library.md. They do not re-describe components. They describe layout composition, spacing, and page-specific content only.

stitch_library.md — your component URL index

stitch_library.md is a lookup table of every generated Stitch URL.

When writing a page prompt, look up each component you need here and paste its URL:

COMPONENTS (reference URLs from stitch_library.md — do NOT re-describe):
- NavigationBar: https://stitch.google.com/... — "Home" tab active
- TripCard: https://stitch.google.com/... — default state, 3 cards

After every successful design: component or design: page run, update the corresponding row in stitch_library.md.

⚠️ Non-Claude users: Claude Code hooks update stitch_library.md automatically. If you are using OpenCode, Codex, or Cursor — update the row manually after each Stitch generation.

Two types of Stitch prompts

1. Component sheet (stitch_prompts/components/<name>.md)

Shows ALL variants × ALL states in a grid. Used to build your component library in Stitch.

Format:

COMPONENT SHEET: Button (atom)
APP: NepWalk

LAYOUT: Grid on light grey (#F1F5F9). 4 columns (variants) × 6 rows (states).
Each cell: white card, component name label below, 16px padding.
Column headers: primary | secondary | ghost | danger
Row headers: default | hover | active | focus | disabled | loading

COMPONENT: A rectangular button. Rounded corners 6px. Inter font 500.
Height: sm=32px, md=40px, lg=48px. Min touch target: 44×44px.

VARIANTS × STATES:
- primary × default: #2563EB fill, white "Save Trip" text, md size
- primary × hover: #1D4ED8 fill, white text, slight shadow (0 2px 4px rgba(0,0,0,0.15))
- primary × disabled: #2563EB at 50% opacity, white "Save Trip" text
- secondary × default: white fill, #2563EB border 1.5px, #2563EB "Cancel" text
... (all combinations)

Rules for component prompts:

  • Real content in every cell — not "Button label". Use "Save Trip", "Cancel", "Delete Trip".
  • Exact hex values — Stitch doesn't know your token names.
  • Pixel dimensions for every size.
  • Describe the grid explicitly so Stitch lays it out correctly.

2. Page layout (stitch_prompts/pages/<name>.md)

Shows a full mobile screen (375px). References component screen URLs — does NOT re-describe components.

Format:

SCREEN: Dashboard
APP: NepWalk

LAYOUT (375px mobile):
Top: App bar — "My Trips" title left, notification bell icon right.
Below app bar: "Upcoming" section header + 2 TripCard components
  (see TripCard component at [URL]).
Below upcoming: "All Trips" section header + list of TripCard rows.
Bottom: NavigationBar (see component at [URL]) — "Home" tab active.

CONTENT:
Upcoming trip: "Everest Base Camp Trek", Oct 15–28, 3 members avatars, "Active" badge.
All trips list: 3 trips with titles, date ranges, member counts.

COLOURS (exact):
Background: #F8FAFC
Surface (cards): #FFFFFF
Primary: #2563EB
Text-primary: #0F172A
Text-secondary: #475569

...

Rules for page prompts:

  • Reference component URLs: "Use Button component as shown at [URL]"
  • Do NOT describe the Button again — it's already defined in the component sheet.
  • Focus on layout, spacing, and page-specific content.
  • Always 375px mobile width.
  • Bottom nav always visible — do not hide it.

The rule: components before pages

You cannot write a page prompt well unless you have component screen URLs.

Correct order:

  1. Generate component sheets for atoms → get URLs
  2. Generate component sheets for molecules (reference atom URLs) → get URLs
  3. Generate component sheets for organisms (reference molecule URLs) → get URLs
  4. Generate page screens (reference organism URLs) → get URLs

Wrong order:

  • Trying to describe a Button in a page prompt (vague, inconsistent)
  • Generating pages before components have Stitch screens

Common mistakes

Mistake Why it fails Fix
"Use a clean modern button" "Clean" and "modern" mean nothing to Stitch "Rectangular button, 40px height, #2563EB fill, white Inter 500 text, 6px radius"
"Show the trip card" Stitch invents a random card Reference the TripCard component URL
Using token names (color-primary) Stitch doesn't know your tokens Use exact hex (#2563EB)
One prompt for the whole page Too vague, too much to describe Component sheet first, then page prompt references it
Placeholder text ("Card title") Stitch renders fake-looking designs Real content: "Everest Base Camp Trek, Oct 15–28, 3 members"

Checklist before invoking Stitch

For component sheets:

  • [ ] Grid dimensions stated (N columns × M rows)
  • [ ] Column headers (variant names) and row headers (state names) listed
  • [ ] Real content in every variant
  • [ ] Exact hex values for all colours
  • [ ] Pixel sizes for sm/md/lg
  • [ ] NepWalk-specific rules applied (time conflict = #F59E0B)

For page layouts:

  • [ ] All organism component URLs referenced
  • [ ] Layout described top-to-bottom
  • [ ] Real content (not placeholder)
  • [ ] Exact hex values
  • [ ] Mobile 375px width stated
  • [ ] Bottom nav visible
  • [ ] Which state to render (default / empty / loading / error)