This is really cool: in this video I show you how to combine Claude Code with Google Stitch to design and build beautiful UIs for web apps in minutes—anything from a simple landing page to a more complex dashboard. Stitch is Google’s free AI UI design tool, and the reason it matters is simple: most coding agents (and even Claude in general) aren’t great at producing genuinely good-looking UI. Stitch bakes Gemini models into a design workflow that generates a proper design system first (colors, typography, spacing, rounding), then generates screens in real time, and even gives you an instant prototype you can click through. Then I walk through my full “design first” workflow: setting up the Stitch MCP server inside Claude Code (I use the API key route), getting Claude to create a project and generate screens directly from the terminal, and iterating fast without touching your codebase. Once I’m happy, I pull down the reusable design system into a docs/design-system folder, reference it in Claude.md/agents.md, and I create a UI review sub-agent to enforce consistency (because agents sometimes ignore your rules). Finally, I show the fastest way to recreate Stitch pages in a Next.js app: don’t rely on screenshots—use Stitch tools to download the HTML per page so Claude gets the real layout/animation metadata for pixel-perfect results. If you want the exact same images, I also show how to download all Stitch images into your public folder and wire them into the app.