OpenPencil: The Free AI Design Editor That Opens Your Figma Files

OpenPencil: The Free AI Design Editor That Opens Your Figma Files

Open-source. AI-native. Figma-compatible. Free forever.

OpenPencil is a desktop design editor that opens your Figma files, runs entirely on your machine, costs nothing, and has AI built in at the core. Not bolted on later. Built in from the start.

It showed up on GitHub on February 27, 2026 — two weeks ago at the time I'm writing this — and has already pulled 2,224 stars and 80K+ views on a single YouTube Short. That's not viral hype. That's pent-up demand. Designers have been watching Figma slowly wall off its ecosystem, and when something credible showed up, they noticed immediately.

The timing isn't coincidental. In February 2026, Figma quietly stripped the --remote-debugging-port flag from its desktop app, killing the main mechanism third-party tools used for automation. OpenPencil is a direct response to that. Built by a developer who apparently got tired of waiting for Figma to care about automation workflows, it implements the full Figma Kiwi binary format — 194 schema definitions, ~390 fields — and ships with an MCP server so Claude Code can place and style components on a live canvas.

Why OpenPencil is different from the alternatives

The open-source design tool landscape isn't empty. Penpot has been around for years. Canva is everywhere. So why does OpenPencil feel different?

Penpot is genuinely open-source and self-hostable, but it's not AI-native. You can hook up external tools if you're willing to build the integration yourself, but there's nothing built in. It also uses its own file format — great for neutrality, but you can't open a .fig file in Penpot. If your team's design library lives in Figma, Penpot doesn't help you migrate.

Figma is the benchmark. It's polished, has a plugin ecosystem, prototyping, DevMode, and years of refinement. But it's cloud-only, account-required, increasingly expensive for teams, and now actively hostile to automation tooling. The February 2026 debugging port removal wasn't an accident. Figma is pulling up the drawbridge.

Canva is a different category entirely. It's great for social graphics and quick templates. It's not a vector design tool, it doesn't work with design systems, and it has no Figma file compatibility. Comparing them isn't really fair to either.

OpenPencil sits in a gap none of these fill: a local-first, Figma-compatible design editor with AI built into the core interaction model. It's not trying to replace Figma for large enterprise teams today. It's trying to be the tool that actually works the way designers who care about automation need it to work.

How OpenPencil works

Getting it running

Installation is deliberately simple. On macOS:

brew install open-pencil/tap/open-pencil

On Windows, there's an MSI installer. On Linux, an AppImage or .deb. If you don't want to install anything, there's a browser version at app.openpencil.dev.

The app itself is about 7MB. It starts fast. No account required, no telemetry prompt on first launch, no cloud sync to configure.

Working with Figma files

This is the headline feature. OpenPencil reads and writes native .fig files using a full implementation of Figma's Kiwi binary schema. You can:

The import actually decodes the full schema — NodeChange messages included — which means complex files with components, auto-layout, and nested frames come through intact rather than being flattened into a static snapshot.

Drawing and editing

The core toolset covers what most design work requires: shapes, a pen tool with vector networks, rich text, and auto-layout. It's not yet at Figma's depth on prototyping or interactive components, but for static design work — UI screens, landing page mockups, component libraries — the fundamentals are there.

The built-in AI

OpenPencil ships with a BYOK (bring your own API key) AI assistant that has tool use. You connect it to your preferred model, and it can interact with the canvas directly — not just generating text suggestions you paste in, but actually placing and styling elements.

The MCP server is where this gets genuinely interesting for people already using Claude Code.

Tutorial: Design a landing page with AI using OpenPencil and Claude Code

If you're already using Claude Code for development workflows (if you're not, the vibe marketing post here has useful context on how these AI-driven workflows actually operate), hooking it up to OpenPencil takes about five minutes.

Step 1: Install OpenPencil and confirm it runs.

Open it, create a new file, make sure a blank canvas appears. Nothing fancy yet.

Step 2: Start the OpenPencil MCP server.

OpenPencil ships a headless CLI and an MCP server. From your terminal:

open-pencil mcp

This exposes the canvas over a local socket that Claude Code can connect to.

Step 3: Add OpenPencil as an MCP server in Claude Code.

In your Claude Code MCP config, add the OpenPencil server entry. The exact config format is in the OpenPencil docs on GitHub, but it's a standard local stdio or socket entry.

Step 4: Describe what you want.

Now, in a Claude Code session, you can give design instructions and watch them execute on the canvas in real time. Something like:

"Create a hero section with a dark background, centered headline in 48px, a subtitle in 18px, and a primary CTA button. Use the Inter style guide from the gallery."

Claude places components, applies styling, adjusts spacing. You see it happen in the OpenPencil window as the instructions execute. It's the same principle as AI-assisted storyboarding with Claude Code — you're describing intent, not clicking through menus.

Step 5: Refine and export.

Once the AI has roughed out the layout, you work directly in the canvas to adjust. Export to .fig if you're handing off to a Figma-based team, or export assets directly.

This isn't a magic wand. The AI gets proportions wrong sometimes, needs iteration, and doesn't have the visual judgment a good designer brings. But for generating a first-pass layout to work from, it's faster than starting from a blank artboard.


FREE DOWNLOAD

20+ AI Design Prompts for OpenPencil

Ready-to-use prompts for dashboards, landing pages, mobile apps, and more.

