A practical step-by-step guide to designing websites with Google Stitch 2.0. Go from a text prompt to a full design system — no design skills required.
Google Stitch 2.0 is an AI-native design tool built on Gemini. It lets you generate full web and app designs from text prompts, iterate with an AI design agent, and export production-ready code or Figma files.
This guide walks you through every step of the workflow with practical, copy-paste prompts you can use immediately. All examples use Japanese businesses and websites so you can follow along with something relevant to your market.
You don't need to be a designer. If you can describe what you want in words, Stitch can build it. And with the DRIP workflow at the end, you can go from design to deployed website without touching code yourself.
Go to stitch.withgoogle.com, sign in with your Google account, and click New project. You'll land on the AI-native infinite canvas — a blank workspace where all your designs will live. Think of it like an infinite whiteboard that you control with text prompts.
In the top toolbar, select your AI model. Gemini 3.0 Flash is fast with more generations per month — good for exploring ideas quickly. Gemini 3.0 Pro produces higher quality results but with fewer generations — use it when you need polish and detail.
Start with Flash for brainstorming. Switch to Pro when you're ready to refine your final design.
Click Modify → Design System. You have three options:
Configure your theme (palette, fonts) and write a DESIGN.md file with your brand rules. This file becomes the single source of truth for every screen Stitch generates.
使う場面：When you want to base your design on a site you like.
Extract the design system from https://note.com and adapt it for a Tokyo-based AI consulting firm's website. Keep the clean, content-first layout but use a more professional color palette — navy (#1B2A4A), white, and a warm accent gold (#C4A35A). Typography: Noto Sans JP for body, Noto Serif JP for headlines.
使う場面：When you want to define your own brand from zero.
Brand: TokyoAI Labs — AI training and consulting for Japanese enterprises. Palette: deep navy (#1B2A4A), clean white (#FFFFFF), warm gold accent (#C4A35A), light grey (#F5F5F5). Typography: Noto Serif JP for headlines (bold, 36-48px), Noto Sans JP for body (regular, 16px). Tone: professional but approachable, no startup jargon. Spacing: generous, editorial. Sections separated by whitespace, not lines. Buttons: slightly rounded (4px radius), navy fill with white text, gold hover state. Cards: subtle shadow, 8px radius, white background. Navigation: clean horizontal nav, logo left, CTA button right.
In the prompt bar, describe a full flow — not just one page. Stitch can generate up to 5 connected screens in a single prompt. The more specific you are, the better the results.
使う場面：When you need a complete website with multiple pages.
Generate 5 screens for TokyoAI Labs: (1) landing page with hero section, client logo bar, 3-column service cards, testimonials, and contact CTA, (2) services detail page with pricing table for 3 tiers, (3) contact form with company info sidebar, (4) about page with team grid and company timeline, (5) blog listing page with featured article hero and card grid.
使う場面：When you want one polished page with lots of detail.
Landing page for a Japanese AI training company. Hero with bold serif headline in Japanese, subtitle explaining B2B AI training services, and a prominent CTA button. Below: logo bar of 6 enterprise clients, 3-column service cards with icons, testimonial section with photo and quote, FAQ accordion, and a dark footer with contact details. Professional, editorial feel with generous whitespace.
使う場面：When you have a screenshot of a design you like. Drop the image on the canvas first.
[drop screenshot on canvas] Match this layout and visual style but adapt it for a Japanese AI consulting company. Replace all English text with Japanese placeholder content. Keep the same grid structure and spacing rhythm. Use my DESIGN.md color palette and typography.
Select any screen. The top toolbar gives you three options:
Use the Agent Manager (side panel) to run multiple design directions in parallel.
使う場面：When you want to change a specific element.
Make the CTA button sticky on scroll and change the button text to 'お問い合わせはこちら'. Increase the button size to 48px height with 24px horizontal padding.
使う場面：When you want to change a specific area. Circle it first in Annotate mode.
Replace this section with a split layout: headline and subtitle on the left, a looping product demo video placeholder on the right. Keep the CTA below the headline.
使う場面：When you want to explore different directions for the same section.
Give me 3 hero variations for this page: (1) minimalist with lots of whitespace and centered text, (2) bold editorial with an oversized serif headline and background image, (3) corporate professional with a diagonal split and photo.
使う場面：When you want to explore completely different design directions at once.
Track A: dark mode version of the full site with navy backgrounds and light text. Track B: light editorial version with cream backgrounds and warm tones. Track C: modern minimal version with black and white only, accent color on CTAs only.
Right-click any screen → Instant Prototype. Hit Play to click through the flow. Stitch can imagine the next screen based on where you click, automatically filling in gaps in your flow. Preview on mobile via a shareable link.
If nav bars, footers, or components drift between screens, select the inconsistent ones and regenerate them referencing your design system.
使う場面：When screens look different from each other and need to match.
Regenerate these screens matching DESIGN.md exactly. Use the same top navigation, footer layout, button styles, and card components as screen 1. Ensure consistent spacing and typography across all pages.
Open the Export menu. Options include:
AI × ビジネス日本語
業務の現場で即使えるAI活用法を、実践的なプロンプトとともに届けている。 敬語メール、議事録、報告書、資料作成——日々の仕事で効くスキルに特化。