Uploaded January 2026 | Updated September 2026, 3 weeks ago
🚀 Access ALL video resources & get personalized help in my community:
skool.com/agentic-labs
🚀 Get Hostinger VPS (use code LEON for 10% off): hostinger.com/leon
🚀 Start building with n8n (use my link to support my channel ❤️): n8n.partnerlinks.io/f7f19w3vrhin
📘 Claude Code Skills: code.claude.com/docs/en/skills
📘 Claude Code Marketplace: github.com/anthropics/claude-plugins-official
💬 My AI voice-to-text software (Wispr Flow): wisprflow.ai/r?WALTER67
☕ Buy me a coffee: buymeacoffee.com/leonvanzyl
💵 Donate using PayPal: paypal.com/ncp/payment/EKRQ8QSGV6CWW
Learn how to use Claude Code to build professional websites without writing any code. In this complete tutorial, you'll discover how to use AI coding agents, sub-agents, and custom skills to create stunning business websites or portfolio pages. We cover the frontend design skill from Anthropic, design system creation, Next.js setup, image optimization, GitHub integration, free Vercel deployment, and adding an AI chatbot with N8N. Perfect for no-code builders and developers looking to leverage Claude Code for web development.
⏰ TIMESTAMPS:
00:00 Claude Code website demo
03:09 Prerequisites Node.js and VS Code
03:57 Installing Claude Code
04:55 Frontend design skill setup
06:31 Anthropic skills marketplace
07:13 Design inspiration from Dribbble
08:04 Creating design system with Claude Code
09:17 Sub agents for design enforcement
10:40 Next.js framework setup
13:00 Planning mode for website structure
15:28 Building homepage and menu pages
18:26 Creating custom image optimization skill
22:29 Image optimization results
22:41 GitHub repository setup
23:54 Vercel free deployment
25:08 Adding AI chatbot with N8N
27:13 N8N self hosted setup with Hostinger
30:00 OpenRouter API integration
31:00 Embedding chatbot in website
#claudecode #vibecoding #n8n
33:00 Adding knowledge base to AI assistant
38:30 Reservation system with N8N webhooks
41:20 Final testing and production deployment
🚀 Access ALL video resources & get personalized help in my community:
skool.com/agentic-labs
🚀 Get Hostinger VPS (use code LEON for 10% off): hostinger.com/leon
🚀 Start building with n8n (use my link to support my channel ❤️): n8n.partnerlinks.io/f7f19w3vrhin
📘 Claude Code Skills: code.claude.com/docs/en/skills
📘 Claude Code Marketplace: github.com/anthropics/claude-plugins-official
💬 My AI voice-to-text software (Wispr Flow): wisprflow.ai/r?WALTER67
☕ Buy me a coffee: buymeacoffee.com/leonvanzyl
💵 Donate using PayPal: paypal.com/ncp/payment/EKRQ8QSGV6CWW
Learn how to use Claude Code to build professional websites without writing any code. In this complete tutorial, you'll discover how to use AI coding agents, sub-agents, and custom skills to create stunning business websites or portfolio pages. We cover the frontend design skill from Anthropic, design system creation, Next.js setup, image optimization, GitHub integration, free Vercel deployment, and adding an AI chatbot with N8N. Perfect for no-code builders and developers looking to leverage Claude Code for web development.
⏰ TIMESTAMPS:
00:00 Claude Code website demo
03:09 Prerequisites Node.js and VS Code
03:57 Installing Claude Code
04:55 Frontend design skill setup
06:31 Anthropic skills marketplace
07:13 Design inspiration from Dribbble
08:04 Creating design system with Claude Code
09:17 Sub agents for design enforcement
10:40 Next.js framework setup
13:00 Planning mode for website structure
15:28 Building homepage and menu pages
18:26 Creating custom image optimization skill
22:29 Image optimization results
22:41 GitHub repository setup
23:54 Vercel free deployment
25:08 Adding AI chatbot with N8N
27:13 N8N self hosted setup with Hostinger
30:00 OpenRouter API integration
31:00 Embedding chatbot in website
#claudecode #vibecoding #n8n
33:00 Adding knowledge base to AI assistant
38:30 Reservation system with N8N webhooks
41:20 Final testing and production deployment
