Google Stitch Prompt Guide for Beginners

What Stitch is

Google Stitch is Google Labs’ AI-native design canvas. Its core idea is not to make you learn a design tool first. It lets you use natural language, images, or code as context and generate high-fidelity interfaces directly. Official documentation describes it as a workspace that moves from idea to interface: you can generate screens, keep editing, connect multiple pages into a flow, and carry design context into other tools through DESIGN.md, MCP, the CLI, and Agent Skills.

That distinction matters. Stitch is strongest at getting a direction onto the canvas quickly. It is not a replacement for full design-system governance or production code review. A good prompt is not a one-shot attempt at a perfect page; it is a way to enter the generate–observe–revise loop faster.

The official prompt formula

Stitch’s documentation suggests that a first prompt include four parts:

Idea: what you are making, such as a landing page for a running podcast.
Theme: the overall feel, such as modern, high-contrast, black and white, hard angles.
Content: what should appear on the page, such as the headline, podcast platform links, and episode list.
Image: an optional reference image that communicates the visual direction.

The first version does not need specific fonts or hex codes. Let Stitch understand the product, content, and mood first, then tighten the details in later iterations.

Idea: A landing page for a running podcast called "The Pacing Project".
Theme: Modern, edgy, high contrast. Black and white with hard angles.
Content: A hero section with the headline and links to podcast platforms.
Image: Optional reference image.

Choose the device type

Before generating, decide whether you are making an App or a Web experience. Official guidance is to make a quick judgment rather than overthink every breakpoint in the first version. Stitch can convert between modes as you iterate, so you can start with a mobile direction and later move to Web, or the reverse.

App: better for mobile navigation, one-handed use, card lists, and bottom tab bars.
Web: better for sidebars, top navigation, wide grids, and multi-column content.
Dashboard: if the page is a data-heavy back office, explicitly describe the sidebar, table, charts, and filter area.

Device type affects navigation, information density, and component shape. Naming the platform in the prompt reduces the amount of layout rework later.

The first prompt

The goal of the first prompt is a complete structure, not final visuals. Describe the user, the task, the sections, and the most important information, then let Stitch create a version worth discussing. Official documentation suggests starting with concrete content and an overall vibe rather than filling the first prompt with fonts, hex codes, and micro-interactions.

Design an iOS mobile app for tracking daily water intake.
Include a circular progress indicator, quick-add buttons for common bottle sizes,
a weekly history chart, and a bottom tab bar.
Use a calm, minimal style with blue and white colors and generous whitespace.

This prompt includes the platform, product, core features, page structure, and visual direction. It does not specify every pixel, but it gives Stitch a meaningful starting point.

Iterate: one major change at a time

After generation, inspect structure first: is the hierarchy clear, is the primary action obvious, does the screen cover the task, and does it work on both mobile and wide screens? Then inspect the visuals: do colors support the hierarchy, is type readable, and is spacing consistent?

Official guidance is to select the screen you want to change, open editing or chat, and write one specific, actionable instruction. Make one major change at a time. For example:

“Enlarge the middle pricing card, increase its container height and shadow, and reduce the sibling cards to create a clearer hierarchy.”
“Narrow the sidebar to 220px and turn the main content area into a single column on small screens.”
“Add guidance copy and a primary action button to the empty list state.”

Change five things at once and you cannot attribute the improvement or regression. Change one thing and you know what to keep.

Edit Theme

When the change belongs to the overall theme rather than one component, Edit Theme is faster. Official documentation says it can adjust light or dark appearance, accent color, component corner radius, and font. Use it to unify the visual language after the direction is settled, not as a substitute for structural fixes.

A practical order is: settle layout and information structure, use Edit Theme for appearance, accent, radius, and type, then handle local components and states.

Design Modes

Stitch is not a single model; it is a suite of design engines. Official documentation lists several Design Modes:

Thinking with 3 Pro: for complex logic, deeper reasoning, and screens that are closer to production candidates.
Redesign (Nano Banana Pro): for applying a specific aesthetic to an older interface or changing the visual mood with style keywords.
2.5 Pro: for high-fidelity HTML and A/B comparisons; run the same prompt to compare two high-level interpretations.
Fast: for rapid wireframing and exporting to Figma for further refinement.

