Uwarp

Pencil — agentic design canvas on pen.dev

Agentic UI design—canvas editing, Figma import, HTML/Tailwind export, and MCP hooks for Cursor or Claude Code.

  • AI Design
  • Agentic Canvas
  • MCP
  • HTML Export
Publisher
pen.dev
Type
Agentic Design Canvas
Pricing
Free
Reviewed
15 September 2026
Official site

Quick verdict

Use when

  • AI-native design canvas
  • Agents edit layers with you
  • Import Figma / web
  • Refine then hand off

Skip when

  • Static mockups no agents
  • Prompt-only no real canvas
  • Fully local offline only

Pencil vs common alternatives

How Pencil (pen.dev) compares for agentic UI design—pricing posture, ramp-up, what you can ship from the canvas, and where files and model calls run. Confirm live details on each official site.

Tap a dimension to focus

Pricing

  • PencilThis page
    • Free option
    • Paid plans
  • Figma
    • Freemium
    • Paid for teams
  • v0
    • Free tier
    • Credit caps
    • Paid for volume
  1. Pencil — official site (pen.dev)
  2. Pencil — pricing
  3. Figma — official site
  4. v0 — official site

Preview of Pencil - not the live app. Confirm details on the official site.

Does this overview help you decide?

—

(—)

Learn more

Details below the decision summary—features, workflow, and scope notes.

What is Pencil?

Agentic UI design—canvas editing, Figma import, HTML/Tailwind export, and MCP hooks for Cursor or Claude Code.

What it costs

Tier snapshot before you start on pen.dev.
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

What Pencil provides

Core capabilities called out on the public pen.dev site.

  • 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.

How to try Pencil

A practical path from first open to agent-assisted UI.

  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. 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. 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. 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.

Who Pencil is for

Teams that benefit from agent + canvas UI design.

  • 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.

When Pencil is the right pick

Choose Pencil when you want a real design canvas that agents can drive—especially if you import existing UI, refine layers by hand, and ship HTML/Tailwind or MCP-driven design into your coding workflow. Skip it when you only need prompt-to-component generation or a classic team design file tool with no agent loop.

Tech specs

Platform notes from the public Pencil / pen.dev product.
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.

Frequently Asked Questions

Quick answers about this tool—open a question to read more.