Build a Full Website with AI in Under 3 Hours — Claude Code + Pencil.dev

From design system to deployed website with SEO — no designer, no developer, no templates. Just Claude Code, VS Code, and pencil.dev. In this video, I walk you through my complete 5-phase workflow for building a production-ready website using AI. Design system, component design, coding, deployment, and SEO audit — all done by Claude Code. 🔗 All Prompts (copy-paste ready): https://docs.google.com/document/d/1P... 🛠️ Tools used: Claude Code: https://docs.anthropic.com/en/docs/cl... (Claude Pro or Max subscription required) Pencil.dev (VS Code Extension): https://pencil.dev 21st.dev (Component Inspiration): https://21st.dev Next.js: https://nextjs.org Vercel (Deployment): https://vercel.com Pinterest (Design Inspiration): https://pinterest.com 📊 Final Lighthouse Scores: Performance: 95 (Mobile) / 99 (Desktop) Accessibility: 100 Best Practices: 100 SEO: 100 📌 Timestamps: 0:00 Intro: Build Websites with Claude Code 0:16 Traditional vs. AI Workflow 0:39 Tools & Tech Stack 1:30 Phase 1: Design System (Pinterest → Pencil.dev) 3:15 Design System Verification 5:01 Phase 2: Component Design (21st.dev → Pencil.dev) 12:51 Phase 3: Coding the Website 17:00 Fixing Styling Issues with Playwright 19:14 UI/UX Improvements & Animations 20:24 Phase 4: Deploy & PageSpeed (GitHub → Vercel) 24:28 Phase 5: SEO Audit & Competitor Analysis 27:14 The 5-Phase Framework Recap 28:12 Key Insight & Closing --- My name is Damjan Savić. Subscribe for more AI and development tutorials.