No spam. Unsubscribe anytime.

What's inside:
• 20+ tested prompts for common design patterns
• Style guide templates for brand consistency
• MCP setup checklist for Claude Code integration

Where OpenPencil actually helps

Freelancers working across multiple client stacks. If some clients are on Figma and others aren't, OpenPencil lets you open, inspect, and edit Figma files without maintaining a paid Figma seat for every client context. The local-only model also means client files never touch a cloud you don't control.

Early-stage startups. A founding team that needs UI mockups but doesn't want to pay Figma's per-seat fees yet. OpenPencil covers the basics, the AI speeds up first-pass layout work, and you can hand off .fig files to any future designer without migration headaches.

Development teams using Claude Code. If you're already using Claude Code for code generation (and increasingly for agentic automation tasks), the MCP integration is a natural extension. You can describe UI changes and see them on canvas in the same session where you're editing the underlying code. It's a tighter loop than switching apps.

Educators and design students. Free. Offline. No account. Works on any platform. For teaching design fundamentals, those properties matter more than prototyping depth.

Where OpenPencil falls short

I want to be direct about this because the project is two weeks old and the enthusiasm around it could set unrealistic expectations.

It's not production-ready. The project's own GitHub description says this. Sixteen releases in two weeks is fast iteration, but it also means the surface area of known and unknown bugs is large. Using this for client work on a deadline is a risk.

Prototyping and interaction design are missing. Figma's click-through prototyping, smart animate, and interaction triggers don't exist yet in OpenPencil. If prototyping is a core part of your workflow, there's no substitute here.

No DevMode equivalent. Figma's DevMode lets engineers inspect spacing, grab CSS values, and export assets in a structured way. OpenPencil doesn't have this yet. Handoff to engineering is manual.

No plugin ecosystem. Figma has thousands of community plugins. OpenPencil has the headless CLI and MCP server, which is actually more powerful for AI-driven workflows, but if you rely on specific Figma plugins (Unsplash integration, icon packs, accessibility checkers), you'd need to rebuild those workflows.

Small team. One primary contributor, TypeScript and Vue frontend, Rust core. The pace has been impressive, but this is genuinely a one-person project right now. Long-term sustainability is an open question.

OpenPencil vs Figma vs Penpot vs Canva

Feature OpenPencil Figma Penpot Canva
Price Free Free tier + paid Free (self-host) Free tier + paid
AI built-in Yes (BYOK) Limited (beta) No Yes (limited)
Opens Figma files Yes Yes No No
Open-source Yes (MIT) No Yes (MPL-2.0) No
Works offline Yes No Self-host only No
MCP / Claude Code support Yes No No No
Auto-layout Yes Yes Yes No
Prototyping No Yes Yes Limited
Best for AI workflows, local-first, Figma migration Full design teams Privacy-first teams Marketing graphics

5 tips for getting the best results

1. Start with the style guide gallery. OpenPencil ships with professional style guides. Load one before you start prompting. The AI has better constraints to work within and your outputs will be more coherent from the first iteration.

2. Describe layout intent, not pixel values. Instead of "put a button 24px from the bottom," try "put a primary CTA at the bottom of the section with comfortable padding." The AI handles the specifics better when you describe relationships rather than coordinates.

3. Use copy-paste from Figma as your import path. If you're working alongside an existing Figma file, copying frames and pasting them into OpenPencil is more reliable than importing the whole .fig file for complex documents. Individual frames come through cleanly.

4. Keep the AI on one section at a time. Asking it to design an entire page in one prompt produces muddier results than asking it to build section by section — hero, then features, then pricing, then footer. Smaller scope, better output.

5. Save frequently. This is alpha-stage software. Save to .fig often. Don't hold a significant amount of unreversed work in memory if you can avoid it.

Verdict

OpenPencil is genuinely interesting. Not because it's polished — it isn't yet — but because it's filling a real gap that nothing else is filling. A local-first, Figma-compatible, AI-native design tool with an MCP server for Claude Code integration is a specific thing that didn't exist three weeks ago and now does.

The Figma automation situation that prompted this — the February 2026 removal of --remote-debugging-port — matters. It signals that Figma is prioritizing its platform control over the needs of developers who build around it. OpenPencil is the first credible response I've seen that isn't just "use Penpot instead" (different format, no migration path) or "wait for Figma to add AI" (waiting for a closed platform to add features you need is a strategy with a poor track record).

If you're a developer who uses Claude Code regularly and you've been frustrated that your AI-assisted workflows stop at the edge of your UI design work, install OpenPencil and spend an hour with the MCP integration. It's not production-ready, and you should know that going in. But the feedback loop between describing an interface and watching it appear on canvas is worth experiencing. It changes what you think is possible in a design workflow.


Newsletter

Get new posts in your inbox

One email when we publish. AI tools, video production, SaaS marketing. No spam.

Zero-Risk Offer

Ready to make videos people actually watch?

Book a 30-minute call and we'll create a custom video concept with storyboard for your product — whether you hire us or not.

Get Your Free Concept
Step 1 of 4

What are you looking for?

Step 2 of 4

What's your budget?

Step 3 of 4

What's your timeline?

Step 4 of 4

Where should we send your video concept?

We'll create a custom concept for your brand — yours to keep, no strings attached.

One more thing

Pick a time to chat

We'll learn about your brand and walk through your custom concept.