Description
pen.dev is an agentic design canvas from High Agency Inc., the maker previously known as Pencil (pencil.dev). The product now describes itself as built for constructing software rather than just static screens: designers and developers work on an open canvas where AI agents can design alongside them, refine existing work, or build new screens from a prompt.
Read More
The canvas keeps designs in an open file format called .pen, a plain JSON file that both people and agents can read and edit, stored inside the same codebase as the product it describes. Work happens either by hand, using tools familiar from Figma and Sketch such as the pen tool, gradients, components and flex layout, or by directing an agent to draft, refine or extend a screen. A built-in browser and a Chrome extension let users import any webpage, app or design straight onto the canvas as editable layers, and Figma files, including vectors, text and styles, import directly.
Users bring their own model to the canvas: pen.dev works with Claude, GPT, Grok, Qwen, Gemini, Kimi, DeepSeek and Minimax, connected through an existing ChatGPT or Claude subscription, an API key, or MCP, WebMCP or the command line. The same MCP link lets tools such as Claude Code, Codex, Cursor or Antigravity design headlessly through pen.dev's CLI, without opening the canvas at all.
Other canvas features include real-time shader effects called Vibe Shaders, AI-assisted icon and illustration drawing called AI Pen, shared component libraries across files, and a custom WebGL rendering pipeline built to stay smooth with thousands of layers or tens of gigabytes of content. Finished work exports as PNG, JPEG, WEBP or PDF at any scale, as HTML and CSS or Tailwind in one click, or as a shareable link that opens the latest version in any browser. A slides and presentation mode is built in for turning canvas work into a deck.
pen.dev is currently free; the company says it will describe any paid plan clearly before charging for it. It ships as a downloadable desktop app plus browser and editor extensions for Chrome, VS Code, Cursor and OpenVSX, and is backed by a16z's Speedrun program. It suits product designers and small software teams who want to move between visual design and working code without switching tools, more than teams looking for a pure graphic-design product.
- CategoryAI UI & UX Design Tools
- Pricing ModelFreemium
- DeploymentDesktop, IDE Extension, CLI
- PlatformsmacOS, Windows, Linux
pen.dev's Core Features
Open .pen file format that agents can read and edit natively
Bring-your-own-model support for Claude, GPT, Gemini, Grok, Qwen, Kimi, DeepSeek and Minimax
MCP, WebMCP and CLI connections for headless design from Claude Code, Cursor or Codex
Built-in browser and Chrome extension to import any webpage as editable layers
Figma import that preserves vectors, text and styles
Custom WebGL canvas built to stay smooth with thousands of layers
Vibe Shaders for real-time visual effects and gradients
AI Pen for generating icons and illustrations with agents
One-click export to HTML/CSS/Tailwind or PNG/JPEG/WEBP/PDF
Slides and presentation mode for turning canvas work into a deck
How to use pen.dev?
Download: Get the pen.dev desktop app or add the Chrome, Cursor or VS Code extension.
Start a canvas: Open a blank canvas or import a design from Figma, a webpage or your own codebase.
Connect a model: Sign in with a Claude or ChatGPT subscription, add an API key, or link an agent through MCP.
Design or prompt: Draw manually with the pen tool and components, or ask an agent to build or refine a screen.
Add effects: Apply shaders, gradients and AI-drawn icons where needed.
Export or share: Export to HTML/CSS, image formats or PDF, or send a link to the latest version.
pen.dev's Use Cases
- Agentic UI design
- Design-to-code handoff
- Web page cloning
- Headless design via MCP
