In short
Pencil, now pen.dev, is an agentic design canvas for building software. It runs as a
desktop app on macOS, Windows and Linux, as an extension in VS Code and Cursor, and as a CLI.
Designs are .pen files, a JSON format kept in git beside your code. Agents connect over MCP
or through your own AI subscription or key, it imports Figma, and it exports HTML with CSS or
Tailwind, and images and PDF.
vDesign is an agentic design canvas for anything people look at, in the browser or on Mac and
Windows. Designs are .vd files: line-based text written for a model to read and patch
directly. The VS Code extension previews them; the app is where they are made.
Where each one wins
Choose Pencil for app and web UI designed next to the code: in your IDE, on Linux, with Figma import and code export.
Choose vDesign for print, marketing, decks, brand and video as well as web pages; for working in the browser with nothing to install; and for assistants like Claude and ChatGPT that connect with one URL.
Side by side
| vDesign | Pencil (pen.dev) | |
|---|---|---|
| The document | .vd, line-based text, patched directly by models |
.pen, JSON, changed through its tools |
| Best at | Print, marketing, slides, brand, video, one-page sites | App and web UI, design-to-code |
| Where it runs | Browser, Mac, Windows | Mac, Windows, Linux, VS Code and Cursor, CLI |
| Agent access | Remote MCP URL for Claude and ChatGPT, local MCP, vDesign AI on your own key | MCP, your own subscription or key |
| In your editor | VS Code, Cursor and github.dev preview, ```vd fences in Markdown | Full editor as an extension |
| Imports | Your brand from its site or files | Figma, web pages |
| Exports | PNG, JPEG, WebP, SVG, PDF, Illustrator, HTML, PowerPoint, GIF, MP4 | HTML with CSS or Tailwind, PNG, JPEG, WebP, PDF |