xiry.

Development · Browser extension

pen.dev

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

From the Xiry library · Updated 3 October 2026

Visit pen.dev ↗

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.

What it's 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
Topic
UI Design & Prototyping
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: 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: Generative UI design in an infinite canvas with design-system components, style guides, and direct export to code via Claude Code (MCP).

Compare

Related

  • Impeccable

    Design vocabulary, rules, and skills for AI coding agents.

  • agentic-awesome-skills

    Agent-first control plane backed by 2,400+ curated AI developer skills

  • BoardUI

    React and Tailwind dashboard UI kit with agentic progress and chat components.

  • ECC

    Agent harness optimization system with skills, hooks, and configs for coding agents

  • MCP + Zapier: AI-Powered Automation Workflow

    Pattern for using Model Context Protocol to trigger Zapier multi-app automations

  • MCP in Cursor Guide

    Walkthrough for setting up Model Context Protocol servers inside Cursor

Updated