---
title: "How I Built INSANE Claude Design Websites In 10 Minutes"
source_url: https://youtu.be/xYv4_cTOSNM
captured_at: 2026-04-19
author: "Jono Catliff"
contributor: "ชิดชนก"
platform: youtube
---
# How I Built INSANE Claude Design Websites In 10 Minutes

youtube video by **Jono Catliff**, 16m28s, uploaded 2026-04-18. URL: https://youtu.be/xYv4_cTOSNM
Tags: claude design, claude design tutorial, claude code, anthropic claude design, claude design full tutorial, ai website builder, build website with ai, claude design deploy, claude design vercel, next.js ai website, gsap animations, ai web design, opus 4.7, anthropic labs, claude design figma, figma killer ai, design system ai, claude code tutorial, ai agency website, automate web design, jono catlif

## Shared in LINE Note+
- 2026-04-19 19:18 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 


📝 BLUEPRINTS


🔗 Claude Design: 


📚 SUMMARY
Claude Design launched 24 hours ago and already has 49+ million views on Anthropic's launch post — every refresh adds another 400K. People are building insane websites with it.

In this 19-minute walkthrough I build a full 5-page marketing website using Claude Design + Claude Code — every page on-brand, GSAP animations baked in, handed off and deployed live to the internet. Zero Figma. Zero Canva. Zero designer.

⌛ TIMESTAMPS
0:00 - Intro: Claude Design Is Everywhere
0:46 - Access Claude Design + Create Design System
1:09 - Free Design System Library (68 Brands)
2:26 - Your Custom Design System Is Ready
2:56 - Build The 5-Page Website In Claude Design
3:50 - Use Dribbble For Layout Structure
5:32 - Review + Edit The Generated Pages
7:16 - Bonus: Animated Motion Graphics
8:34 - Hand Off To Claude Code
10:11 - Convert To Next.js + Add GSAP Animations
11:58 - Live Preview With Animations Working
13:20 - Deploy To GitHub + Vercel
15:26 - Custom Domain Setup
16:00 -