Back to articles

Stitch Masterclass for Beginners (full tutorial)

Jesse Pujji · @jspujji · Mar 20

View original post
Stitch Masterclass for Beginners (full tutorial) cover

Google’s Stitch just made manual design optional.

I've seen designers spend 6 hours in Figma on something Stitch does in 20 minutes.

Most design teams don't know this tool exists yet.

That's the window.

Here's everything you need to know.

*BTW: If you’re non-technical and need AI-powered designers, this is the resources I train my talent in. Same is true for marketers, paid, social, etc.*

*Join the waitlist for the talent here:*

https://tinyurl.com/4r6zyep2

Design is never a bottleneck

But ask any marketing team what their week looks like…

Brief comes in, opening Figma, building from scratch: wireframe, component, layout, color pass, copy pass, revision, another revision with notes.

Six hours later, it’s ready for a stakeholder.

It’s not right. They want 3 more variations. Back to square one.

The process hasn't fundamentally changed in a decade.

But the bottleneck was never creativity. It was always the gap between the idea and the first thing on screen.

Here’s how Stitch just fundamentally changed that.

What Stitch Actually Is:

Stitch is an AI-powered mobile and web application design tool.

It’s actually not new; Stitch launched at Google I/O in May 2025 as a Google Labs experiment.

But this month it got a major update.

Here’s why you should be talking about it now:

Stitch’s new update introduced an AI-native infinite canvas, a redesigned design agent, voice interaction, and an Agent Manager that lets multiple agents work on parallel design explorations simultaneously.

The new multimodal, AI-native design environment powered by Gemini is capable of generating production-ready UI components, applying adaptive design systems, and executing multi-agent reasoning across concurrent screen states.

Full MCP server integration connects it directly to tools like Cursor, Gemini CLI, and AI Studio.

Sub-agents can be working on different screens at the same time while you're directing the overall vision.

In plain English:

You describe the website you want, and Stitch builds it.

You talk to it, and it updates in real time.

When you’re done, you export to Figma or download the code.

Best part? It’s free. All you need is a Gmail.

Here’s how to start using Stitch

1/ Get access

Go to stitch.withgoogle.com

2/ Log-in

Sign in with your Google account

3/ Launch your first project

New Project → Design → Select your interface

And you’re already designing. You’re in.

Here’s what you’ll need to know:

2 things you can build

First question Stitch will ask you:

Mobile App

Web App

Your selection determines the quality of your design.

Choosing either will affect how Stitch generates a site; it optimizes its design for the medium it’s made for (hierarchy, type, images).

Don’t worry: it’s possible to turn a web app → mobile app.

Ask yourself: where will most people experience this?

If you’re running an e-commerce, mobile app is where you should be living.

If you’re creating a B2B pitch deck, stick with web app.

You’ll be able to translate either view, but designs will be higher fidelity when you choose where your audience is living.

How to Prompt a 10/10 Site

Prompting is where most people get stuck with a 6/10 site.

The output is only as good as the direction you give it.

Here are the best practices:

Step 1: Start High-Level, Then Get Detailed

Start with a general idea. Don't overthink it.

Then describe core functionalities for a better starting point:

I prefer to prompt with a template:

Idea: What is the main purpose of this site? What’s the ideal call-to-action?

Theme: What is the aesthetic of the website?

Content: What does your site need to get people to do your desired action?

Here’s an example I recently used for my company, GrowthAssistant:

This is like your designer brief.

The more complete it is on the first try, the less back-and-forth on the first pass.

Step 2: Set the Vibe With Adjectives

Use adjectives to define the app's feel.

This directly influences colors, fonts, and imagery.

EX:

Step 3: Refine Screen by Screen

You’ll get the application you’re imagining with patient, specific, step-by-step instructions.

That requires focus on one “screen” per prompt.

*Be specific — tell Stitch what to change and how:*

*Focus on a specific screen or feature:*

*Describe desired imagery:*

Good news: Stitch can perform multiple prompts at the same time, with multiple sub-agents, meaning you can rapidly iterate multiple screens at a time without ever waiting.

Step 4: Control the Theme

Here are some examples:

*Colors, specific or mood-based:*

*Fonts and borders:*

*Combined theme prompt:*

That’s the basic order of operations. It will deliver a grade A website.

Here’s how to make it an A+ (the secret is these hidden tools…)

Stitch’s Best Tool is Hidden

Stitch isn’t one AI.

Its a suite of specialized design engines.

But that’s hidden within this menu.

Here’s when to use each one:

For a complicated production site → Thinking with 3.1 Pro:

This is for complex dashboards, landing pages, and what you want to be ready to send.

