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/1P7WJX8Sd49MGzfHn9EBjhbXtmQkoZYBsIAEjZehlTu4/edit?tab=t.0

🛠️ Tools used:
- Claude Code: https://docs.anthropic.com/en/docs/claude-code (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.

Видео Build a Full Website with AI in Under 3 Hours — Claude Code + Pencil.dev канала Damjan Savić