Uploaded March 2026 | Updated September 2026, 3 weeks ago
In this video you will learn how to combine Claude Code with Google Stitch to design and build beautiful UIs for your web applications.
🌐 Bright Data (Sponsor)
Use Code LEONVANZYL To Get $20 Free Credits: brdta.com/leonvanzyl
🚀 Join 700+ builders learning AI automation & agentic coding: skool.com/agentic-labs
Google Stitch is a free AI UI design tool from Google that generates professional user interface designs using Gemini models. You will learn how to set up the Stitch MCP server in Claude Code, create projects and generate designs directly from the terminal, pull down a reusable design system, create a UI review sub agent to enforce design consistency, and recreate the Stitch pages in your Next.js project using the HTML download method for pixel perfect results.
⏰ TIMESTAMPS:
00:00 Google Stitch and Claude Code Introduction
00:33 What is Google Stitch
01:05 Why Gemini models are better for UI design
01:29 Generating designs in Stitch
02:48 Instant prototype preview in Stitch
03:04 Why use Stitch over frontend design skills
04:14 Design first workflow explained
04:48 Setting up the Stitch MCP server in Claude Code
06:01 Creating the MCP config and API key
07:06 Claude Code creating projects on Stitch
08:00 Building the Cloud Fit demo app design
08:51 Bright Data sponsor segment
10:28 Iterating designs via Claude Code and Stitch
11:04 Pulling down the design system
11:55 Adding design system to Claude.md
12:23 Creating a UI review sub agent
13:36 Implementing the design system in Next.js
15:08 Recreating Stitch pages in the codebase
16:46 Pro tip for downloading HTML from Stitch
17:28 Claude Code building the final Next.js app
18:19 Fastest way to iterate on UI designs
Business & sponsorship enquiries: leon@cognaitiv.ai
#claudecode #vibecoding #agenticcoding
In this video you will learn how to combine Claude Code with Google Stitch to design and build beautiful UIs for your web applications.
🌐 Bright Data (Sponsor)
Use Code LEONVANZYL To Get $20 Free Credits: brdta.com/leonvanzyl
🚀 Join 700+ builders learning AI automation & agentic coding: skool.com/agentic-labs
Google Stitch is a free AI UI design tool from Google that generates professional user interface designs using Gemini models. You will learn how to set up the Stitch MCP server in Claude Code, create projects and generate designs directly from the terminal, pull down a reusable design system, create a UI review sub agent to enforce design consistency, and recreate the Stitch pages in your Next.js project using the HTML download method for pixel perfect results.
⏰ TIMESTAMPS:
00:00 Google Stitch and Claude Code Introduction
00:33 What is Google Stitch
01:05 Why Gemini models are better for UI design
01:29 Generating designs in Stitch
02:48 Instant prototype preview in Stitch
03:04 Why use Stitch over frontend design skills
04:14 Design first workflow explained
04:48 Setting up the Stitch MCP server in Claude Code
06:01 Creating the MCP config and API key
07:06 Claude Code creating projects on Stitch
08:00 Building the Cloud Fit demo app design
08:51 Bright Data sponsor segment
10:28 Iterating designs via Claude Code and Stitch
11:04 Pulling down the design system
11:55 Adding design system to Claude.md
12:23 Creating a UI review sub agent
13:36 Implementing the design system in Next.js
15:08 Recreating Stitch pages in the codebase
16:46 Pro tip for downloading HTML from Stitch
17:28 Claude Code building the final Next.js app
18:19 Fastest way to iterate on UI designs
Business & sponsorship enquiries: leon@cognaitiv.ai
#claudecode #vibecoding #agenticcoding
