Pencil.dev Review: The AI Design Canvas That Lives in Your IDE (2026)

Last Updated: July 2026 - Hands-on review with Cursor + Claude Code, now including how Pencil compares to Subframe, Paper.design, and Figma Make

Pencil.dev is an AI-powered design canvas that runs inside VS Code and Cursor, generating production-ready HTML, CSS, and React code from visual designs stored as Git-native .pen files. It uses MCP (Model Context Protocol) to give AI agents exact layout specs - coordinates, design tokens, spacing values - instead of screenshots, producing pixel-accurate code output.

You’re three sprints into a dashboard rebuild. The designer just updated the Figma file - again. You open the link, squint at the spacing, ping Slack for the font weights, and by the time you’re writing CSS, you’ve forgotten what you were building. After testing Pencil across several component-heavy projects, I can say it eliminates that entire loop. Your design canvas lives in the same IDE tab as your code, reads from the same Git repo, and the AI reads exact JSON specs - not pixels.

TL;DR: Pencil.dev for Design Engineers

• What it is: AI-powered infinite design canvas inside VS Code, Cursor, Windsurf, and standalone desktop app
• Core innovation: .pen files (JSON-based) live in your Git repo - branch, diff, merge designs like code
• AI engine: MCP server gives Claude Code/Cursor exact layout specs for pixel-accurate code generation
• Code output: Clean HTML, CSS, and React from your designs
• Multiplayer AI: Multiple agents build different screens simultaneously on the same canvas
• Figma import: Copy-paste from Figma preserves layers, styles, and spacing (~1px tolerance)
• Built-in kits: Four design systems (Shadian, Halo, Lunarus, Nitro) with tokens and responsive rules
• Price: Free during early access. AI generation requires Claude Code ($20/mo+)
• Best for: Developers who design, design engineers, solo builders, and small teams shipping MVPs

What Is Pencil.dev?

Pencil.dev is an agent-driven MCP canvas built around an open design format by High Agency, Inc. (backed by Speedrun). Unlike Figma’s design-to-code workflow where you export specs and manually translate them - or even Figma Make’s AI generation which still lives in a separate browser app - Pencil puts the design canvas directly inside your development environment. Open a .pen file in your IDE and you get an infinite design space right alongside your code.

The tagline - “Design on canvas. Land in code.” - captures the core idea. You design visually, and AI agents generate production-ready code by reading the actual design data (JSON structure with coordinates, tokens, and component hierarchy), not by interpreting a rasterized image.

The Design Handoff Problem Pencil Solves

The traditional design-to-development workflow forces a translation layer between vectors and syntax. Designers work in Figma. Developers work in code. Screenshots lose fidelity. Specifications get misinterpreted. According to McKinsey research, design-to-development handoffs consume 15-20% of total project timelines in mid-sized teams.

Existing solutions each solve part of the problem: Figma Dev Mode gives developers better specs, Tokens Studio automates token export, and tools like v0, Bolt.new, and Figma Make generate code from prompts. But none of them put the design canvas inside the IDE, version-controlled in Git, readable by AI agents through a structured protocol.

Pencil eliminates the translation layer entirely. When you ask Claude Code to “build this login page,” it doesn’t guess from a screenshot. It reads the exact layout, spacing, and tokens from your .pen file through MCP.

How Pencil.dev Works: Architecture Deep Dive

The architecture is what separates Pencil from every other AI design tool and from screenshot-to-code converters like Bolt.new or Webflow’s AI features. Three components work together:

1. The .pen File Format (Design-as-Code)

Designs are stored as JSON-based .pen files in your project directory. Each .pen file contains the complete component hierarchy, layout coordinates, design token references, typography specs, and spacing values in a structured, human-readable format. This means:

• Git versioning: Track design changes like code (branches, PRs, rollbacks)
• AI-readable: Claude Code and Cursor parse the exact layout specs from structured JSON
• Portable: No export/import friction - just commit and pull
• No vendor lock-in: Even if Pencil disappeared, the files remain readable JSON
• Diffable: Review design changes in pull requests alongside code changes

📁 your-project/
├── 📄 src/
│   ├── components/
│   └── pages/
├── 📄 design/
│   ├── landing-page.pen    ← Design file (JSON)
│   ├── dashboard.pen       ← Design file (JSON)
│   └── design-system.pen   ← Tokens & components
├── 📄 package.json
└── 📄 .gitignore

This is a fundamental shift from how design systems traditionally work. Instead of maintaining a separate Figma library that needs manual syncing, your design artifacts live in the same repo, under the same version control, reviewed in the same PRs. For teams running monorepos, this means design and code changes ship in the same commit.

2. How Pencil.dev MCP Integration Works

