Mar 23
Loading video player...
I thought this was just another design tool. Then I built an entire app from scratch in it — and threw away the video I'd already shot because what happened was too good not to show. Pencil is a free, standalone design tool built for AI workflows. You design in Pencil, your coding agent reads those designs through an MCP, and what comes out isn't a mockup — it's a buildable blueprint with real values your agent knows exactly how to use. In this video, I take Pencil through two challenges: restyling existing production apps with new design systems, and building a brand new weather application completely from scratch. The from-scratch build is where things got interesting — iterating with multiple AI agents, narrowing designs, pushing into states and iconography, then handing the whole thing to Claude Code to build a live, working application. If you've been using AI coding tools but still struggling with the design side — or if you're a designer curious about where design tooling is heading in the AI workflow space — this one's for you. Whether you're building side projects, production apps, or just exploring what's possible when design and code stay in sync, Pencil is worth a look. It's free, you bring your own AI subscription, and it's one of the first real attempts to solve the design gap in AI-assisted development. Weather app repo: https://github.com/bladnman/pencil_weather Pencil: https://pencil.dev Separating UI from logic (previous video): https://youtu.be/pux0EMMe4J4?si=-Cr5b8D4qv2kDfs2 #AI #ClaudeCode #Pencil #AIDesign #AICoding 00:00 - Intro 01:59 - What Is Pencil 02:18 - Restyling a Something That Exists 04:44 - Restyling a Complex App 07:32 - Let's Greenfield 08:04 - The Designer Designs It 14:55 - The Builder Builds It! 18:37 - Conclusion