# pen.dev (Pencil)

> Agentic design canvas in your IDE (extension), desktop app or headless CLI; open JSON .pen format; MCP for Claude Code/Codex/Cursor etc.; 1-click HTML + CSS/Tailwind export

- Category: Design tool + AI (Design tool)
- Status: Active
- Website: https://www.pen.dev/
- Pricing: Free $0 (5 agent-days/mo, unlimited MCP calls while designing, 25 image/SVG gens); Pro $16/user/mo (3 parallel agents, 350 gens); Ultra $48/user/mo (6 agents, 750 gens, team workspaces); Enterprise: contact (checked 2026-10-16)
- Free plan: Yes
- Lowest paid plan: $16/mo
- Last updated: 2026-10-16
- Page: https://designengindex.com/tools/pencil

## Changelog

- 2026-10-14: @pen.dev/cli 0.3.12 published (no public release notes; recent posts: external MCP servers as context, Paste to Replace, 100% zoom in Present mode) (source: https://www.npmjs.com/package/@pen.dev/cli)

## Alternatives

- [Figma](https://designengindex.com/tools/figma.md): Design-to-code via Dev Mode, Figma Make (prompt-to-app) and MCP server
- [Paper](https://designengindex.com/tools/paper.md): Design canvas built on real HTML/CSS; Copy as React CSS or Tailwind; MCP server lets agents read/write files and sync tokens with your co...
- [Penpot](https://designengindex.com/tools/penpot.md): Open-source design tool with CSS Flex/Grid layouts, design tokens, MCP
- [ProtoPie](https://designengindex.com/tools/protopie.md): High-fidelity interactive prototypes
- [Rive](https://designengindex.com/tools/rive.md): Interactive vector animations with runtimes for web/mobile
- [Spline](https://designengindex.com/tools/spline.md): 3D/interactive web scenes with code export

## Comparisons

- [Figma vs Paper vs pen.dev (Pencil) vs Penpot](https://designengindex.com/compare/figma-vs-paper-vs-pencil-vs-penpot.md)