Pencil.dev runs a local MCP (Model Context Protocol) server on your machine that exposes bi-directional read and write tools to AI coding agents. When Claude Code or Cursor connects to Pencil, the AI reads structured JSON data from your .pen file - exact coordinates, design token values, layer hierarchy, spacing in pixels, and typography specs. This is fundamentally different from screenshot-based tools where the AI interprets rasterized images and guesses at dimensions.

The MCP server provides six core tool categories:

The key difference from tools like v0 or Lovable: Pencil doesn’t just provide reading tools. It gives AI agents full write access plus the ability to plug in external MCP integrations - databases, APIs, chart data, Playwright, or other agents.

3. The Infinite Canvas

The canvas itself feels immediately familiar if you’ve used Figma - layer panel on the left, CSS properties on the right, infinite canvas in the middle. Manual edits like adjusting padding, changing copy, or swapping a color happen directly on the canvas without consuming AI tokens.

Key Features for Design Engineers

AI Multiplayer Generation

This is where Pencil gets genuinely impressive. Multiple AI agents can work on different screens simultaneously on the same canvas. You can watch a dashboard, settings page, and landing page get built in parallel. Each agent respects your design tokens while working on its assigned section.

In practice, this means you can prompt “Create a pricing page with three tiers” and “Design a dashboard with sidebar navigation” at the same time, and both appear on your canvas concurrently.

Built-in Design Systems

Pencil ships with four curated design kits:

These aren’t just component libraries - they’re full design systems with tokens, patterns, and responsive rules baked in. If you want the best results on a tight timeline, start from one of these rather than from scratch. You can also plug in your team’s existing design system straight from the codebase.

Figma Import

Already have Figma mockups? Copy-paste frames directly into Pencil. Assets come over intact - layers, styles, and spacing preserved within ~1px tolerance. This lets you keep messy brainstorming in Figma, then lock down production-ready specs in Pencil.

This is the recommended migration path for teams with existing Figma-based design systems.

Sticky Notes to Prompts

You can place a sticky note on the canvas that says “generate a loading state for this card” and convert it directly into a runnable AI prompt. Every annotation becomes a potential instruction for your agent. This makes the canvas feel like an active workspace where context and execution live side by side.

Code Generation

When your design is ready, your AI agent reads the exact specs from the .pen file and generates React, HTML, or CSS. Because the canvas context comes through MCP, the output lands closer to the design intent than most generate-from-image approaches. The generated code supports Tailwind CSS utility classes, plain CSS, or CSS-in-JS depending on your prompt. Because a real coding agent does the generation, you can also target a specific stack: ask it to “generate a Next.js page from this design,” “use Shadcn UI components,” “build this form with React Hook Form,” or “export using Lucide icons instead of Material Icons,” and the agent scaffolds accordingly.

This is agentic coding applied to design - the AI autonomously reads the design file, understands the component hierarchy, and generates semantic HTML with proper structure. The key advantage over tools like v0 or Lovable: the AI has access to your actual design data through MCP, not just a text prompt.

# Example workflow in Claude Code
> "Create a login form with email, password, and remember me checkbox"
# AI builds it on canvas

> "Generate React code for this component with Tailwind CSS"
# AI reads .pen file via MCP, outputs pixel-accurate React + Tailwind

Code to Design: The Reverse Workflow

Pencil isn’t one-directional. The MCP integration also runs code → design: point Pencil at existing components in your codebase and it recreates them visually on the canvas. That means you can pull a React component you already shipped back onto the canvas, redesign it, and regenerate the code - useful for refactoring legacy UI or documenting what’s live. Combined with the design → code path, this gives you a genuine two-way loop rather than a one-shot generator, which is a meaningful edge over prompt-to-app tools that only go one direction.

External MCP Integrations

Pencil doesn’t just provide its own MCP tools. You can plug in the entire MCP ecosystem - databases, APIs, chart data, Playwright/Puppeteer, or other agents. The canvas becomes a hub, not a silo. For example, you could connect a database MCP to populate your design with real data, or use Playwright to capture screenshots of existing pages as reference.

Installation and Setup

IDE Extension (Recommended)

VS Code:

1. Open Extensions (Cmd/Ctrl + Shift + X)
2. Search for “Pencil”
3. Click Install
4. Create a .pen file to verify - look for the Pencil icon in the top-right corner

Cursor: Same process - Extensions → Search “Pencil” → Install.

Windsurf: Available in the Windsurf marketplace.

Standalone Desktop App

• macOS: Download .dmg from pencil.dev/downloads, drag to Applications
• Windows: x64 supported, ARM64 coming soon
• Linux: .deb and .AppImage packages available

Claude Code Authentication (Required for AI)

