Pencil.pen file in the reporiviera.penvector canvas file, Git-versionedUI kitbuilt-in componentsEdit: calmer headlineedit on the canvas or prompt block
Pencil 
OpenDesign Fully Open-Source Pencil.dev Alternative: OpenDesign
OpenDesign and Pencil are unusually close: both are agent-driven and keep design as files in your repo under Git. OpenDesign is the free, fully open-source, provider-neutral alternative — Apache-2.0 for the entire application, BYOK with any major coding agent, and output that spans UI, decks, prototypes and a design system. This page says where they overlap, where Pencil's canvas genuinely wins, and how to move across.
Verdict, by task12 / Pencil
OpenDesign vs Pencil, three different needs
Start in the Right Place
This page · choosing
OpenDesign or Pencil?
A verdict by situation, one brief run in both tools, a dated feature comparison and the conditions that flip the answer.
Read the verdict Already on PencilMove a .pen Design Into OpenDesign
Both keep files in the repo, so nothing is lost to a cloud export. What moves, what stays on the canvas, and the four steps.
See what moves A different questionLeaving Figma, Not Pencil?
If the canvas you are leaving is Figma's, that comparison covers collaboration and Dev Mode too.
Read OpenDesign vs FigmaOn this page Overview
What each one is
Pencil vs OpenDesign: What Each Tool Is
Pencil and OpenDesign share the big idea — agent-driven design kept as files in your repo — and differ on what is open, which agents are first-class, and how wide the output goes. OpenDesign writes this comparison about its own product and is not affiliated with Pencil.
Short answer. OpenDesign is a free, fully open-source (Apache-2.0), local-first Pencil alternative: the same agent-driven, files-in-the-repo idea, with the whole application open rather than only the file format, provider-neutral BYOK across Claude, Codex, Cursor, Gemini, OpenCode and Qwen, and output that spans UI, landing pages, decks, prototypes and a DESIGN.md design system. It has no vector canvas; if hand-editing a Figma-like canvas inside your IDE with native Figma paste is what you value, keep Pencil.
Pencil
Pencil (pencil.dev) is "design on canvas, land in code": an infinite vector design canvas that lives inside your IDE and codebase, backed by a16z Speedrun. Design files use an open, documented .pen JSON format that sits in your repo under Git, and a local MCP server lets AI agents read and write them. It ships built-in UI kits and native Figma copy-paste, and is free while in early access.
- RunsLocal desktop app, IDE extension and local MCP server
- ModelMCP with several agents, optimized for Claude Code
- Output.pen JSON files in your repo; UI screens and components to code
- CostFree in early access; paid plans signalledno published caps
OpenDesign
OpenDesign is a local-first, open-source design agent you point your own coding agent at. Skills and a portable brand live as files in your repo; the desktop app renders and reviews the result.
- RunsDesktop app and local daemon on your machine
- AgentYours: Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen and more
- OutputFiles in your project directory
- CostApache-2.0; you pay your own provider for API usage
Where they overlap
Agent-driven design files in the repo under Git, and UI that becomes code. That is most of what both tools do, and the whole of what the rest of the page compares.
What this page does not claim
That OpenDesign has a vector canvas, a layers panel, built-in UI kits or native Figma paste, or that .pen files convert automatically. If the canvas is the job, the verdict below says keep Pencil.
Verdict
Pencil or OpenDesign? The Verdict by Situation
Pick Pencil if…
- You want to edit a mature, Figma-like vector canvas by hand, inside Cursor or VS Code.
- You paste from Figma often and need layers and auto-layout intact.
- Built-in UI kits and a Claude-first agent experience are what you value most.
Pick OpenDesign if…
- You want the whole tool open source — fork it, audit it, self-host it — not only a documented format.
- You want "free" to stay free, with no vendor cap after early access; you pay only your own model spend.
- You want provider-neutral BYOK: Claude, Codex, Cursor, Gemini, OpenCode and Qwen all first-class.
- You want UI, decks, prototypes and a design system rendered from one DESIGN.md.
Run both if…
- Designers draw in Pencil's canvas; the rest of the artifacts render from the same brand in OpenDesign.
- You want an open fallback in case early-access pricing or Claude-first tuning stops suiting you.
- Both keep files in the repo, so running them side by side costs little.
Same brief, two results
The Same Brief in Pencil and OpenDesign
A comparison is only as honest as its inputs. The same brief and the same brand go into Pencil and into OpenDesign; what comes back, how it is edited and what else you can render from it is what you compare. The panels below are illustrations, not screenshots; the 20-minute test lets you run the brief yourself.
Brief · identical in both tools
Design a landing page for a small studio that books slow-travel stays. One hero with a strong headline, three featured places, a short note on how booking works, and a final call to action. Desktop and phone.
- Brand
- Paper background, Albert Sans, one green accent, 8px radius
- Breakpoints
- 1440 desktop, 390 mobile; no horizontal scroll
- Edit test
- After the first result: "make the headline calmer, swap the second place"
- Record
- Model, date, time to first result, edits needed, export format
Pencil.pen file in the repoOpenDesign + your agentfiles in the reporiviera-landing.htmlnew · v2DESIGN.mdboundEdit: calmer headlinepoint at the element, agent revises
IllustrativeBoth panels are illustrations drawn for this page, not screenshots of either tool, and the verdict does not rest on them. Run the brief yourself with the 20-minute test below and note the points listed here so the two results can be compared fairly.
What to note · both tools
Model and version, run date, time to first usable result, number of edits to reach "done", what the export contained.
What to note · Pencil
Which agent ran over MCP and how it behaved outside Claude, whether the .pen file round-tripped to code cleanly, what the Figma paste preserved.
What to note · OpenDesign
Agent and key used, whether DESIGN.md was respected without re-prompting, both breakpoints checked, versions kept as files.
Feature by feature
OpenDesign vs Pencil, Feature by Feature
Nine dimensions where OpenDesign and Pencil differ in practice: license, runtime, design files, account, cost, model, primary surface, output range and maturity. Pencil facts were checked against public sources on 2026-09-06; early-access terms can change.
| Dimension | OpenDesign | Pencil |
|---|---|---|
| License | Apache-2.0; the whole app is open source | Closed-source app; only the .pen format is documented |
| Runtime | Local daemon and desktop app | Local desktop app, IDE extension and local MCP server |
| Design files | Files in your repo: DESIGN.md and artifacts | .pen JSON files in your repo |
| Account | None required | Sign-in, early access |
| Cost | Free and open source; your own model spend | Free in early access; paid plans signalledterms may change |
| Model | Provider-neutral BYOK: Claude, Codex, Cursor, Gemini, OpenCode, Qwen | MCP with several agents, optimized for Claude Code |
| Primary surface | Agent-driven: brief to artifacts, plus a review UI | Figma-like vector canvas you edit directly; agent via MCP |
| Output range | UI, landing pages, decks, prototypes, design systems | UI screens and components to code |
| Self-host / fork | Yes | No; the app is closed-source |
Where Pencil wins
The hands-on canvas: a mature, Figma-like surface you edit directly, with native Figma paste that keeps layers and auto-layout, built-in UI kits, and all of it inside your IDE. A developer who designs never leaves the editor.
Where OpenDesign wins
Ownership and range: the whole app is open source, BYOK is provider-neutral instead of Claude-first, free stays free because there is no vendor to monetize you, and the output spans far more than UI-to-code.
Decision
When OpenDesign Is the Right Pencil Alternative
Developer who designs in the IDE
Draw the screen by hand, next to the code, with Claude Code
PencilThe canvas inside Cursor or VS Code, native Figma paste and Claude-first tuning are exactly this person's workflow. OpenDesign has no canvas to offer them.
Not a fit when the team runs Codex, Gemini or Qwen rather than Claude.
Team with an open-source policy
The whole tool must be auditable and forkable
OpenDesignApache-2.0 for the agent, the skill library and the renderer; the .pen format being documented is not the same thing.
Not a fit when the policy is satisfied by an open file format alone.
Brand across many artifact types
Decks, landing pages, prototypes and UI from one brand
OpenDesignOne DESIGN.md renders all of them without re-prompting; Pencil's scope is UI to code. See the design system solution.
Not a fit when UI screens are the only deliverable.
Pencil user hedging early access
Free today, paid plans signalled
Run bothKeep drawing in Pencil; extract the brand into DESIGN.md and render the rest in OpenDesign so nothing depends on one vendor's pricing. Both keep files in the repo.
Not a fit when you expect .pen files and DESIGN.md to stay in sync automatically; they do not.
Move a design across, or run both
How to Move a Design from Pencil to OpenDesign
Both tools keep design as files in your repo, so there is no lossy cloud export to fight. What moves is the brand and the brief, through a one-time extraction from a Pencil export; the .pen canvas files stay editable in Pencil.
| Moves across | |
|---|---|
| The brand | Point your agent at a Pencil export, a Figma paste or a screenshot; it extracts colours, type, spacing and voice into DESIGN.md. |
| Prompts | Plain text. Prompt blocks from the canvas paste into an OpenDesign brief as-is. |
| Generated code | Code Pencil produced from a .pen file can serve as a structural reference; the agent re-renders under DESIGN.md rather than patching it. |
| Stays in Pencil | |
| .pen canvas files | Vector layers do not convert; re-render from the brief and DESIGN.md. |
| Built-in UI kits | Shadcn-style kits are re-expressed through DESIGN.md and your own components. |
| Native Figma paste | If a teammate keeps pasting from Figma, that step stays in Pencil. |
-
Install OpenDesign and open the same repo
Download the desktop app and open the repo that already holds your .pen files as a project. The quickstart covers the source-build path separately.
-
Export one Pencil screen as a reference
Export a PNG (or the generated code) of the screen whose look you want to keep and add it to the project.
-
Ask the agent to extract the brand into DESIGN.md
Review the file by hand: one accent, the right fonts, the right radius. This is the only migration step that needs judgment.
-
Render the original brief against the new brand
Pick a skill and render; from here every skill — UI, decks, prototypes — renders in your brand without re-prompting, and each version is a file.
Running both
Keep Pencil for hand-editing UI on the canvas; use OpenDesign for everything rendered from the brand. Both live in the same repo; update DESIGN.md when the canvas changes. Nothing syncs automatically.
Fallback and loss
Little is lost by trying: .pen files stay in the repo either way. If an OpenDesign render fails, the last version stays on disk and the brief is unchanged; retry with the same agent or a different one.
A 20-minute test
Try OpenDesign on a Screen You Already Drew in Pencil
Take a screen you drew in Pencil and rebuild it in OpenDesign with any agent you like. If the result is not usable in twenty minutes, this comparison has told you something worth knowing.
1The task
Here is a PNG export of a screen I designed in Pencil. Extract its brand into DESIGN.md, then rebuild the same screen from this brief using my design rules, and add a one-slide deck cover in the same brand. Check the screen at desktop and mobile widths.
- 01Pencil screen inA PNG export of the .pen screen whose look you want to keep.
- 02DESIGN.md outYour brand extracted into a file next to the .pen files — review it by hand.
- 03Screen and deck cover, renderedThe screen at desktop and phone plus a deck cover in the same brand, then one edit by pointing at an element.
2It worked if…
- DESIGN.md is committed next to the .pen files and you would sign off on its tokens.
- The screen renders at 1440 and 390 with no horizontal scroll, and the deck cover shares the brand.
- One edit ("calmer headline") applied by pointing at the element, with an agent other than Claude if you like.
- Two versions sit side by side as files; nothing was overwritten silently.
If it did not work: check that your agent is connected and authenticated for your chosen mode, then retry with a smaller brief before judging the tool.
Other options
Other Pencil.dev Alternatives
FAQ
Pencil.dev Alternative: FAQ
Is Pencil (pencil.dev) open source?
Not the app. Pencil is a closed-source, a16z-backed product; what is open is the .pen file format, which is documented but can change. OpenDesign is fully open source under Apache-2.0 — the entire application, not only a format.
Is Pencil.dev free?
It is free today, explicitly in early access, and the founders have signalled paid plans and limits. OpenDesign is free because it is open source; you bring your own agent key, so model spend bills to you with no vendor cap.
What is the difference between OpenDesign and Pencil?
They are close: both are agent-driven and keep design as files in your repo under Git. OpenDesign is fully open source, provider-neutral BYOK rather than Claude-first, and renders UI, decks, prototypes and a design system; Pencil is a vector canvas in your IDE focused on UI to code. The verdict lists the conditions for each.
Does Pencil work with agents other than Claude?
Yes, it connects several agents over MCP, but it is optimized for Claude Code and reviewers report a weaker experience elsewhere. OpenDesign treats Claude, Codex, Cursor, Gemini, OpenCode and Qwen as first-class.
Can I keep using Pencil alongside OpenDesign?
Yes. Both keep files in the same repo, so running them side by side costs little: draw in Pencil, render everything else from DESIGN.md in OpenDesign. See what moves and what stays.
Is OpenDesign really open source?
Yes. It lives at github.com/nexu-io/open-design under Apache-2.0 and is self-hostable.
Is OpenDesign affiliated with Pencil?
No. OpenDesign is an independent open-source project. Pencil is a separate, a16z-backed product at pencil.dev; this is an unaffiliated comparison written by the OpenDesign team.
Try OpenDesign on One Real Screen
Rebuild a screen you drew in Pencil with any coding agent, judge the round trip, then decide. Choose the situation that matches you; the page does not detect your setup.