What is Google Stitch?

Stitch by Google is an AI-powered UI design tool introduced at Google I/O 2025 and now available through Google Labs. With Google Stitch AI, users can turn text prompts or image inputs into responsive user interfaces and front-end code for web and mobile apps. Built on Google’s Gemini 2.5 models, it replaces its earlier Galileo AI foundation. It supports HTML/CSS export and Figma integration, streamlining the UI/UX design process for developers and designers alike.

In this tutorial, you’ll learn how to design a mobile crypto dashboard screen using the modes in Stitch. Let’s look at how to get started and navigate the interface inside Google Stitch.

Getting started with Google Stitch is fast since it’s a fully web-based tool, all you need is a Google account, no installations or setup required.

Go to the official website of Google Stitch and log in using your Google account.

Before creating a design, Stitch allows you to select directly between Web and Mobile layout modes within the interface.

Stitch offers two distinct working modes tailored to different design workflows:

Standard Mode (Text-to-UI)

Enter a text prompt describing your UI, and Stitch will instantly generate a layout. Powered by Gemini 2.5 Flash, this mode is optimized for speed and supports up to 350 generations per month. It is ideal for quick iterations and basic UI concepts.

Experimental Mode (Sketch-to-UI)

Upload a hand-drawn wireframe or screenshot, and Stitch will interpret it into a high-fidelity layout. This mode runs on Gemini 2.5 Pro and supports up to 50 generations per month, making it perfect for more detailed or visually guided designs.

Now that you know how Stitch works, let’s put it to the test by building a real-world UI project from scratch.

In standard mode, we’ll describe our UI in plain language, and Stitch will use the Gemini 2.5 Flash model to generate a layout and front-end code. The steps we will follow are:

Choose mobile layout and standard mode

Identify the features your crypto app needs

Write a prompt

Review the output

Customize the prompt for better results

Start by selecting the standard mode and switching to mobile layout as shown in the image:

This sets the canvas for a mobile UI built using only a text prompt.

Before jumping into the prompt, let’s map out what we need in the UI and why each element matters. This helps ensure your design isn’t just functional, but it’s also user centered.

UI element Why it’s needed
Top navigation bar   Branding and access to alerts (e.g., price changes, news)  
Portfolio summary card   Gives users a snapshot of their total holdings and performance  
Pie chart   Visual breakdown of portfolio distribution across various cryptocurrencies  
Trending coins carousel   Allows users to quickly scan market movers in a horizontal scroll  
Top movers grid   Highlights biggest gainers and losers, useful for decision-making  
Crypto price chart   Shows historical price trends (e.g., line/bar chart) for selected tokens  
News feed   Offers recent updates and headlines from the crypto market  
Bottom navigation bar   Essential for navigating between app sections like Portfolio, Market, etc.  

Including visual elements like pie charts and price graphs makes your dashboard not just informative, but visually engaging and easier to digest briefly.

Now that we have our components and reasoning in place, let’s convert this into a detailed, structured prompt:

Design a mobile dashboard screen for a cryptocurrency tracking app called CryptoTrack. The screen should have a top navigation bar with the app name on the left and a notification bell on the right. Add a summary card at the top showing total portfolio value and a percentage change. Below that, include a pie chart showing how the portfolio is distributed across Bitcoin, Ethereum, and other tokens. Add a horizontal scrollable section for trending cryptocurrencies, with coin icons, names, prices, and color-coded % change (green/red). Below that, create a two-column grid for top gainers and losers. Include a line chart to show the price trend of selected cryptocurrencies over time. Add a news feed section with crypto headlines and thumbnails, and finish with a bottom navigation bar for Home, Portfolio, Market, and Settings. Use a dark theme with rounded corners and modern UI elements.

Copy to clipboard

Copy to clipboard

Paste this prompt into the input box and click “Generate designs”. Stitch will interpret this natural language into a structured mobile layout preview.

