DEV Community

Cover image for How to Use Google Stitch with ChatGPT + Claude to Build a Design System in Minutes
Dhaval Prajapati
Dhaval Prajapati

Posted on • Originally published at dhaval-prajapati.onrender.com

How to Use Google Stitch with ChatGPT + Claude to Build a Design System in Minutes

Most people open Google Stitch and type "a modern website for my startup."

The output is fine. It's also completely generic.

The fix? A 3-AI pipeline — and it takes under 5 minutes.


The Workflow at a Glance

ChatGPT → brainstorm your design brief (pages, tone, audience, layout)

Claude AI → refine it with hex codes, typography specs, WCAG contrast, component descriptions

Google Stitch → paste the refined prompt, get a multi-screen UI prototype + React export

Each tool has one job. Stitch is only as good as the prompt you give it — preparing through two LLMs before rendering is what separates premium output from generic noise.


Why It Works

What you give Stitch What you get
"Dark blue, professional" Generic navy layout
#4f46e5 primary, #0ea5e9 accent, Inter 400/600, 12-col grid, 80px section padding On-brand, production-ready mockup

Claude converts vague descriptions into design-system-precise language. Stitch responds to specificity — dramatically.


Quick Start Prompt (Claude step)

Here's my ChatGPT design brief: [PASTE]

Improve it for Google Stitch:
1. Replace color descriptions with specific hex codes (WCAG AA compliant)
2. Add font family, weights, base size, line-height
3. Specify grid, padding, border-radius values
4. Describe key components precisely
Output as one detailed paragraph.
Enter fullscreen mode Exit fullscreen mode

Pro Tips (Quick)

  • 🔍 Paste a competitor URL into Stitch → extract their design system in 45 seconds
  • 📱 Always specify device target (mobile-first or 1440px desktop)
  • 💾 Save your refined Claude prompt in DESIGN.md for reuse across pages

Want the Full Guide?

This post covers the essentials — but the full article includes:

✅ Complete ChatGPT brainstorming prompt template

✅ Full Claude refinement prompt template

✅ Live multi-screen Scoobies e-commerce prototype (interactive)

✅ Complete Stitch prompt (800+ words, production-ready)

✅ Zoom-Out-Zoom-In technique explained

✅ ChatGPT vs Claude vs Stitch comparison table

✅ From Stitch to live site (React → Vercel pipeline)

✅ 7 FAQ answers

👉 Read the full guide on my blog


By Dhaval Prajapati — AI Web Developer & Digital Marketer, Ahmedabad.

Top comments (0)