Google just released a major 2.0 update to Stitch, their AI design-to-code tool. The biggest new feature is design system import — you can now point Stitch at any live website (like Stripe, Apple, or any site with a clean design), and it will automatically extract the colors, typography, borders, shadows, and spacing into a reusable design system.
Then you apply that design system to any UI you generate inside Stitch, and it produces real, interactive, production-ready code using HTML and Tailwind CSS.
Watch the Full Walkthrough
Step-by-Step Breakdown
1. Generate a Dashboard from a Text Prompt
Starting with a blank canvas in Stitch, you provide a simple text prompt describing what you want — for example, a modern SaaS analytics dashboard tracking revenue, active users, and churn rate with a sidebar and charts. Stitch uses the Gemini 3.1 Pro model to generate the entire layout natively in code.
2. Import a Design System from Any Website
The generated dashboard looks decent out of the box, but to get that premium Silicon Valley look, you can import a design system from a real website. In this example, we use stripe.com — widely regarded as having one of the cleanest design systems on the web.
In the design systems panel, click Import from Website, paste the URL, and Stitch crawls the live site to extract exact hex colors, corner radiuses, padding values, typography, and visual hierarchy into a custom design system.
3. Apply and Fix with AI Chat
When you apply the imported design system, AI tools aren't always perfect. In this case, Stitch mixed the light-mode Stripe cards with the dark-mode background from the original prompt. But since Stitch works as an AI agent, you can simply tell it what to fix in natural language — and it recalculates the entire layout correctly.
4. Inspect the Design Rule Book
Under the hood, Stitch generates a master design rule book based on the imported website. This document defines exact hex colors, corner radiuses, padding, and visual hierarchy. Designers can hand this directly to developers as a spec document.
5. Create Interactive Prototypes
Stitch doesn't just create static mockups. It spins up a live interactive web app where you can click tabs, interact with the UI, and feel how the application flows — all running on real front-end code.
6. Export to Google AI Studio
For developers, the generated HTML and Tailwind CSS is completely production-ready. You can view the raw code in the browser, or export the entire project directly into Google AI Studio where you can hook up a backend, connect a database, and turn the front-end into a fully functional product.
Key Takeaways
- Stitch 2.0 can import design systems from any live website URL
- It extracts colors, typography, spacing, and visual hierarchy automatically
- Generated code uses HTML + Tailwind CSS and is production-ready
- Interactive prototypes let you test the UI before building the backend
- Direct export to Google AI Studio for full-stack development
- Stitch is currently free during the beta period
Video Chapters
- 0:00 — Intro: What is Google Stitch 2.0?
- 0:29 — Generating a SaaS dashboard from a text prompt
- 0:50 — First result: dark mode dashboard
- 1:01 — Importing Stripe's design system from their live URL
- 1:38 — Applying the design system (and the glitch)
- 2:00 — Fixing the dark/light mode mix with AI chat
- 2:20 — Final result: pixel-perfect Stripe-themed dashboard
- 2:34 — How the design rule book works under the hood
- 2:58 — Creating a live interactive prototype
- 3:13 — Viewing production-ready HTML + Tailwind CSS
- 3:24 — Exporting to Google AI Studio for backend integration
- 3:41 — Will AI replace designers?
