---
title: "Claude Code Web Design: 10 Years Covered In 66 Minutes"
source_url: https://youtu.be/2Gda_ZvV1V4
captured_at: 2026-05-23
author: "Jono Catliff"
contributor: "ชิดชนก"
platform: youtube
---
# Claude Code Web Design: 10 Years Covered In 66 Minutes

youtube video by **Jono Catliff**, 66m59s, uploaded 2026-05-19. URL: https://youtu.be/2Gda_ZvV1V4
Tags: claude code, claude code tutorial, claude code web design, build websites with ai, ai website builder, claude design, claude design tutorial, no code website builder, build a website with claude, ai web design, next js tutorial, tailwind tutorial, claude ai tutorial, ai for web designers, ai coding tutorial, vibe coding, build website with ai, antigravity ide, higgsfield ai, spline 3d, vercel depl

## Shared in LINE Note+
- 2026-05-23 23:08 by ชิดชนก

## Description
📌 UPDATE: Antigravity 2.0 removed extensions including Claude Code. Use VS Code instead — everything in this video still applies (it's identical to Antigravity): 

🌍 COMMUNITY: 
HiggsField: 

📝 FREE BLUEPRINT

Find every single one of my free YouTube blueprints here: 

📚 SUMMARY
I just condensed 10 years of web design experience across 50+ websites into one video — so you can build beautiful, production-ready websites using Claude Code without a single line of code knowledge.

In this masterclass, I walk through my exact pipeline: extracting a design system from any site (like Stripe) using Claude Design, generating a 5-page website prototype, handing it off to Claude Code, fine-tuning layouts, typography, hover states, dark mode, 3D graphics with Spline, AI video with Higgsfield, mobile optimization, and deploying live with GitHub + Vercel. Everything you need to ship a real site is here.

⌛ TIMESTAMPS
0:00 - Why most AI websites look like slop
0:30 - Step 1: Pick a style (and steal from Stripe)
0:59 - Extracting a design system with Claude Design
1:59 - Free inspiration sources (Dribbble + Get Design)
3:04 - Reviewing the extracted brand kit
4:21 - Creating a high-fidelity protot