Once the design is generated, you will have to check for the presence of all the components you mentioned, such as nav bars, pie charts, cards, charts, and layout structure. Pay attention to the styling (dark theme, spacing, font).

A sample output generated by this prompt is:

Here’s what we observed from our initial test run:

The portfolio summary card and Trending coins section were generated successfully

Top movers appeared in a grid format

Dark theme with modern, rounded design was applied

But also:

The app name was centered, not aligned to the left as requested

Instead of a pie chart, Stitch generated a bar graph for portfolio distribution

The news feed section included dummy headlines, but the layout could use refinement

Some icons (like notification bell or nav bar icons) may appear as placeholders

These differences are common due to the current limitations of AI-generated UI design. But they’re also easily fixable through prompt tweaking or refining the layout in Figma after exporting.

To improve the accuracy of the UI output, you can revise your prompt with more targeted language. Here are some examples based on the feedback earlier:

Fix alignment: “Place the app name ‘CryptoTrack’ on the left side of the top navigation bar, not centered.”

Specify chart type: “Use a circular pie chart (not bar graph) to show portfolio breakdown by crypto asset.”

Clarify icon use “Add bottom nav icons for Home, Portfolio, Market, and Settings.”

Improve news feed: “Display the news section with thumbnail images on the left and crypto headlines on the right in a list format.”

Styling tweaks: “Apply a slightly transparent background to the nav bar and use subtle neon accent colors for trending coins.”

Each time you adjust the prompt, Stitch regenerates the design, helping you iterate and evolve your layout without redrawing it manually.

Experimental mode lets us upload wireframes or sketches to generate UI layouts. Powered by Gemini 2.5 Pro, it’s ideal for turning rough visuals into polished designs. Here’s a quick overview of the steps we’ll follow:

Choose mobile layout and experimental mode

Upload a wireframe or sketch

Generate the design

Review the output

Inside Stitch, switch to Experimental Mode using the top toggle, and set your layout to Mobile.

This configures the canvas to interpret uploaded images as mobile app interfaces.

For this project, we’ll create a basic wireframe of our crypto dashboard, either drawn on paper or digitally sketched. The layout should include:

A top bar with the app name and a bell icon

A portfolio summary card with a pie chart showing asset distribution

A horizontal scroll section for trending coins

A grid layout for top gainers and losers

A news feed section with thumbnails and headlines

A bottom navigation bar with four icons

A sample wireframe is as follows:

Along with the wireframe, use the prompt:

Generate a mobile crypto dashboard UI based on the uploaded wireframe. Use a dark theme with rounded cards, including charts, news, and navigation sections.

Copy to clipboard

Copy to clipboard

You can scan and upload a hand-drawn sketch or drag in a screenshot or layout from another design tool. The clearer your wireframe, the more accurately Stitch replicates the intended structure.

Once uploaded, Stitch analyzes the layout and renders a detailed UI based on its visual structure. Here’s a sample design generated based on our wireframe:

Once the design is generated, review how well Stitch translated your wireframe into a functional UI. Here’s what we observed in our test:

The overall layout followed the wireframe structure closely

A portfolio card was placed correctly at the top

Trending coins and top movers were displayed as a scroll and grid, as intended

Dark theme and rounded design elements were applied consistently

But,

Some icons and labels were missing or rendered as placeholders

Minor alignment and spacing tweaks were needed in sections like the news feed

These are easy to fix by exporting the design to Figma or revising your wireframe and re-uploading it.

You can move your design into your workflow once you’re happy with the generated UI. There are two primary export options available based on whether you’re a designer, developer, or both:

If you’d like to enhance the UI further, such as by adjusting spacing, updating text, swapping icons, or collaborating with designers, you can move your design directly into Figma.

Click the “Copy to Figma” button located at the top of the generated design.

Open your Figma file, select a frame, and paste using Ctrl+V / Cmd+V.

Note: The “Copy to Figma” feature is only available in Standard Mode as of now. It won’t appear in Experimental Mode.