Warning: this will take more time and bleed credits. It’s reasoning through your design.

I rarely tap this feature, but sometimes, the wait is worth it.

For leveling up an interface → Redesign (Nano Banana Pro)

Using Nano Banana’s understanding of aesthetics, this can take a specific visual style and apply it to elevate an existing interface.

Here’s how I’ve seen my team use it:

– Adjusting layout (bento grid, swiss style, editorial)

– Texture (Glassmorphism, Claymorphism, Grainy/Noise)

– Color (Duotone, Monochromatic)

For rapid wireframing and Figma export → “Fast” mode

When speed matters more than refinement.

This is what your best designers should be using to skip building layouts and jump into refinement.

How Google is coming for Figma (What are Variations?)

Rapid creative iteration is 2026’s biggest moat.

Stitch calls this rapid iteration feature “variations.”

Variations allow you to generate five designs and select winners, or combine powerful assets.

Most designers already do this:

Over 6-8 hours, they create multiple versions of the same content, then pressure-test them with stakeholders.

Stitch makes this process take 5 minutes.

Here's how:

1. Generate 2–5 variations at once with a broad directional prompt

1. Pick the option that's closest to your vision

1. Lower the Creative Range to "Refined"

1. Ask Stitch to bring in the color scheme or layout element you liked from one of the others

When to use Variations:

  • You're stuck and don't know what to change next
  • You want to show a client three directions, not one
  • You're pivoting the entire vibe in one session

Controlling the range

Sometimes you want to really challenge your initial design. Other times, you only need a slight variation.

Use the slider feature to determine how many iterations you’d like:

Refined (Low): Keeps structure, but changes fonts, spacing, and colors.

Creative (High): Full overhaul: layout, imagery, theme.

4 Stitch Tricks I’ve Yet to See In Tutorials

These features exist… so why haven’t I seen anyone talk about them?

Here are 3 of my favorites:

Instant Prototype

Imagine creating a prototype in Figma, without wireframing… anything.

Based on a screen, Stitch automatically creates the next logical screen based on the expected user flow.

Get inspiration or create the entire site in seconds.

Live Mode

Pressing this, next to the input button, starts something that shocked me.

Simply talk to Stitch, and a site is generated based on what you say.

Import Your Brand Kit from Your Own Website

Extract your full design system, even if all you have is a website home page.

Here’s how:

1/ “Design Systems” Icon → “+” button → Import from website

2/ Copy and paste your URL.

3/ Stitch will scrape your website and pull colors, fonts (if available on Google), and component styles. Keeps things on brand, even if you didn’t design the brand.

Export to Figma

This had my jaw on the floor.

Simply change the export to a Figma file, and you can copy and paste.

Stitch won’t get my team to delete Figma.

But it will take my team off of Figma by hours, with editable layers and Auto Layout intact.

Hand off to your developer or polish it yourself.

3 Use Cases My Team’s Using

1/ Client Pitch Decks

The problem: Slide decks were boring, even the ones generated in seconds by Gemini. Clients expect to be wowed; these kept us looking like everyone else’s. We tried Lovable-built sites, but it’s for quick prompting. Not iterative design.

The prompt:

What Stitch gives you: A designed, on-brand deck mockup with real visual hierarchy. First draft done in 15 minutes. Take refinement into Figma from there.

2/ Landing Pages

The problem: A new campaign means a new landing page. My team spent 3-4 hours developing each of these, then getting notes that would require 2 more hours of revisions. Weekly.

The prompt:

What Stitch gives you: A designed, on-brand landing page first draft in under 20 minutes. The page goes live the same day the brief is finalized.

3/ Campaign dashboards

The problem: Weekly metrics reports for our internal teams were built the same way every week: a Google Sheet with a screenshot. The data was right. The presentation was wrong.

The prompt:

What Stitch gives you: A designed, visual report format that communicates the data instead of just displaying it. Export to Figma, hand it to the developer, done.

I can imagine 100s of other use cases for this.

The ones who move first (and have the team built out for it) will thrive.

TL;DR - What designers need to know:

Stitch is the fastest to go from idea to high-fidelity design that exists right now.

You don't need a designer to get started. You need a prompt.

Figma is still great. Use it to finish. Use Stitch to start.

The teams that figure this out in Q1 are going to look like they doubled their design capacity by Q3. That's the window. It's open right now.

Describe the thing you've been putting off designing.

See what comes back in 60 seconds.

*And if you want AI-trained talent who already *know* how to operate this system: designers and marketers trained in Stitch, Cowork, and the full AI-native workflow, I'm placing them NOW.*

*Trusted by HubSpot, Notion, and Reddit.*

https://tinyurl.com/4r6zyep2