UPDATE: Antigravity 2.0 removed expansions consisting of Claude Code. Usage VS Code rather– everything in this video still applies (it corresponds Antigravity): https://code.visualstudio.com/
AREA: https://www.skool.com/automatable/about
HiggsField: https://shorturl.at/IzvHY
FREE BLUEPRINT
https://www.skool.com/automatable-free/classroom/6ca29126?md=64c70919c7fe4e38a209e1feab09b6d3
Locate each and every single among my cost-free YouTube blueprints here: https://www.skool.com/automatable-free/about
RECAP
I simply compressed 10 years of web design experience across 50+ sites into one video clip– so you can develop lovely, production-ready web sites using Claude Code without a solitary line of code expertise.
In this masterclass, I go through my exact pipeline: extracting a style system from any website (like Stripe) utilizing Claude Design, generating a 5-page site model, handing it off to Claude Code, fine-tuning designs, typography, hover states, dark setting, 3D graphics with Spline, AI video clip with Higgsfield, mobile optimization, and releasing real-time with GitHub + Vercel. Everything you need to deliver a genuine site is right here.
⌛ TIMESTAMPS
0:00 – Why most AI internet sites resemble slop
0:30 – Step 1: Pick a design (and swipe from Stripe).
0:59 – Extracting a design system with Claude Design.
1:59 – Free motivation resources (Dribbble + Get Design).
3:04 – Reviewing the drawn out brand name kit.
4:21 – Creating a high-fidelity prototype.
5:37 – The specific punctual to produce a 5-page site.
7:00 – Using a Dribbble screenshot for web page structure.
8:02 – First take a look at the generated style.
9:22 – Handing off from Claude Design to Claude Code.
10:21 – Antigravity + Claude Code collision training course.
11:52 – The CLAUDE.md file (your senior designer instructions).
13:09 – Installing the front-end layout plugin.
13:41 – Building the online website with Next.js + Tailwind.
15:15 – 60-second website design refresher course (HTML, CSS, JS, ShadCN).
17:01 – Layout fundamentals: instructions, columns, size, rhythm, cushioning, placement.
20:49 – Editing the format (unbalanced splits + breathing space).
23:00 – Typography (heading, body, subtitle, font styles, design).
26:27 – Visuals: symbols, images, royalty-free pictures (Pixabay).
30:00 – The expensive-feeling layer: backgrounds (slopes, noise, blobs, glass).
33:27 – Borders, shadows, and border distance.
36:00 – Color palettes (and just how to build cohesive ones).
37:31 – Hover and focus states (the hidden gloss layer).
41:18 – Navbars: sticky, frosted, dropdowns, mobile hamburger.
44:58 – Light/dark setting 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 clip with Higgsfield + MCP.
59:32 – Optimizing for desktop computer, tablet computer, and mobile.
1:01:47 – Deploying cope with GitHub + Vercel.
1:05:24 – Free sources + how I can assist you construct this.
SOCIAL NETWORK.
– Instagram → https://instagram.com/jono_catliff.
– TikTok → https://www.tiktok.com/@jonocatliff.
– LinkedIn → https://www.linkedin.com/in/jonocatliff/.
– X → https://twitter.com/@jonocatliff.
ASSOCIATED VIDEOS.
– Full crash program on Claude Code → https://youtu.be/Q_OJ26E5_74.
– Full refresher course on Claude CoWork → https://youtu.be/DHGFV6BqF-A.
– Full refresher course on Claude Code SEO → https://youtu.be/4IyJm1i__ag.
1:1 CONSULTING.
Book a time → https://jonocatliff.com/consultation.
AUTOMATION AGENCY.
Get assist with your organization → https://www.automatable.co.
WEB LINKS (some of these make me cash – thanks in advancement!).
– 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 everybody, my name is Jono. I run a 7-figure service organization that uses DJ, image, video solutions (# 1 largest in Canada), and invested years finding out just how to automate every component of it (and employed the functions that I could not). Cautiously, I made use of to function 80+ hours per week, prior to sunup till long after sunset; missing out on events, family occasions and whatever in between. With automation however, I was able to change my work. My objective is to aid share what worked for me, in a desire for helping others locate real success with their passion.
Please subscribe, such as and comment below if you have any type of inquiries! Thank you.
#claudecode #webdesign #aiwebdesign #aiautomation #buildwithai.