If you’re ready to start building, you can grab the front-end code for your design.

This feature is available in both standard and experimental modes and offers a useful starting point for building static UIs.

Let’s learn how to write effective prompts to guide Stitch’s UI generation.

A good prompt is like giving clear directions to a designer. Since Stitch works based on natural language, you don’t need to write code or use special syntax, but precision matters. Here are the key components of an effective prompt, along with examples:

Define the purpose of the screen: State what kind of screen you’re designing, homepage, login screen, dashboard, etc., so Stitch knows what layout to expect. Example: “Design a mobile dashboard screen for a cryptocurrency tracking app.”

List core UI components: Mention the key sections or widgets you want to include. Think in terms of UI elements like buttons, cards, charts, or nav bars.

Example: “Include a top navigation bar, portfolio summary card, trending crypto slider, and a bottom navigation menu.”

Mention layout and structure: Provide cues on how elements should be arranged on the screen. Use layout words like “grid”, “stacked”, “scrollable”, or “centered”. Example: “Use a horizontal scroll for trending coins and a 2-column grid for top movers.”

Specify style and theme: Stitch understands visual design cues like color schemes, corner radius, and modern vs. minimalistic styles. Example: “Use a dark theme with rounded cards, and modern fonts for a clean look.”

Include dynamic or data-driven content: If your design depends on content like prices, status changes, or avatars, mention that clearly, even dummy data helps. Example: “Each card should show the coin name, icon, current price, and percentage change in green or red.”

Add optional branding details: If you want to name your app or give it a personal touch, include the brand name, logo placement, or specific colors.

Example: “App name ‘CryptoTrack’ should appear in the top bar, with a notification bell icon on the right.”

Next, let’s explore the key features that make Google Stitch stand out.

Whether you’re building a landing page or a mobile dashboard, the features of Google Stitch make the process feel less like coding and more like conversation. Here are some of them:

Smart design capabilities: Generate UI for web and mobile, explore multiple layout variants, customize themes, and refine designs through interactive chat and history tracking.

Seamless export and integration: Designs can be pasted directly into Figma or exported as HTML/CSS code, making handoff between design and development smooth.

Accessible and evolving: Stitch is a fully web-based platform, requiring only a Google account to use. It’s currently free via Google Labs with no usage cap announced.

Before you fully rely on Stitch for production-ready design, it’s important to understand its current limitations.

While powerful, Stitch is still evolving and comes with some early-stage constraints you should be aware of:

Experimental product: Still in active development as part of Google Labs

No interactivity: Designs are static, without functional logic or live components

Prompt sensitivity: Standard Mode relies heavily on how clearly prompts are written

Sketch limitations: Experimental mode may misread messy or ambiguous wireframes

Figma export not universal: Currently available only in Standard Mode

Google Stitch is a promising step toward bridging the gap between ideas and execution in UI/UX design. Stitch empowers designers and developers to generate polished, responsive UIs with minimal effort. With built-in code export and Figma integration, it fits seamlessly into both creative and technical workflows, even if it’s still rough around the edges.

If you’re interested in leveling up your frontend skills and understanding the foundations behind tools like Stitch, check out Codecademy’s Build a Website with HTML, CSS, and GitHub Pages course.

Google Stitch is an AI-powered UI design tool developed by Google Labs that transforms text prompts or uploaded wireframes into mobile and web user interface designs, complete with front-end code.

Yes, Google Stitch is currently free as part of Google Labs. There’s no paid plan or usage fee, but generation limits apply depending on the mode used.

Google Stitch offers Standard Mode (for text-based prompts) and Experimental Mode (for image or wireframe uploads). Standard Mode is faster and supports Figma export, while Experimental Mode provides more refined layouts.

Yes, but only in Standard Mode. You can use the “Copy to Figma” button to paste the generated UI directly into a Figma file for further editing.

Stitch generates HTML and CSS code for the visual layout of your design. While it’s not fully interactive, the code serves as a solid starting point for development.