PencilMulti-agent AI design: brand book to website, in your editor
Visit

Pencil Review

Multi-agent AI design: brand book to website, in your editor

Content & creative production
Last updated August 28, 2026
The take

A Figma-like canvas where AI agents build your website from a brand book, free today, rough enough that it can still crash on you.

Great for

Developers and hands-on PMMs who live in an editor and want to go from brand references to a working page without opening a design ticket.

The catch

It is early-stage, crashes happen, there is no autosave, and every generation runs on your own Anthropic bill, not Pencil's.

Bottom line

Reach for it when you want agentic design to code inside your IDE. If you need multiplayer, autosave, and a mature design system, stay in Figma.

At a glance
Starting priceFree (early access)
Free tierYes (currently free; bring your own Claude/Anthropic)
Pricing modelFree app, you pay Anthropic for the AI usage
Best forDevelopers and design-minded PMMs who work in an IDE
Key integrationsClaude Code, Cursor, VS Code, Codex, Figma (import + plugin export)
Watch out forEarly-stage crashes, no autosave, and a separate Anthropic bill
Feature checklist
Text-prompt to UI generationbuild full pages from a prompt
Multi-agent design over MCPClaude Code, Codex, Cursor; agents run in parallel
Figma-like manual editinglayers, properties, drag-and-drop
Import brand book / Figma refs.fig import + copy-paste, no native connector
Export to code (React/HTML/CSS)via the connected agent
Export back to Figmacommunity plugins, not native
Design systems + style guidesShadcn, Lunaris, Halo, Nitro + style library
Two-way design-to-code syncmanual edits need a re-prompt, unlike Lovable/v0
Real-time collaborationno multiplayer, no browser version
Autosavecrashes can lose work
Git version controllocal .pen JSON files pushed to GitHub
Free to useearly access; bring your own Anthropic
What 6 real users said
3 positive1 mixed2 critical

What you're actually getting

Pencil is an infinite canvas that an AI agent can drive. It looks a lot like Figma, with a layers panel, a properties inspector, and a canvas in the middle, so anyone who has used Figma finds it fast.

The difference is the agent. You connect Claude Code, Codex, or Cursor over an MCP server, prompt it, and watch it build the design component by component, right on the canvas. Tom Granot ran five agents in parallel to generate a full website from a Figma brand book.

Your whole canvas is a local .pen file, plain JSON you version with Git like any codebase. Natural for engineers, a real shift for designers used to the cloud.

To me at least, this is probably one of the coolest things I've seen recently in AI. It really is a workflow changer.
Tom Granot, Founder, SyntaxGTMYouTube (SyntaxGTM) · February 25, 2026 ↗

Where it earns its keep

The workflow is the win. Import a brand book from Figma, attach a design system, prompt the agent, and get a full page you can then export to real React, HTML, and CSS. All of it inside the editor a developer already lives in.

For product marketers, that means going from brand guidelines to a landing-page mockup without waiting on a designer. Tom calls it one of the coolest things he has seen recently in AI, and a designer on r/ClaudeDesign preferred its two-way loop with Claude Code over Claude Design.

Manual editing is genuinely good too: drag components, tweak the properties panel, and drop prompt blocks on the canvas that rerun in the agent, so a prompt becomes a reusable artifact instead of buried chat history.

It came to a really decent outcome without any concrete feedback. A lot of the work here is to prompt it correctly.
Tom Granot, Founder, SyntaxGTMYouTube (SyntaxGTM) · February 25, 2026 ↗

Where it'll bite you

Stability is the first trap. Reviewers hit crashes often enough to notice, and there is no autosave, so a bad session can lose work with no recovery. Commit early, commit often, and keep runs short.

The sync is one-way. Edit a component by hand and the code does not update on its own, you re-prompt the agent, unlike the select-and-edit-to-code loop in Lovable or v0. Figma export is not native either, it runs through community plugins.

There is no real-time collaboration and no browser version yet, and the Git-based file workflow is friction for non-technical teammates. macOS is smoothest, Linux is reported, and the VS Code version drew a lukewarm reaction from early users.

Pencil has multiple issues that I think it's not suitable for professional use right now. Not stable enough, it's relatively common to hit a crash.
Xinran Ma, Product Designer, founder of Design with AIDesign with AI (Medium) · April 19, 2026 ↗

What it costs, really

The app is free during early access, and the vendor says paid plans may come later with terms disclosed first.

The sticker price hides the real one. Pencil drives an external agent, so heavy generation runs on your own Claude Code and Anthropic usage, billed by Anthropic, and reviewers warn token consumption can climb fast. A Claude Code subscription starts at $20/mo with API overage on top, so meter one real project before you promise a budget.

