Google Stitch AI UI Design Guide

Google Stitch is often described as a text-to-UI tool, but it is more useful to think of it as an AI UI design partner. It can turn a short brief into a complete screen, yet the quality of that screen depends on how clearly you describe the product, the page, the visual system, and the constraints. This guide gives you a repeatable way to do that, from the first prompt to a design handoff.

The goal is not to generate more screens. The goal is to generate the right screen, then refine it into a consistent system you can hand to a developer.

What AI UI design means in Stitch

AI UI design is a loop: generate, critique, refine, and systemize. Stitch is strongest at the first two steps. It can produce several directions in seconds, but it does not know your product strategy, your accessibility requirements, or the states your interface needs. You still own the decisions.

Use Stitch for:

• exploring layout and visual directions before committing to a design system;
• seeding a design system with colors, type, spacing, and component patterns;
• turning a written product idea into a reviewable first draft;
• creating design references for a coding agent or a front-end team.

Read the Stitch guidance on prompting and design modes before you build a prompt library.

The five-part AI UI prompt

A useful AI UI prompt answers five questions. Leave one out and Stitch will fill the gap with a generic assumption.

1. Platform and device

Start with the surface: web app, marketing landing page, dashboard, iOS, or Android. The same product needs different navigation, density, and touch targets on each. If you are unsure how Stitch treats devices, see device types.

2. Product context

Describe who uses the product and what they are trying to finish. "A project management tool" is weak. "A project management tool for operations teams who review blocked work every morning" gives Stitch a real job to design for.

3. Page goal

Give each screen one primary action. A dashboard may have many widgets, but the page goal might be "find the blocked project and open it." A landing page may have one goal: "start a free trial."

4. Layout and components

Name the navigation model and the main content blocks. For a web app, that might be a left sidebar, a top bar with search, KPI cards, a chart, and a data table. For a mobile app, it might be a bottom tab bar and a card feed.

5. Visual style and constraints

Style words such as "minimal" or "premium" are not enough on their own. Add color rules, typography, radius, spacing, and accessibility constraints. If you want a known direction, start from a style in the gallery and adapt it instead of copying it. For example, Linear is a useful reference for dark, precise SaaS interfaces; Stripe is a reference for fintech clarity.

A reusable prompt formula

Use this structure as a starting point. Replace the brackets with product-specific details.

Design a [platform] [page type] for [product] used by [audience].
Primary goal: [one action the page should make easy].
Layout: [navigation model] + [main content structure].
Components: [4-6 components, in priority order].
Data: [key fields, data volume, loading / empty / error states].
Style: [visual direction, color rules, typography, spacing, radius].
Constraints: [responsive behavior, accessibility, brand rules].

The formula is deliberately boring. It forces you to make decisions before Stitch does.

Choosing the right style

SaaS and productivity

For SaaS, start with a product style that supports dense information. Linear and Notion are useful references: one is precise and dark, the other is calm and content-first. Use them to set constraints, not to clone the brand.

Fintech and enterprise

Fintech screens need trust, clear hierarchy, and readable numbers. Stripe is a strong reference for spacing and typography. Enterprise products may need a more conventional navigation model and stricter contrast.

Consumer and AI products

Consumer and AI products can carry more personality, but the interface still needs a clear primary action. Browse the gallery, pick two or three references, and write down what you are taking from each: color, type, spacing, and component behavior.

Web app, dashboard, and mobile are different

A dashboard is not a web app with more cards, and a mobile app is not a narrow desktop layout. Dashboards prioritize scanning and comparison. Web apps add navigation, permissions, settings, and long-running tasks. Mobile apps prioritize touch, one-handed use, and short sessions. If you generate a mobile screen from a desktop prompt, the result will usually be too dense or too sparse in the wrong places.

Generate the same product for each surface and compare the navigation, density, and states. Stitch variants can help you explore those differences, but the prompt still has to name the surface.

A repeatable AI UI workflow

Step 1: Generate 2–3 directions

Keep the product context and page goal fixed. Vary only the layout or visual direction. This gives you comparable options instead of random screens.

Step 2: Critique and refine

Review hierarchy, spacing, contrast, component count, and missing states. Then ask for a targeted change: "Keep the layout and increase the table density; add a clear empty state." Avoid restarting from zero.

Step 3: Unify the system

Once a direction works, extract the colors, type scale, radius, and spacing. Apply the same rules to the next screen. Consistency comes from shared constraints, not from generating every screen in one prompt.

Step 4: Hand off to code

Write the rules into a DESIGN.md file or use the Stitch SDK and CLI to move from design to code. See turn a URL into a design system and the code-to-design workflow. For export details, read the download artifacts reference.

Three prompt examples

SaaS analytics dashboard

Design a desktop SaaS analytics dashboard for a B2B project management tool.
Users: operations leads who check pipeline health every morning.
Primary goal: spot blocked projects and open the right one.
Layout: left sidebar (Home, Projects, Reports, Settings), top bar with search and avatar, main content grid.
Components: four KPI cards, a line chart, a stacked bar chart, and a project table with status and owner.
Data: include loading, empty, and error states for the table.
Style: Linear-inspired dark interface, near-black surfaces, one indigo accent, tight typography.
Constraints: 1440px desktop first, responsive down to 1024px; WCAG AA contrast.

Fintech onboarding

Design a three-step onboarding flow for a personal finance app.
Users: first-time savers who want to set a monthly budget.
Primary goal: finish setup and see a personalized budget.
Layout: progress indicator, one question per step, primary button at the bottom.
Components: goal selector, income input, spending category chips, summary card.
Data: show validation errors and a final confirmation state.
Style: Stripe-inspired clarity, white canvas, restrained blue accent, generous spacing.
Constraints: mobile web first; keyboard accessible; no more than five choices per step.

AI chat web app

Design a web app for an AI research assistant.
Users: analysts who need to compare sources and save findings.
Primary goal: ask a question, review cited answers, and save a finding.
Layout: left conversation list, center chat, right source panel.
Components: message thread, citation cards, source preview, save button.
Data: show streaming, empty, and error states for answers.
Style: calm editorial interface with warm neutrals and a single accent.
Constraints: 1280px desktop; readable line length; citations must remain visible.

Common mistakes and a QA checklist

Common mistakes:

• putting three primary actions on one screen;
• using style adjectives without layout or content rules;
• forgetting empty, loading, error, and permission states;
• copying a reference brand instead of extracting its constraints;
• generating every screen in isolation and losing consistency.

Before you call a screen done, check:

• one clear primary action;
• a navigation model that matches the surface;
• 4–6 core components with a clear hierarchy;
• empty, loading, error, and success states;
• readable contrast and type sizes;
• a responsive plan for the next breakpoint;
• reusable colors, type, spacing, and radius.

FAQ

What is the difference between AI UI design and traditional UI design?

Traditional UI design usually starts with a blank canvas and a design system. AI UI design starts with a description and a set of constraints. The craft moves from drawing every element to defining the rules, reviewing the output, and refining the system.

Can Google Stitch generate production code?

Stitch can produce design references and code-oriented outputs, but you should review the result before shipping it. Treat generated code as a starting point, then apply your own architecture, accessibility, and testing standards.

How do I keep multiple screens consistent?

Write a shared prompt prefix with product context, style rules, and constraints. Reuse the same tokens and component vocabulary for every screen. When a screen drifts, fix the constraint rather than prompting around it.

Next steps

If you are designing a web app, continue with the Google Stitch Web App Design Guide. Browse the gallery, try the editor, or follow the tutorials for a structured practice path.