# pen.dev

> Agentic canvas and IDE extension for building UI designs directly into code

pen.dev (formerly Pencil) is an open-format design canvas and IDE extension built for human-AI software design. It uses an open JSON-based .pen file format and connects to coding agents like Claude Code or Cursor via MCP to generate, visually tweak, and export production UI.

Website: https://pen.dev/

## What it is for

- Design and iterate UI visually inside VS Code or Cursor using AI coding agents
- Connect AI agents via MCP to inspect and edit design files directly in a repository
- Export visual frames directly to HTML, CSS, or Tailwind markup
- Import existing live websites or Figma files into editable canvas layers

## Features

- Open .pen file format structured as agent-readable JSON
- MCP server and CLI support for integration with Claude Code, Cursor, and Windsurf
- WebGL-powered infinite canvas with layers, components, and layout tools
- Built-in browser and Chrome extension for importing live HTML pages as layers
- Direct Figma and .fig file import support
- One-click export to HTML and Tailwind CSS
- Native visual shader effects and vector pen tool

## Pricing

Freemium. Free tier available; paid plans for extended team and usage features.

## Details

- Type: Browser extension
- Category: [Development](https://xiry.app/topics/development.md)
- Open source: no
- Platforms: macOS, Windows, Command line, Browser extension
- For: Designers and developers building software UIs alongside AI coding agents
- Alternative to: Figma, Sketch, v0
- Tags: ui design, mcp, vscode extension, ai agents, cursor, tailwind

## Why it was saved

- [@casey.aicreates, 5 February 2026](https://www.instagram.com/reel/DUZGLU8jlNG/): Solves the generic or messy look of AI-generated 'vibe coded' UIs by providing design templates, a visual canvas editor, and automatic MCP integration for AI agents to build and export polished UI components.
- [@LinusEkenstam, 22 January 2026](https://x.com/LinusEkenstam/status/2014307006824222954): Generative UI design in an infinite canvas with design-system components, style guides, and direct export to code via Claude Code (MCP).

## Compare

- [Alternatives to Figma](https://xiry.app/alternatives/figma.md)
- [Alternatives to v0](https://xiry.app/alternatives/v0.md)

## Related

- [Impeccable](https://xiry.app/resources/impeccable): Design vocabulary, rules, and skills for AI coding agents. (Web app, Free)
- [agentic-awesome-skills](https://xiry.app/resources/agentic-awesome-skills): Agent-first control plane backed by 2,400+ curated AI developer skills (GitHub repo, Open source)
- [BoardUI](https://xiry.app/resources/boardui): React and Tailwind dashboard UI kit with agentic progress and chat components. (Web app, Freemium)
- [ECC](https://xiry.app/resources/ecc): Agent harness optimization system with skills, hooks, and configs for coding agents (GitHub repo, Open source)
- [MCP + Zapier: AI-Powered Automation Workflow](https://xiry.app/resources/mcp-zapier-ai-powered-automation-workflow): Pattern for using Model Context Protocol to trigger Zapier multi-app automations (Tip, Free)
- [MCP in Cursor Guide](https://xiry.app/resources/mcp-in-cursor-guide): Walkthrough for setting up Model Context Protocol servers inside Cursor (Framework, Free)

Updated 3 October 2026. Page: https://xiry.app/resources/pen-dev

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.