I sincerely feel the experience with pencil.dev was superior to using Claude Design, not just from the interactive process but also the outcome.
OvertiredEngineer, r/ClaudeDesign posterReddit · June 28, 2026 ↗
I started trying out pen.dev today, the version integrated into VS Code. I didn't like the integrated version; I want to try the desktop app.
Mira_______, r/UXDesign posterReddit · August 26, 2026 ↗
17 sourcesEvery claim on this page is traceable. Open the receipts.
  1. 1pen.dev homepageCurrent identity and positioning; vendor claims.official
  2. 2pen.dev pricingFree early-access status and future-pricing statement.official
  3. 3pen.dev documentationProduct docs: canvas, components, AI, .pen format.official
  4. 4SyntaxGTM Pencil walkthrough (Tom Granot)PMM end-to-end demo: Figma brand book to full site via multi-agent AI, export to Figma/code.practitioner
  5. 5Better Stack Pencil guideMCP agent model, setup, multi-page build; mislabels MCP acronym.independent
  6. 6Better Stack Pencil videoLive demo of Claude Code as a design tool via Pencil.independent
  7. 7Xinran Ma / Design with AI reviewBalanced hands-on review with a clear issues list; author runs a paid course.independent
  8. 8Brendan O'Connell Paper vs PencilAgentic MCP design-tool comparison; directional.independent
  9. 9Banani Pencil.dev reviewCompetitor review; confirms free status and limitations; commercially interested.vendor
  10. 10Abaka Pencil viral writeupLaunch and viral context; editorial tone.editorial
  11. 11Reddit r/ClaudeDesign comparisonPrefers Pencil's two-way MCP loop; notes missing native Figma export.practitioner
  12. 12Reddit r/UXDesign pen.dev threadDisliked the VS Code version; wants the desktop app.practitioner
  13. 13Reddit r/FigmaDesign importer pluginCommunity Pencil-to-Figma plugin; confirms export gap.practitioner
  14. 14DesignCourse Pencil reviewDesign-channel review of the vibe-designed-layouts problem.practitioner
  15. 15Ai Verdict Pencil reviewDesign-to-code handoff review and tutorial.practitioner
  16. 16G2 Pencil listingAmbiguous identity, no usable score; excluded as evidence.public
  17. 1710x EditorialNon-clickable decision marker; not external evidence.editorial

Watch it work

Real tutorials and reviews from YouTube, not ours.

pencil.dev: The AI Design Tool Every PMM NeedsSyntaxGTM (Tom Granot) · The best watch for marketers. Tom imports a brand book from Figma, runs five AI agents in parallel to generate a full website, and exports the result back to Figma and code. Real end-to-end, no speed-run editing.Watch on YouTube ↗
Pencil AI - Solves the 'Vibe Designed' Layouts ProblemDesignCourse · A designer's-eye review from a large design channel. Good for judging whether the AI-generated layouts hold up to a trained eye before you commit.Watch on YouTube ↗
How I Turned Claude Into a Design Tool with Pencil.devBetter Stack · A live demo of the Claude Code plus Pencil loop, including copying designs from Figma. Useful for seeing the MCP setup and the design-to-code handoff in action.Watch on YouTube ↗
STOP Switching Between Figma & Code! (Pencil.dev Review & Tutorial)Ai Verdict · A review-and-tutorial that tests whether the manual design-to-dev handoff is really dead. A balanced second opinion alongside the walkthroughs.Watch on YouTube ↗

FAQ

Pencil is an AI-native design tool built around an infinite canvas that an AI agent can control. It looks like Figma, with layers and a properties panel, but you connect an agent like Claude Code over MCP, prompt it, and watch it build the design on the canvas, then export to code or Figma. The pencil.dev domain now redirects to pen.dev after a mid-2026 rebrand.
Yes, the app is currently free during early access. The vendor says it may introduce paid features or plans later, with terms disclosed before any charge. The real cost is not the app: generation runs on your own Claude Code and Anthropic usage, billed separately by Anthropic.
Pencil runs an MCP server in the background and auto-detects installed CLI agents. Once connected, Claude Code (or Codex or Cursor) can read the canvas context and write to it, adding frames, inserting components, and applying styles from your prompts. Tom Granot ran five agents in parallel to build a full website this way.
Yes, that is its headline use case. You download your Figma file locally, import it into Pencil or copy-paste with layers and styles intact, attach a design system, then prompt the agent to generate the site. There is no native one-to-one Figma connector, so the import is a manual step.
Yes. Through the connected agent, Pencil exports to React, HTML, and CSS or Tailwind. Because the canvas is a plain .pen JSON file versioned with Git, engineers can treat the design like any other code in the repo.
Not natively. Export to Figma runs through community plugins such as Pencil to Figma and pen.dev to Figma. It works, but it is a manual step, and a missing native export is the most common gap practitioners mention.
Figma is a hosted, multiplayer design hub with autosave, a browser version, and a mature design system. Pencil is a local, editor-native canvas that an AI agent drives, with real code output. Reach for Pencil to go from prompt to page in your IDE, and keep Figma for collaborative design and handoff.
Lovable and v0 are prompt-to-app tools with two-way sync and hosting, where selecting a component and editing updates the code automatically. Pencil's sync is one-way: a manual canvas edit needs a re-prompt to update the code. Pencil gives more granular design control on the canvas, Lovable and v0 give a tighter live loop.
The recurring themes are stability and cost. Reviewers hit crashes and note there is no autosave, so work can be lost. Token consumption on the connected agent can climb fast, the design-to-code sync is one-way, Figma export is not native, and there is no real-time collaboration yet.
Developers and product engineers who already work in Cursor, VS Code, or Claude Code, and design-minded PMMs or founders who need a website or landing-page mockup from brand guidelines without a design ticket. Teams that need multiplayer, autosave, and a browser version should wait or stay in Figma.

Same job, other tools

Also filed under Content & creative production:

AirOpsGoverned content operations platform fal.aiGenerative media model API platform GammaAI presentation and content workspace