How I Turned Claude Into a Design Tool with Pencil.dev

What if you could design pixel-perfect UIs without ever leaving your code editor? In this video, I'll show you how I transformed Claude Code into a powerful design studio using Pencil.dev—a free, agent-driven design tool that lets you prompt designs into existence and tweak them in real-time, just like Figma. Whether you're building components, importing UI kits, or getting client signoff before writing a single line of code, Pencil.dev bridges the gap between AI coding and visual design. I'll walk you through a live demo, show you how to copy designs from Figma, and explain why this tool might just change how you build websites forever. 🔗 Relevant Links French Bakery site - https://sparkling-feather-2bb3.richar... ❤️ More about us Radically better observability stack: https://betterstack.com/ Written tutorials: https://betterstack.com/community/ Example projects: https://github.com/BetterStackHQ 📱 Socials Twitter:   / betterstackhq   Instagram:   / betterstackhq   TikTok:   / betterstack   LinkedIn:   / betterstack   📌 Chapters: 0:00 Intro 0:25 The Problem with Claude Designing 0:53 Quick Demo of Pencil.dev 3:08 Creating a design from Scratch in Pencil.dev 5:27 Final thoughts 6:28 Pencil.dev vs Figma MCP vs Sketch MCP