Pencil — agentic design canvas on pen.dev

Use when

You want an AI-native design canvas where agents edit layers with you—import from Figma or the web, refine on canvas, then export HTML/Tailwind or drive design via MCP and CLI.

Skip when

You only need static mockups with no agent workflow, a prompt-only UI generator without a real canvas, or a fully local-first design file workflow with no hosted product.

Try instead

Use a design-to-code canvas or local agent design workspace on Uwarp when Pencil’s agentic canvas is not the fit; keep prompt libraries when you only need copy inspiration.

• Subframe
• Open Design
• UX Pilot
• Design prompts

• PencilThis page

  Pricing

  Product currently free; paid plans may arrive later—AI usage via your model subscriptions, API keys, or MCP

  Learning cost

  Familiar canvas shortcuts plus agent/MCP setup; download or browser entry from pen.dev

  Output limits

  Vector UI canvas with Figma/HTML import, HTML/CSS/Tailwind export, image/PDF exports, open .pen format, MCP/CLI

  Privacy

  Design work lives in the Pencil product; model calls go through providers or MCP agents you connect

• Figma

  Pricing

  Freemium with paid seats for teams, Dev Mode, and advanced collab

  Learning cost

  Mature design UI most product teams already know

  Output limits

  Industry-standard design files, prototypes, and handoff—not agent-first by default

  Privacy

  Files and comments process on Figma’s cloud for collaboration

• v0

  Pricing

  Free tier then credit-based paid plans for generation volume

  Learning cost

  Browser chat-to-UI flow; low install friction, less canvas craft

  Output limits

  Strong React/UI generation into a hosted project model—not a full vector design canvas

  Privacy

  Prompts and projects process on the hosted product

1. Pencil — official site (pen.dev)
2. Pencil — pricing
3. Figma — official site
4. v0 — official site

Free tier

Yes

Pricing summary

Pencil is currently free on pen.dev. The publisher may introduce paid features later and says it will describe terms before charging. Model usage typically comes from your existing ChatGPT or Claude subscription, API keys, or MCP-connected agents—confirm live details on the official pricing page.

Reviewed on 15 September 2026 · Pencil — Pricing

• Agentic canvas editing

  Design with on-canvas agents or refine layers manually—same vector surface for both human and model edits.

• Bring your own models

  Use ChatGPT or Claude subscriptions, add API keys, or connect agents through MCP, WebMCP, or CLI.

• Import from Figma and the web

  Bring .fig layouts, copy/paste from Figma, open pages in a built-in browser, or paste editable layers via Chrome extension.

• HTML and asset export

  Export frames as HTML with CSS/Tailwind, or as PDF/PNG/JPEG/WebP at 1×–3×—plus an open .pen JSON format for agents.

• Design craft tools

  Pen tool, components with slots, UI libraries, flex layout, gradients, shaders, pixel grid, and Figma/Sketch-style shortcuts.

1. 1

   Open pen.dev and start a project

   Visit the official site, download or launch the product, and create a canvas instead of starting from a blank chat.

2. 2

   Import existing UI when you can

   Pull in a Figma file, paste from Figma, or capture a live page so agents refine real structure instead of inventing from scratch.

3. 3

   Connect a model or MCP agent

   Attach a subscription, API key, or an IDE agent (Cursor, Claude Code, and similar) so design edits can run on the canvas or headlessly via CLI.

4. 4

   Export or sync back to code

   Export HTML/CSS/Tailwind or image/PDF assets, share a browser link for review, or keep iterating through MCP against the open .pen format.

• Product designers shipping with AI coding agents

  Keep a real canvas while Cursor, Claude Code, or other MCP clients help edit and hand off designs.

• Engineers who still want vector craft

  Import production UI, tweak layout with familiar shortcuts, and export Tailwind-ready markup without leaving an agent loop.

• Teams migrating from Figma drafts

  Bring existing .fig work onto the canvas, then continue with agents instead of rebuilding screens as prompts alone.

Runtime

Custom WebGL pipeline aimed at large canvases (publisher claims high layer counts and heavy media at interactive frame rates).

File format

Open .pen JSON schema so agents can read and edit designs natively—see official docs for schema details.

Integrations

MCP/WebMCP/CLI for agents; Figma import; built-in browser and Chrome extension for HTML capture; HTML/CSS/Tailwind and raster/PDF export.