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.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

Видео How I Turned Claude Into a Design Tool with Pencil.dev канала Better Stack