Choose by task, not by “which one is stronger.” Are you exploring a direction, comparing two interpretations, or pushing a page toward a more rigorous structure? For a complex page, generate with Thinking with 3 Pro, then run the same prompt in 2.5 Pro to compare.

Variations and Creative Range

When you do not know what to change next, or when you want to see several directions at once, use Variations. Official documentation says Stitch can generate one to five options at a time and uses Creative Range to control how far each option departs from the current design:

Refined (low range): keeps the structure intact and adjusts fonts, spacing, and colors. Use it for polish.
Creative (high range): allows Stitch to restructure the layout, swap imagery, and overhaul the theme. Use it to explore “what if we went another way?”

Use Variations for broad exploration. Once you have a winner, return to single-variable iteration for detail work. You can also generate variations on top of a variation and combine a layout you like from one option with a palette you like from another.

Design to Prototype

A page can look good and still fail as an interaction. Stitch can turn a design into a scrollable, interactive prototype for checking hover states, button states, text input, and transitions between screens. Official documentation recommends checking the states that are invisible in a static design: hover styles for buttons and links, and how a text box behaves with different amounts of text.

If the prototype exposes a structural problem, go back to the prompt and change the layout. If only a state is missing, add an explicit interaction description. Do not use visual polish to hide a broken flow.

DESIGN.md and design systems

When one screen becomes five, the main problem is no longer whether a single page looks good. It is whether color, type, spacing, and component rules stay consistent. Stitch uses DESIGN.md to turn a design system into context that both AI and people can read: YAML front matter stores machine-readable design tokens, while the Markdown body explains why those values exist and when they should be used.

Official documentation describes three ways to create one:

Let Stitch generate a design system from a prompt.
Extract color, typography, and style patterns from a brand URL or image.
Hand-author DESIGN.md for precise control.

When generating the second screen, do not re-describe every visual detail. Say: “Follow the color, type, spacing, and component rules in the project DESIGN.md. Do not introduce new accent colors, shadows, or radii.” That is how multiple screens start to feel like one product instead of five independent generations.

Export code and images

Once the direction is settled, select a screen or drag-select multiple screens and download the HTML and images. Official documentation says Stitch creates both image and HTML outputs. The HTML can serve as a base that an LLM converts into React, Angular, Vue, Jetpack Compose, Flutter, or SwiftUI.

Exported code still needs engineering review. Class names, responsiveness, accessibility, states, and real data do not become correct just because they were generated. Treat Stitch output as a strong starting point, not a reason to skip code review.

Common mistakes

Too vague: “make a nice app” with no platform, user, task, or content.
Too many requirements at once: several pages, styles, and interactions in one prompt.
No platform: mobile and web have different navigation, density, and components.
Visuals without states: empty, loading, error, permission, and disabled states need explicit description.
Trend stacking: glassmorphism, gradients, 3D icons, and thick outlines all at once remove the focal point.
Treating the first version as final: Stitch’s value is in iteration, not a one-shot hit.

Example: from basic to advanced

A basic prompt only needs to communicate the page type and core task. An intermediate prompt adds sections and visual direction. An advanced prompt adds components, states, density, and explicit constraints. Here is an advanced example:

Design a professional SaaS analytics dashboard for a small product team.
Include a collapsible sidebar, a top bar with search and notifications,
four KPI cards, a weekly revenue line chart, a bar chart for channel comparison,
and a sortable data table. Use a light canvas, dark text, one blue accent,
compact spacing, 8px card radius, and clear focus states.
Include an empty state for the table and an error state for failed data loading.

This prompt does not specify every pixel, but it describes platform, user, structure, visuals, and states. The output still needs review for hierarchy, contrast, and behavior with real content.

Summary

The key to better Stitch prompts is not memorizing more adjectives. It is building a stable structure: state the platform, user, and task; describe the sections, visual language, and states; then iterate one major change at a time, use Variations for exploration, DESIGN.md for consistency, and hand the design context to Figma, MCP, the CLI, or a coding agent.

Complete Google Stitch Prompt Guide: From Beginner to Expert