# # 159 Build STUNNING Websites with Claude Code + Google Stitch (full walkthrough)

Page: https://stenobird.com/podcast/build-with-ai-6407453/159-build-stunning-websites-with-claude-code-google-stitch-full-walkthrough
Text version: https://stenobird.com/podcast/build-with-ai-6407453/159-build-stunning-websites-with-claude-code-google-stitch-full-walkthrough.md
Podcast: [Build With AI](https://stenobird.com/podcast/build-with-ai-6407453)
Published: 2026-04-17T04:15:00+00:00
Episode link: https://share.transistor.fm/s/cefa7712
Audio file: https://media.transistor.fm/cefa7712/d0dc98e3.mp3
Processing state: not_requested
JSON: https://stenobird.com/v1/public/podcasts/build-with-ai-6407453/episodes/159-build-stunning-websites-with-claude-code-google-stitch-full-walkthrough
Duration seconds: 3907

## Resource

I sit down with Leon van Zyl, who ran a web design company for 10 years and now teaches over 700 people how to build real applications with coding agents. We walk through his exact workflow for building professional, client-ready websites using Google Stitch for the design system and Claude Code for the build — no coding skills required. Leon shows the difference between a one-shot AI-generated site and what you get when you front-load the design system before touching code. By the end, you'll have a repeatable workflow for going from design concept to finished website — including custom AI images that match your brand.Links Mentioned:Google Stitch: https://stitch.withgoogle.comClaude Code: https://docs.anthropic.com/en/docs/claude-codeCursor: https://www.cursor.comNext.js: https://nextjs.orgStitch MCP Server Docs: https://stitch.withgoogle.com/docs/mcpStitch Skills: https://stitch.withgoogle.com/docs/skillsTimestamps00:00 – Intro00:06 – What you'll learn: design systems for client-ready websites02:04 – Jumping into the screen share02:25 – The problem: one-shot AI websites look terrible03:52 – The Stitch workflow result: side-by-side comparison07:32 – Starting from a vanilla Next.js project08:50 – What is Google Stitch and how to get started10:00 – Prompting Stitch with brand details, fonts, and colors13:00 – Why design systems matter for coding agents16:00 – Iterating on the homepage before building more pages17:44 – Sharing Stitch designs with clients for approval21:23 – Setting up the Stitch MCP server in Claude Code23:18 – What an MCP server actually is (simple explanation)25:56 – Pulling the design system into your project28:47 – Memory files: Claude.md vs Agents.md explained33:24 – Converting the Stitch design into a working website35:06 – Installing the Stitch R…

## Actions

- request_transcript: `POST https://stenobird.com/v1/public/podcasts/build-with-ai-6407453/episodes/159-build-stunning-websites-with-claude-code-google-stitch-full-walkthrough/transcription-requests` — Idempotently request low-priority transcript generation for this episode.
- read_markdown: `GET https://stenobird.com/podcast/build-with-ai-6407453/159-build-stunning-websites-with-claude-code-google-stitch-full-walkthrough.md` — Read the agent-friendly Markdown representation of this episode resource.

A page view does not enqueue transcription. Agents should invoke `request_transcript` explicitly when they need this episode processed.

## Transcript

Full transcripts are not published on public pages unless there is a clear rights basis.