Claude Code Paired With Google Stitch 2.0 Redesigns Vibe-Coded Apps
Prajwal Tomar argues that generic AI-built app UIs are a workflow problem and describes using Google Stitch 2.0 with Claude Code via MCP to generate a design system and redesign a client app in under an hour.
Original post · 11 min read
I've been saying this for a while now. If your app looks like AI slop, that's not an AI problem. That's a workflow problem.
Most builders are stuck in the same cycle. You build something functional with AI. The features work. The logic is solid. But the UI looks generic and you know it. Your users know it too. And the moment someone lands on your product, they make a judgment in about two seconds.
The old fix was to hire a designer. Spend $3,000 to $10,000. Wait weeks for Figma files. Then spend even more time getting someone to actually implement those designs into your codebase. By the time the design was live, you'd already lost momentum and burned through cash you didn't need to spend.
That entire process is now optional.
I was able to take a client project that looked like every other vibe coded app and completely redesign it in under an hour. Professional typography. Consistent color system. A design language that actually holds together across every screen.
This is the workflow I'm running now. And I think every builder shipping with AI needs to understand how it works.
Why Stitch 2.0 Is Actually Different
I've tested a lot of AI design tools over the past year. Most of them generate something that looks decent on the first screen and then falls apart the moment you try to build a second page. Consistency is the problem. It always has been.
Stitch 2.0 solves this in a way nothing else has.
It's an AI native canvas. You can feed it screenshots of your existing app, drop in inspiration images from places like Dribbble or 21st.dev, or even paste a URL and let it reverse engineer the design of any website you like. It takes those creative seeds and generates full UI designs with multiple variants you can pick from.
But the real unlock is not the designs themselves. It's what Stitch builds in the background while it's designing.
A complete design system.
Typography scales covering display, headline, label, title, and body fonts. A primary, secondary, and tertiary color palette that's auto generated to be complementary. Color scales for every shade. Component rules and patterns. Elevation and depth specs. Even dos and don'ts for your design language.
All of this gets documented automatically in a file called design.md. This is a plain markdown file that captures every single design rule in one place. And this is the file that changes everything when you bring Claude Code into the picture.
How I Actually Use This on Real Projects
Let me walk you through exactly what I do. No theory. Just the workflow.
I start by taking screenshots of whatever I'm redesigning. If it's a client project or something I've been building myself, I screenshot the main screens and drop them directly onto the Stitch canvas. If I'm starting fresh, I'll grab two or three inspiration images from Dribbble instead. You don't need more than that. You're not looking for something to copy. You're looking for a direction.
Then I write one focused prompt. I tell Stitch what the app does, which screens I want redesigned, and the design direction I'm going for. Dark mode, minimal, editorial, whatever fits the product. I also specify font preferences because fonts are honestly the single fastest way to elevate how an app feels. Serif for headings, clean sans serif for body is a combination that works really well for most SaaS products.
Stitch generates multiple variants from that one prompt. This is important. Don't just accept the first output. Look at each variant and pull the best elements from each. The typography from one, the layout from another, the color energy from a third. You're curating, not just accepting.
One thing most people miss about why Stitch produces such strong output is that it generates images first before any code. That means it's not constrained by what HTML and CSS can do. It can imagine anything visually. Then you work backwards from that reference to build it. That's why the designs feel so much more polished than what you get from prompting a coding tool directly.
You can also talk to Stitch via voice now instead of typing. It transcribes your words into prompts automatically. Small feature but genuinely useful when you're deep in a session and want to keep moving fast.
Design.md Is the Real Game Changer
Once you're happy with your designs, go to the right hand panel in Stitch and click on Design Systems. You'll see that Stitch has already created one for you automatically based on everything you've been designing.
Click into it and you'll find the full design system I described earlier. Typography, colors, components, rules, everything documented and organized.
Now click on design.md.
Copy the entire file. Go to your project. Create a new file called design.md in the root directory. Paste it in. Save it.
That file is now the single source of truth for your entire design language.
Here's why this matters … continue on X ↗