Pencil.dev (now pen.dev) is an AI design canvas that lives inside your IDE — Cursor or VS Code. Designs are grounded in your actual codebase, components, and design tokens. Its MCP server lets AI coding agents iterate on designs using your real code as context. It's the most codebase-coupled design tool we've tested. But it's in early access and requires developer-level setup. Here's an honest, independent review.
Pencil.dev — recently rebranded as pen.dev — is an AI design canvas that lives inside your code editor. Unlike standalone design tools (Figma, Paper.design) that exist in a separate application, Pencil runs as an extension inside Cursor or VS Code. This means your design canvas is literally next to your code, and designs are grounded in your actual codebase: real components, real design tokens, real styling systems.
Like Paper, Pencil offers an MCP (Model Context Protocol) server that lets AI coding agents connect to the canvas. But where Paper is a web-native standalone canvas that agents connect to from outside, Pencil is codebase-native — the canvas reads from and writes to your codebase directly. This makes Pencil the most codebase-coupled design tool available. For PMs who work in the same environment as their developers, see our Figma vs Paper vs Pencil comparison and Paper.design review for the broader landscape.
Pencil's biggest differentiator is that its canvas is grounded in your actual codebase. When you design a component, it uses your real React/Vue/Svelte components, your real design tokens, and your real CSS/styling system — not generic shapes or approximations. This means what you design is what your developers will build, because it's already built from the same components. For PMs who prototype UI for products with established component libraries, this eliminates the design-to-code translation gap entirely.
Pencil runs as an extension inside Cursor or VS Code, so the design canvas is literally a tab away from your code. No switching between Figma and your editor, no exporting assets, no copying design specs into tickets. For PMs who work alongside developers in the same IDE (or who are PM-engineers), this proximity is a genuine workflow advantage — design and code live in the same environment.
Pencil's MCP server lets AI coding agents (Cursor's built-in AI, Claude, Windsurf) read from and write to the design canvas. An agent can look at your design, understand the component structure, and generate code that matches it — using your real codebase as context. This creates a bidirectional loop: designs inform code generation, and code structure informs design. For PMs in agentic development workflows, this is the tightest design-to-code integration available.
Pencil is free during early access, including the canvas, MCP server, and IDE extensions. No credit card required, no feature gating. For PMs evaluating AI design tools, the free period is a genuine opportunity to test whether codebase-grounded design fits your workflow. Pricing will come later, but the early access period lets you build real workflows before paying.
Pencil only works inside an IDE — Cursor or VS Code. If you're a PM who doesn't live in a code editor, Pencil is inaccessible without adopting a developer workflow. Figma and Paper.design are standalone tools that any PM can use regardless of technical background. For PMs who want to prototype UI without opening a code editor, Pencil is the wrong tool. See our Paper.design review for a standalone alternative.
Pencil is in early access. Features may change, the product may be rebranded (it's already transitioned from Pencil.dev to pen.dev), and pricing hasn't been announced. For PMs who need a stable, production-ready design tool, the early access status is a real risk. The tool is promising but not yet a reliable platform you can build a team workflow around.
Like Paper, Pencil's most powerful feature — MCP integration with AI agents — requires technical setup. You need to install the IDE extension, configure the MCP server, and understand how to use AI agents with the canvas. For PMs without developer support, this is a barrier. The canvas itself is usable without MCP, but you'd be missing the agentic workflow that makes Pencil unique.
Because Pencil lives in the IDE, non-developer stakeholders (executives, marketing, sales) can't easily view or comment on designs. Figma's shareable links and viewing model are designed for cross-functional collaboration. Paper.design's web-native canvas is shareable via URL. Pencil's designs are in the IDE — accessible primarily to developers. For PMs who need stakeholder review workflows, this is a significant limitation.
Pencil's value proposition is narrow: it's best for PMs who work in the same IDE as their developers, have established component libraries, and want design tightly coupled to code. That's a real and growing audience (especially in AI-native startups and PM-engineer roles), but it excludes the majority of PMs who use standalone design tools. For the broader PM audience, Figma or Paper.design is more accessible.
Pencil is free during early access. Here's what's available and what's coming.
| Plan | Price | What's included |
|---|---|---|
| Early Access | Free | Full access to the Pencil canvas, MCP server, and IDE extensions (Cursor, VS Code) during early access. Design on a codebase-grounded canvas, connect AI coding agents via MCP, and sync designs with your codebase. No credit card required. Pricing will be introduced as the product matures. |
| Future paid plans | TBD | Pencil (now pen.dev) has indicated pricing will be introduced post-early-access. Expected to include tiered plans based on team size, project count, and advanced collaboration features. No official pricing has been announced yet. |
For comparison: Figma Professional is $15/editor/mo, Paper.design is free in open alpha, v0 Premium is $20/mo. See our free AI tools guide for cost-effective options.
If Pencil's IDE requirement or early access status doesn't fit your workflow, here are four alternatives worth considering.
A web-native AI design canvas built on real HTML/CSS with MCP agent integration. The opposite end of the spectrum from Pencil — a standalone canvas rather than IDE-native. Best for PMs who want a design tool separate from their code editor. See our Paper.design review.
The industry-standard design canvas with a massive ecosystem. Figma Make adds AI-powered design-to-code. Best for PMs in established design organizations. See our Figma alternatives guide and Figma vs Paper vs Pencil comparison.
Prompt-to-UI generation that produces React/Tailwind code. Simpler than Pencil for quick prototypes, but doesn't ground in your existing codebase. Best for PMs who want fast UI generation. See our v0 alternatives guide.
The AI code editor that Pencil integrates with. If you're evaluating Pencil, you're likely already using Cursor. See our Cursor review for the broader AI coding landscape.
Pencil.dev is the best AI design canvas for PMs who work alongside developers in an IDE.Its codebase-grounded canvas — using your real components, tokens, and styling — eliminates the design-to-code gap from the developer's side. The MCP integration creates a bidirectional design-code loop that's tighter than any other tool. For PM-engineers and developer-adjacent PMs in AI-native teams, Pencil is genuinely innovative.
But it's not for the majority of PMs. It requires Cursor or VS Code, which excludes non-technical PMs. Early access means instability and unknown pricing. MCP setup requires developer knowledge. And it lacks the standalone collaboration features that cross-functional teams need for stakeholder review. For most PMs, Figma or Paper.design remains more accessible.
Recommendation: If you're a PM who lives in Cursor or VS Code and wants design tightly coupled to your codebase, Pencil is worth adopting during its free early access. If you need a standalone design tool that non-developers can use, stick with Figma or evaluate Paper.design. See our AI prototyping tools guide for the full landscape.
5 vetted AI tools for B2B SaaS product managers, delivered to your inbox each weekday morning. No spam, no sponsorships, unsubscribe anytime.
50+ AI tools categorized by PM use case — prototyping, evaluation, research, analytics, roadmapping, and more. Each with a one-sentence description, a why-it-matters-for-PMs line, and a link. Free PDF, no credit card required.
Pencil grounds design in your codebase. Signal Brief grounds your AI tool awareness in daily curation. 7-day free trial, then $10/mo or $96/yr. Cancel anytime. See a sample issue first.
No credit card for the first 7 days. Cancel anytime.
Yes — if you work alongside developers and use an AI code editor (Cursor, VS Code). Pencil's IDE-native canvas means designs are grounded in your actual codebase and components, eliminating the design-to-code translation gap from the other direction. The MCP integration lets AI agents iterate on designs using your real code as context. For PMs who prototype in the same environment as their developers, Pencil is genuinely innovative. The main caveat is that it's in early access and requires technical setup. See our Figma vs Paper vs Pencil comparison for context.
They sit on opposite ends of a spectrum. Pencil is codebase-native — it lives inside your IDE (Cursor, VS Code) and designs are grounded in your actual codebase, components, and design tokens. Paper is web-native — a standalone canvas built on HTML/CSS that AI agents connect to via MCP. Pencil is better for PMs who work in the same environment as developers and want design tightly coupled to code. Paper is better for PMs who want a standalone design tool with production-faithful output. See our Paper.design review.
Pencil brings design into the development environment — the canvas lives inside your IDE and reads from your codebase. Figma is a standalone design platform with its own rendering engine, massive plugin ecosystem, and established collaboration features. Pencil's advantage is codebase grounding: designs use your real components, tokens, and styles. Figma's advantage is maturity, ecosystem, and team collaboration. For PMs in established design organizations, Figma remains the standard. For PMs in developer-heavy teams who want design closer to code, Pencil is worth evaluating. See our Figma vs Paper vs Pencil comparison.
Pencil offers an MCP (Model Context Protocol) server that lets AI coding tools (Cursor, VS Code with AI extensions, Claude) connect to the Pencil canvas. This means an AI agent can read your designs, understand your component structure, and generate or modify code that matches the design — all using your real codebase as context. The MCP integration is what makes Pencil's design-to-code workflow bidirectional: changes on the canvas can inform code generation, and code structure can inform design.
Pencil (now pen.dev) is free during early access, including the canvas, MCP server, and IDE extensions. The team has indicated pricing will be introduced after early access, but no paid plans or prices have been announced. For PMs, the free early access period is a genuine opportunity to evaluate the tool. For comparison, Figma Professional is $15/editor/mo, v0 Premium is $20/mo, and Paper.design is free in open alpha. See our free AI tools guide for more options.
They solve different problems. Pencil.dev helps you design UI grounded in your codebase. Signal Brief helps you discover the AI tools worth using — 5 new AI tools every weekday morning with a PM-specific lens. Many subscribers use Signal Brief to discover new AI design tools, code editors, and prototyping platforms, then evaluate them alongside Pencil. See our sample issue to see the format.
5 new AI tools every weekday morning. 7-day free trial, then $10/month or $96/year. Cancel anytime. No sponsorships, ever.
Questions? Email [email protected]