# Install Claude Code CLI
npm install -g @anthropic-ai/claude-code

# Authenticate
claude

# Follow the browser authentication flow

MCP Server

The MCP server starts automatically when you open Pencil. No additional configuration needed for basic use. Verify in Cursor via Settings → Tools & MCP.

Supported AI Assistants

Pencil works with multiple AI tools through MCP:

Practical Workflow: From Prompt to Production

Here’s what a real session looks like:

# 1. Start Pencil and Claude Code
claude

# 2. Create and open design.pen in your IDE

# 3. Press Cmd+K and start designing
User: "Create a modern landing page hero section with gradient background"
AI: [Creates hero with heading, subheading, CTA buttons on canvas]

User: "Add a features section with 3 columns below"
AI: [Adds features grid section]

User: "Use the Lunarus design system tokens for all colors"
AI: [Updates all elements to use Lunarus color variables]

User: "Generate React + Tailwind code for this entire page"
AI: [Reads .pen via MCP, exports to React component]

# 4. Review generated code in your editor
# 5. Commit both design and code
git add design.pen src/pages/landing.tsx
git commit -m "Add landing page design and implementation"

Pencil.dev vs Figma vs Other Design-to-Code Tools

Pencil.dev vs Figma: Key Differences

Pencil.dev and Figma serve different roles in the design-to-code pipeline. Figma is a browser-based collaborative design tool with advanced prototyping, animation, and a mature plugin ecosystem - ideal for dedicated design teams. Figma Make (launched at Config 2025) adds AI code generation but still lives in a separate browser app. Pencil.dev is an IDE-native design canvas that stores designs as version-controlled .pen files in your Git repo, with bi-directional MCP integration that lets AI agents read and write design data for accurate code generation. Figma excels at high-fidelity design collaboration. Pencil excels at collapsing the handoff between design and code for developer-designers and small teams.

The verdict: Pencil isn’t trying to replace Figma for high-fidelity design work. It’s the missing bridge - taking finalized designs and turning them into code without the translation loss. If your team needs advanced prototyping, animation, or large-scale multiplayer collaboration, Figma remains the standard. If you want design and code under one roof with AI doing the heavy lifting, Pencil is the tool.

Pencil.dev Alternatives: Code-Native Design Tools Compared

Pencil sits in an emerging category best described as code-native design tools - where visual design maps directly to code, as opposed to file-native tools like Figma whose .fig format needs a translation layer (Dev Mode, a plugin, or a human reading specs) before anything reaches code. In an AI-agent workflow where Cursor and Claude Code operate directly on the codebase, that architectural difference is the whole ballgame. If Pencil isn’t the right fit, these are the alternatives worth evaluating in 2026:

Pencil.dev vs Subframe

The clearest head-to-head is Pencil vs Subframe: both are code-native, but they make opposite architectural bets. Subframe bundles inference, component generation, and code output into a single subscription and runs as a web app - batteries included. Pencil externalizes all of that: it’s an agent-agnostic canvas inside your IDE that generates nothing on its own but plugs into whatever agent you already use. The tradeoff is scope versus composability. Choose Subframe if you want one tool that does everything with predictable, deterministic React + Tailwind output. Choose Pencil if you want design to live in your repo next to your code and to reuse your existing Claude Code or Cursor setup.

Pencil.dev vs Paper.design

Pencil’s closest architectural twin is Paper.design - another agentic, MCP-driven canvas that drives design through prompts and exports real HTML, CSS, and JavaScript rather than locked-in design files. If you specifically want the IDE-native, Git-native .pen angle, Pencil is the pick. If you prefer a more standalone canvas that isn’t tied to your editor, Paper is the one to try. Both represent the same bet: that the future of design tooling is agentic and code-native, not a file you export from.

Pricing: What Does It Actually Cost?

Pencil.dev itself is completely free during early access. No paid tiers, no feature limits, no gated enterprise plans.

The real cost is upstream:

The founders have indicated paid tiers may come in the future. Free is not a business model, so build your workflows with that in mind.

Pros and Cons - Honest Assessment

What Works Well

• Eliminates design-to-code translation loss - MCP gives AI exact specs, not approximations
• Git-native design files - Version control for visual assets is a genuine game-changer
• No context switching - Design and code are one tab-click apart in your IDE
• Open file format - No vendor lock-in; .pen files are readable JSON
• Figma import works well - Preserves layers and styles for migration
• AI multiplayer generation - Multiple agents building simultaneously is impressive for rapid prototyping
• Built-in design systems - Four kits accelerate cold starts significantly
• Free during early access - Full features, no limits

What Needs Work

