Vibe Code Your Designs: Pencil.dev + Claude Code Demo

What if you could vibe code your UI designs and push them straight into your app? Pencil.dev combines a Figma-like design editor with Claude Code under the hood. This video explores pencil.dev, a new tool that merges figma design capabilities with code functionality. We demonstrate how to create and transfer web design concepts, showing how it simplifies the product design process. Learn how this tool can enhance your ui design workflow and improve overall app design efficiency, making design tutorials more practical. Key topics covered: • What Pencil.dev is and how it compares to Figma + Figma MCP • Live demo: recreating an Audiences screen from screenshots • Iterating on designs with natural language (fix colors, spacing, badges) • Transferring designs to code via MCP server + Claude Code • Why Pencil.dev works better than Figma MCP or copy-pasting Figma code • Tips: style guides, component-by-component transfers, managing context windows Timestamps: 0:00 What if Figma and Claude Code had a baby? 0:05 Discovering Pencil.dev 0:23 How it works: vibe coding designs + MCP transfer 0:42 Current state of our app Gutsy 1:04 The problem: not a designer, need a design refresh 1:16 Work done so far: chat and dashboard screens 1:52 Live demo: recreating the Audiences tab 2:49 Creating a new frame from screenshots 3:48 How Pencil uses Claude Code under the hood 4:08 Brand colors and style guide tip 5:22 First result: what it got right and wrong 7:01 Giving feedback: fixing badges, spacing, sidebar state 8:08 Manual tweaks vs fighting the AI 9:37 Rate limiting and subscription considerations 10:04 Landing page design work 10:40 Pencil.dev vs Figma MCP comparison 12:05 Overall impressions on design quality 13:00 Merging the design into code via MCP 15:01 First code transfer result 17:08 Fine-tuning the transferred design 19:03 Component-by-component transfer strategy 19:35 Final thoughts and recommendation 🛠️ Build your AI Product with me: https://stefan.computer/mvp 🛣️ Sharing my learnings 👇 https://stefan.computer/bird https://stefan.computer/watch 🔗 What I'm cooking 👨‍🍳👇 https://gutsy.so/ https://www.unyte.de/ https://www.nichemat.es/