Feb 24
Loading video player...
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.richardbray89.workers.dev/ ❤️ More about us Radically better observability stack: https://betterstack.com/ Written tutorials: https://betterstack.com/community/ Example projects: https://github.com/BetterStackHQ 📱 Socials Twitter: https://twitter.com/betterstackhq Instagram: https://www.instagram.com/betterstackhq/ TikTok: https://www.tiktok.com/@betterstack LinkedIn: https://www.linkedin.com/company/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