• No browser version - Requires a local development environment and IDE
• Fully dependent on external AI agents - Pencil generates nothing on its own
• Not a Figma replacement - Lacks advanced prototyping, animation, and plugin ecosystem
• No auto-save - Multiple users have reported losing work
• Token costs can spike - Complex multi-screen designs consume Claude credits fast
• Layout alignment inconsistencies - Reported on complex components during testing
• No real-time human collaboration - AI multiplayer only, not human multiplayer
• Learning curve for MCP configuration - First-time setup can take 15+ minutes

Common Pitfalls

These are issues you’ll hit in practice that documentation doesn’t always cover:

1. Codex CLI config conflicts: Pencil may modify or duplicate your config.toml when using OpenAI Codex. Back up your config before first use.

2. Token burn on iteration: Asking the AI to “make it look better” repeatedly burns through Claude credits fast. Be specific with your prompts - “increase padding to 16px” costs far fewer tokens than “improve the spacing.”

3. Complex component alignment: Nested flex layouts with multiple breakpoints can produce alignment inconsistencies. Verify complex layouts manually before generating code.

4. No auto-save means lost work: Get in the habit of saving frequently. A browser crash or IDE restart without saving means your canvas changes are gone.

5. MCP connection drops: If the AI stops responding to design commands, check that the MCP server is still connected (Cursor: Settings → Tools & MCP). Restarting Pencil usually fixes it.

Who Should Use Pencil.dev?

Use it if:

• You’re a developer who uses Cursor or VS Code daily
• You already pay for Claude Code
• You want design files living inside your repo, not floating in a separate app
• You’re building frontend-heavy projects (landing pages, dashboards, marketing sites)
• You’re shipping MVPs and need speed over pixel perfection
• You’re a solo builder or small team where one person handles design and code

Wait if:

• You need advanced prototyping or animation (Figma is still the standard)
• Your team has strict design system governance (wait for enterprise features)
• You need real-time collaboration with other humans, not just AI agents
• You’re on a tight budget and Claude Code costs would add up
• You need a browser-based tool accessible to non-developers

The Design Engineer’s Perspective

As someone who works at the intersection of design and engineering, I call Pencil’s approach the “Single-Source Design” pattern - where the design file is simultaneously the spec, the source of truth, and the input for code generation. No translation layer. No handoff document. No “is this 16px or 24px?” Slack messages.

After testing Pencil across component-heavy projects, the biggest shift is how it changes the feedback loop. In a traditional Figma workflow, a design change triggers a chain: update Figma → export tokens → update code → verify visually. With Pencil, you update the .pen file and the AI regenerates code from the same source. The .pen file diffing alone - seeing exactly what changed in a design through git diff - is something Figma simply cannot offer.

The tool is still early. No auto-save, no browser version, rough edges on complex CSS Flexbox and Grid layouts. But the architecture is sound and the direction is right. The fact that design files are open JSON, Git-native, and AI-readable means even if Pencil pivots or disappears, your design artifacts remain useful.

One thing I haven’t been able to verify: whether Pencil’s generated code includes proper accessibility attributes (ARIA labels, semantic HTML landmarks, keyboard navigation). If you’re building production UIs, you’ll want to audit the generated output against WCAG 2.2 guidelines before shipping.

Prompt Engineering for Pencil.dev

Effective prompt engineering makes a significant difference in Pencil’s output quality and your Claude Code token consumption. Vague prompts burn tokens on iteration. Specific prompts generate accurate output in one pass.

❌ "Make it better"
✅ "Increase the button padding to 16px and change background to var(--color-primary)"

❌ "Add a form"
✅ "Add a login form with email input, password input, remember me checkbox, and submit button using the Shadian design system"

❌ "Design a page"
✅ "Design a dashboard with 240px sidebar navigation, 3-column grid main content, and sticky header using 8px spacing grid"

The pattern: be specific about layout dimensions, reference your design system by name, specify the spacing grid, and provide context about the component’s purpose. This approach aligns with the CRISP prompt framework - Context, Role, Intent, Specifics, Preferences.

Getting Started Today

1. Install the extension: Add to Cursor or Add to VS Code
2. Authenticate Claude Code: npm install -g @anthropic-ai/claude-code && claude
3. Create a .pen file in your project
4. Open the welcome file: Right-click canvas → Open Welcome File
5. Start designing: Press Cmd/Ctrl+K and describe what you want

The official documentation covers edge cases and troubleshooting. Join the Discord community for support and to see what others are building.

Recommended next reads:

• Figma to Code: Design Tokens & Dev Mode 2026 - understand the design token pipeline that Pencil builds on
• AI-Augmented Development: The Complete Guide - master the AI coding tools that power Pencil’s generation
• Building Design Systems from Scratch - learn the design system fundamentals that make Pencil’s built-in kits effective