---

Step 1: Gather inspiration on Pinterest

Before you start designing, collect visual inspiration on Pinterest:

• Create a board for your project (e.g. "Ceramic shop design")
• Search for terms like "modern ecommerce design", "minimalist app UI", or "warm earthy colour palette"
• Pin everything you like: layouts, colour palettes, typography, product shots, navigation patterns
• Take screenshots of your favourite pins or whole boards — you'll share these with Stitch later

Tip: Watch for recurring patterns in your pins. If you keep pinning warm earth tones and minimalist layouts, that's a clear signal of your design style.

Step 2: Generate a design with Google Stitch 2.0

Stitch 2.0 is Google's AI-powered design tool that builds UI designs via chat.

Here's how:

1. Open Stitch 2.0 at stitch.withgoogle.com
2. Start a new chat and describe your project, e.g.: "I want to design an online shop for handmade ceramics. The style should be warm, minimalist, and modern."
3. Upload your Pinterest screenshots — Stitch understands images and can derive the style, colours, and layout from them
4. Stitch generates a first design as a preview

Step 3: Iterate in chat — until it fits

The clever thing about Stitch is the chat-based workflow. Refine your design step by step:

• "Make the navbar slimmer"
• "Use a warmer palette, more terracotta"
• "Add a search bar at the top"
• "Show products in a 3-column grid"
• "The hero should have a large image with a text overlay"

Stitch updates the design after every instruction in real time. Keep chatting until the result matches your vision.

Tip: Be specific. Instead of "make it nicer", try "increase the whitespace between product cards and use a sans-serif".

Step 4: Export the code via "Export to Clipboard"

Once you're happy with the design:

1. Click the "Export to Clipboard" button in Stitch (or the equivalent code-export action)
2. Stitch copies the complete HTML/CSS/Tailwind code of your design to the clipboard
3. The code is a single HTML file with inline Tailwind CSS — ready to run in any browser

Step 5: Build the site with Claude Code

Now the fun part — you turn the Stitch design into a real, working site.

How:

1. Open Claude Code (in the terminal or the desktop app)
2. Paste the Stitch code and use the prompt below:

The prompt for Claude Code

Here's an HTML design I made with Google Stitch.
Please turn it into a complete, working website.

Requirements:
- Use the design as a visual reference (colours, layout, typography, spacing)
- Implement it as a [React/Next.js/HTML+CSS] project
- Make the layout fully responsive
- Replace the placeholder images with [real images / Unsplash links / placeholders]
- Add real navigation and interactivity
- Structure the code cleanly with components

Here's the Stitch code:

[PASTE STITCH CODE HERE]

Workflow summary

Step	Tool	What happens
1	Pinterest	Gather inspiration, take screenshots
2	Stitch 2.0	Upload screenshots, generate first design
3	Stitch 2.0	Iterate in chat until design fits
4	Stitch 2.0	Copy code via "Export to Clipboard"
5	Claude Code	Paste code + prompt → finished site

Tips for the best results

• The more Pinterest screenshots, the better Stitch understands your style
• Iterate in small steps — one change per chat message leads to better results
• Be specific in the Claude Code prompt: name the framework (React, Next.js, etc.) and any special requirements
• The Stitch code is a starting point — Claude Code can turn it into a production-ready app with routing, state management, and a backend
• If you want to launch the site, connect Claude with Vercel. It's a hosting platform that costs nothing for simple sites. Claude can configure Vercel itself — you just need an account.