Google Stitch Tutorial: Design App Screens Step by Step

This tutorial is for founders, PMs and designers who want to use Google Stitch to turn an app idea into real-looking screens. You'll learn the full workflow from first prompt to Figma export, a prompt formula that gives consistent results, fixes for the most common problems, and where Stitch fits next to other tools.

TL;DR: Stitch works best when you treat it like a junior designer: give it a specific brief for one screen at a time, iterate with small targeted edits, lock in a theme early, and export to Figma or code once the flow is right. Expect to clean up the output before handoff.

What Google Stitch is

Stitch is an experimental AI design tool from Google Labs, announced at Google I/O in 2025 and powered by Gemini models. You describe an app or upload a reference image, and it generates UI screens for mobile or web along with front-end code. You can keep refining screens through chat and then copy them to Figma or take the code.

It's free to use with a Google account while it's a Labs experiment, with generation limits that have changed over time. Because it's an experiment, Google updates the interface often, so menu names in this guide may differ slightly from what you see. For a broader verdict on output quality, see our Google Stitch review for mobile app design.

Before you start: write a one-paragraph brief

Stitch can't read your mind, and vague prompts produce generic screens. Spend five minutes on a brief before opening it:

• •What the app does: one sentence.
• •Who it's for: one sentence about the user and their context.
• •Platform: iOS, Android or web.
• •The screen list: 4–8 screens for a first pass.
• •Visual direction: mood, 2–3 colors, font style, light or dark.

Example: "A budgeting app for freelancers with irregular income. Users check it weekly on their phone. iOS. Screens: welcome, connect bank, dashboard, income detail, set a goal, settings. Calm and trustworthy: navy, mint and white, rounded sans-serif, light mode."

Step-by-step: designing an app in Stitch

Step 1: Open Stitch and start a project

Go to Google Stitch and sign in with your Google account. Choose whether you're designing a mobile app or a web app before you prompt; this sets the canvas size and layout conventions for everything that follows. If the interface offers a model or mode choice, the faster mode is good for exploring and the more capable mode is better for final screens and image input.

Step 2: Generate your first screen

Start with the screen that defines the product, usually the home or dashboard, not the welcome screen. It sets the visual language that every other screen will follow. Use this formula:

[Screen name] for [app and user]. Show [3–6 specific elements in priority order]. Style: [colors, type, mood]. Platform: [iOS/Android].

Example prompt:

Dashboard for a freelancer budgeting app on iOS. Show: a greeting,
this month's income vs. spending as a large number with a small bar
chart, a "safe to spend" card, the next 3 upcoming bills, and a bottom
tab bar with Home, Income, Goals, Settings. Style: navy and mint on
white, rounded sans-serif, generous spacing, calm and trustworthy.

Being explicit about element order matters more than adjectives. "Show the next 3 upcoming bills" gives you a better result than "show bills in a nice way".

Step 3: Review it like a designer

Before you prompt again, check the screen against a short list:

1. •Is there one obvious primary action?
2. •Does the hierarchy match the order of importance in your brief?
3. •Are tap targets big enough (44pt on iOS, 48dp on Android)?
4. •Is the text realistic, or placeholder-like?
5. •Does it respect the status bar and home indicator areas? Compare against the device size reference if something looks cramped.

Note what's wrong. You'll fix it with targeted edits rather than regenerating from scratch.

Step 4: Iterate with small, specific edits

The single biggest mistake in Stitch is asking for too much in one follow-up. Large multi-part edits often change things you liked. Make one or two changes per prompt:

• •"Make the 'safe to spend' card the most prominent element and move it above the chart."
• •"Replace the bar chart with a single progress bar showing spent vs. income."
• •"Use real-sounding bill names: Rent, Adobe Creative Cloud, Phone."
• •"Increase the spacing between sections and reduce the number of colors."

If a change goes wrong, step back to the previous version rather than prompting your way out of it.

Step 5: Lock the theme

Once the first screen looks right, set the theme so later screens match. Depending on the current version, Stitch exposes theme controls for things like color, font, corner radius and light or dark mode. If you can't find a control for something, state it explicitly in every new screen prompt: "Use the same navy #1B2A4A, mint #3CCB9A, white background, 16pt corner radius and font as the dashboard."

Step 6: Generate the rest of the flow

Add screens one at a time, referencing the existing ones:

Using the same style as the dashboard, design the "Set a goal" screen:
a goal name field, a target amount with a large numeric input, a target
date picker, a suggested weekly saving amount, and a full-width
"Create goal" button.

Work through the flow in the order a user experiences it. When you get to sign-in, apply standard patterns rather than inventing; our guide on login screen design has a checklist to review Stitch's version against.

Step 7: Use image input for sketches and references

Stitch can work from an uploaded image, such as a whiteboard sketch, a wireframe or a screenshot of a layout you like. This is often faster than describing a layout in words. Tips:

• •Photograph sketches straight on, with good light and thick lines.
• •Tell it what to keep and what to change: "Keep this layout, apply our navy and mint theme, replace the placeholder text with realistic content."
• •Use screenshots of other apps for structure, not to copy branding.

Step 8: Export to Figma or code

When the flow is right, export:

• •Copy to Figma: paste screens into a Figma file to keep editing. Expect to tidy layers, rename frames, and convert repeated elements into components, as AI exports usually arrive as flat layer groups rather than a design system.
• •Code: view and copy the generated front-end code (HTML with CSS styling) as a starting point for a web prototype. For native iOS or Android apps, a developer will typically treat it as a visual reference rather than shippable code.

Prompt library for common screens

Common problems and how to fix them

Where Stitch fits, and its limits

Stitch is excellent for fast exploration: generating several directions for a screen in minutes, turning sketches into clean mockups, and giving non-designers something concrete to discuss. Its limits are typical of a Labs experiment. Keeping a multi-screen flow consistent takes deliberate prompting, exports need cleanup before handoff, and generation limits can interrupt long sessions. Our breakdown of Google Stitch alternatives and limits covers what to do when you hit them.

If your goal is native-feeling iOS and Android screens across a whole flow with code exports for React Native, Flutter or SwiftUI, floow is built around that workflow; we compare approaches in Google Stitch vs Figma Make as well.

FAQ

Is Google Stitch free?

Stitch is free to use with a Google account while it's an experiment in Google Labs, with monthly generation limits that Google has adjusted over time. Check the current limits inside the app before planning a large project.

Can Google Stitch export to Figma?

Yes. Stitch can copy generated screens so you can paste them into Figma and continue editing. The result is usually a set of layers rather than a structured component library, so plan time to clean it up.

Does Google Stitch generate code?

Yes, it produces front-end code for its screens, which you can view and copy. It's most directly useful for web prototypes; for native mobile apps, developers usually treat it as a reference.

How do I write good prompts for Google Stitch?

Name the screen, the app and user, list the elements in priority order, and specify colors, type and mood. Then make small, single-change edits rather than long multi-part follow-ups.

Can Stitch design both iOS and Android apps?

Stitch designs mobile app screens generally; you can ask it to follow iOS or Android conventions in the prompt, such as a bottom tab bar and navigation bar for iOS or Material 3 components for Android. Review the result against each platform's guidelines.

Design it with floow

If you want a full iOS or Android flow in one consistent style with exports to Figma, React Native, Flutter, SwiftUI or Jetpack Compose, try floow.design. Paste: "Design a 6-screen iOS budgeting app for freelancers: welcome, connect bank, dashboard with 'safe to spend' card, income detail, set a goal, settings. Navy, mint and white, rounded sans-serif, 44pt tap targets, consistent components across screens."