Stop Building Websites the Hard Way (Use Claude Code)

Save to stack
Leon van Zyl Open on YouTube ↗
Claude Code Tool Claude Skills For Beginners Level Agentic Coding Technique Ai Web Design Topic AI Coding Tools Tool Developers Audience Course Format Claude Code Subagents Model No Code Website Builder Tool Vibe Code Model
From the creator

🚀 Access ALL video resources & get personalized help in my community: https://www.skool.com/agentic-labs 🚀 Get Hostinger VPS (use code LEON for 10% off): https://hostinger.com/leon 🚀 Start building with n8n (use my link to support my channel ❤️): https://n8n.partnerlinks.io/f7f19w3vrhin 📘 Claude Code Skills: https://code.claude.com/docs/en/skills 📘 Claude Code Marketplace: https://github.com/anthropics/claude-plugins-official 💬 My AI voice-to-text software (Wispr Flow): https://wisprflow.ai/r?WALTER67 ☕ Buy me a coffee: https://www.buymeacoffee.com/leonvanzyl 💵 Donate using PayPal: https://www.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

Stop watching · start building
Matched to Claude Code

Makers residency 4th edition

Your idea can be anything. At our last workshops, people built plant-based nutrition businesses, a way to measure planetary resilience, crochet headwear and a way to connect lonely people living in the same building. An asset manager went on to raise an additional £25M on their fund within nine months. The fourth workshop is a full day at KOKO with Nick Sarafa, learning to build with Claude Code. Bring the thing you keep meaning to start. We’ll bring the pizza.

◆ Fri 13 Nov 2026 ◆ KOKO, London
Get tickets See every event
Makers residency 4th edition
Live event
Makers residency 4th edition
Fri 13 Nov 2026
Find a job · 6 live roles

Jobs in AI.
Apply now.

Apply once › get screened › meet the company

See all roles

More like this

Running one yourself?

List your AI event,
wherever it is.

A meetup, a workshop, a hackathon, a conference. Any city, or online. Tell us about it and it lands in front of people already learning this stuff.

List your AI event