Pencil (pencil.dev)

Pencil is an AI-native design tool that does something deceptively simple: it puts a full vector canvas inside your code editor. Available as a VS Code and Cursor extension or standalone desktop app, Pencil lets you design interfaces in a Figma-like environment without ever leaving your IDE. The key move is that design files are stored as lightweight JSON-based .pen files that live directly in your repository—meaning your designs are version-controlled, branchable, and mergeable with Git just like the rest of your codebase. You can copy frames straight from Figma into Pencil when you're ready to go from exploration to implementation, keeping the existing design ecosystem in the loop rather than replacing it.

Where Pencil clicks for vibe coders & builders is the MCP integration. AI agents like Claude Code and Cursor don't just see a screenshot of your design—they read the actual vector data, exact spacing values, and token definitions from your .pen file, then generate production-ready React, HTML, and CSS that matches your layout with real precision instead of best guesses. It's a bidirectional flow: refine something visually on the canvas and the code updates, or let your agent write code that feeds back into the design. Created by Tom Krcha, Pencil positions itself less as a Figma replacement and more as the missing layer between design intent and shipped code—a place where the mockup and the build are the same thing.