๐ UPDATE: Antigravity 2.0 removed extensions including Claude Code. Use VS Code instead โ everything in this video still applies (itโs identical to Antigravity): https://code.visualstudio.com/
๐ COMMUNITY: https://www.skool.com/automatable/about
HiggsField: https://shorturl.at/IzvHY
๐ FREE BLUEPRINT
https://www.skool.com/automatable-free/classroom/6ca29126?md=64c70919c7fe4e38a209e1feab09b6d3
Find every single one of my free YouTube blueprints here: https://www.skool.com/automatable-free/about
๐ 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 prototype
5:37 โ The exact prompt to generate a 5-page website
7:00 โ Using a Dribbble screenshot for page structure
8:02 โ First look at the generated design
9:22 โ Handing off from Claude Design to Claude Code
10:21 โ Antigravity + Claude Code crash course
11:52 โ The CLAUDE.md file (your senior designer instructions)
13:09 โ Installing the front-end design plugin
13:41 โ Building the live site with Next.js + Tailwind
15:15 โ 60-second web design crash course (HTML, CSS, JS, ShadCN)
17:01 โ Layout fundamentals: direction, columns, width, rhythm, padding, alignment
20:49 โ Editing the layout (asymmetrical splits + breathing room)
23:00 โ Typography (heading, body, caption, fonts, decoration)
26:27 โ Visuals: icons, illustrations, royalty-free photos (Pixabay)
30:00 โ The expensive-feeling layer: backgrounds (gradients, noise, blobs, glass)
33:27 โ Borders, shadows, and border radius
36:00 โ Color palettes (and how to build cohesive ones)
37:31 โ Hover and focus states (the hidden polish layer)
41:18 โ Navbars: sticky, frosted, dropdowns, mobile hamburger
44:58 โ Light/dark mode toggle (the underrated banger)
46:57 โ Motion graphics (scroll-in, auto-loops, counting numbers)
49:51 โ 3D graphics with Three.js and Spline
55:19 โ Adding AI video with Higgsfield + MCP
59:32 โ Optimizing for desktop, tablet, and mobile
1:01:47 โ Deploying live with GitHub + Vercel
1:05:24 โ Free resources + how I can help you build this
๐ฃ SOCIAL MEDIA
โข Instagram โ https://instagram.com/jono_catliff
โข TikTok โ https://www.tiktok.com/@jonocatliff
โข LinkedIn โ https://www.linkedin.com/in/jonocatliff/
โข X โ https://twitter.com/@jonocatliff
๐บ RELATED VIDEOS
โข Full crash course on Claude Code โ https://youtu.be/Q_OJ26E5_74
โข Full crash course on Claude CoWork โhttps://youtu.be/DHGFV6BqF-A
โข Full crash course on Claude Code SEO โ https://youtu.be/4IyJm1i__ag
๐ฏ 1:1 CONSULTING
Book a time โ https://jonocatliff.com/consultation
๐ AUTOMATION AGENCY
Get help with your business โ https://www.automatable.co
๐ LINKS (some of these make me money โ thanks in advance!)
โข n8n โ https://jonocatliff.com/n8n
โข Make.com โ https://jonocatliff.com/make
โข Go High Level โ https://jonocatliff.com/gohighlevel
โข Apify โ https://jonocatliff.com/apify
โข Skool โ https://jonocatliff.com/skool
โข Zapier โ https://jonocatliff.com/zapier
โข PandaDoc โ https://jonocatliff.com/pandadoc
โข Apollo โ https://jonocatliff.com/apollo
โข ManyChat โ https://jonocatliff.com/manychat
โข Vapi โ https://jonocatliff.com/vapi
โข PhantomBuster โ https://jonocatliff.com/phantombuster
โข ClickUp โ https://jonocatliff.com/clickup
โข ElevenLabs โ https://jonocatliff.com/elevenlabs
โข Upwork โ https://jonocatliff.com/upwork
โข Instantly.ai โ https://jonocatliff.com/instantly
โข Airtable โ https://jonocatliff.com/airtable
๐ ABOUT ME
Hey everyone, my name is Jono. I run a 7-figure service business that offers DJ, photo, video services (#1 largest in Canada), and spent years figuring out how to automate every part of it (and hired the roles that I couldnโt). Conservatively, I used to work 80+ hours per week, before sunrise till long after sunset; missing gatherings, family events and everything in between. Through automation though, I was able to replace my job. My goal is to help share what worked for me, in a dream of helping others find true success with their passion.
Please subscribe, like and comment below if you have any questions! Thank you ๐
#claudecode #webdesign #aiwebdesign #aiautomation #buildwithai
