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.com

Claude Code: https://docs.anthropic.com/en/docs/claude-code

Cursor: https://www.cursor.com

Next.js: https://nextjs.org

Stitch MCP Server Docs: https://stitch.withgoogle.com/docs/mcp

Stitch Skills: https://stitch.withgoogle.com/docs/skills

Timestamps

00:00 – Intro

00:06 – What you'll learn: design systems for client-ready websites

02:04 – Jumping into the screen share

02:25 – The problem: one-shot AI websites look terrible

03:52 – The Stitch workflow result: side-by-side comparison

07:32 – Starting from a vanilla Next.js project

08:50 – What is Google Stitch and how to get started

10:00 – Prompting Stitch with brand details, fonts, and colors

13:00 – Why design systems matter for coding agents

16:00 – Iterating on the homepage before building more pages

17:44 – Sharing Stitch designs with clients for approval

21:23 – Setting up the Stitch MCP server in Claude Code

23:18 – What an MCP server actually is (simple explanation)

25:56 – Pulling the design system into your project

28:47 – Memory files: Claude.md vs Agents.md explained

33:24 – Converting the Stitch design into a working website

35:06 – Installing the Stitch React Components skill

41:11 – When to use this workflow: client work vs personal projects

44:27 – Viewing the finished website vs the Stitch mockup

48:27 – Downloading and converting images to WebP for performance

53:46 – Generating custom AI images with Nano Banana Pro

58:14 – Final result with branded AI-generated hero image

01:00:48 – Key takeaways and wrap-up

FIND ME ON SOCIAL

X/Twitter: https://x.com/coreyganim

Instagram: https://www.instagram.com/coreyganim/

LinkedIn: https://www.linkedin.com/in/coreyganim/

FIND LEON ON SOCIAL

YouTube: https://www.youtube.com/@leonvanzyl