A vector canvas that lives inside your editor and saves its work as files your coding agent can read.
pen.dev — formerly pencil.dev — puts a Figma-like canvas inside Cursor, VS Code and Claude Code, and keeps each design as a .pen file committed next to the code it describes. A local MCP server lets the coding agent read and write those files, so a drawing becomes something an agent can build, and components that already exist can be pulled back onto the canvas. Built by Tom Krcha, previously behind Around, and funded through a16z Speedrun.
- Vector canvas inside your IDE
- Designs stored as files in the repo
- Local MCP server for coding agents
- Pull existing components onto the canvas
- Design tokens synced with code
- Cursor, VS Code and OpenVSX
Recent X Posts
Excited to support @valiocon this year in September. Come join a bunch of designers and design engineers for 3 days on the beach near San Diego. We are giving away 7 tickets! x.com/drewwilson/sta…
Version v1.2.6 released - **AUTO-SAVE**, no need to save your docs with cmd+S anymore - **Import from Browser** fixes for certain edge cases - **Browser Google sign-in popup window fix**, previously we didn't support pop-up windows - **File -> Export Snapshot...** allows you to export a zip file containing .pen and all the dependencies like images, shaders, etc. - Added models: Grok 4.6, Gemini 3.7 Flash from Cursor and OpenRouter, Qwen 3.8 Max
Designing with Qwen 3.8 27B 🤯 x.com/tomkrcha/statu…
Time for some quality of life improvements. Zoom tool (for y'all mouse folk) + dragging canvas scrollbars. Paying off our UX debts on time. Lot more to come. Buckle up 😎