Open Pencil
AI-native design editor. Open-source Figma alternative.
Ask AI about Open Pencil
Powered by Claude Β· Grounded in docs
I know everything about Open Pencil. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
OpenPencil
Open-source design editor. Opens Figma files, built-in AI, fully programmable.
Status: Active development. Not ready for production use.
Try it online β Β· Download Β· Documentation

Installation
macOS (Homebrew):
brew install open-pencil/tap/open-pencil
Or download from the releases page, or use the web app β no install needed.
What it does
- Opens .fig files β read and write native Figma files, copy & paste nodes between apps
- AI builds designs β describe what you want in chat, 90+ tools create and modify nodes. Connect Anthropic, OpenAI, Google AI, OpenRouter, or any compatible endpoint
- Fully programmable β headless CLI, Figma Plugin API via
eval, MCP server for AI agents - Real-time collaboration β P2P via WebRTC, no server, no account. Cursors, presence, follow mode
- Auto layout & CSS Grid β flex and grid layout via Yoga WASM, with gap, padding, alignment, track sizing
- Tailwind CSS export β export any selection as HTML with Tailwind v4 utility classes
- ~7 MB desktop app β Tauri v2 for macOS, Windows, Linux. Also runs in the browser as a PWA
CLI
bun add -g @open-pencil/cli
Inspect .fig files
Browse node trees, search by name or type, dig into properties β all without opening the editor:
open-pencil tree design.fig
open-pencil find design.fig --type TEXT
open-pencil node design.fig --id 1:23
open-pencil info design.fig
[0] [page] "Getting started" (0:46566)
[0] [section] "" (0:46567)
[0] [frame] "Body" (0:46568)
[0] [frame] "Introduction" (0:46569)
[0] [frame] "Introduction Card" (0:46570)
[0] [frame] "Guidance" (0:46571)
Query with XPath
Use XPath selectors to find nodes by type, attributes, and structure:
open-pencil query design.fig "//FRAME" # All frames
open-pencil query design.fig "//FRAME[@width < 300]" # Frames under 300px
open-pencil query design.fig "//TEXT[contains(@name, 'Button')]" # Text with 'Button' in name
open-pencil query design.fig "//*[@cornerRadius > 0]" # Rounded corners
open-pencil query design.fig "//SECTION//TEXT" # Text inside sections
Export
Render to PNG, JPG, WEBP, SVG β or export as JSX with Tailwind utility classes:
open-pencil export design.fig # PNG
open-pencil export design.fig -f jpg -s 2 -q 90 # JPG at 2x, quality 90
open-pencil export design.fig -f jsx --style tailwind # Tailwind JSX
<div className="flex flex-col gap-4 p-6 bg-white rounded-xl">
<p className="text-2xl font-bold text-[#1D1B20]">Card Title</p>
<p className="text-sm text-[#49454F]">Description text</p>
</div>
Analyze design tokens
Audit an entire design system from the terminal β find inconsistencies, extract the real palette, spot components waiting to be extracted:
open-pencil analyze colors design.fig
open-pencil analyze typography design.fig
open-pencil analyze spacing design.fig
open-pencil analyze clusters design.fig
#1d1b20 ββββββββββββββββββββββββββββββ 17155Γ
#49454f ββββββββββββββββββββββββββββββ 9814Γ
#ffffff ββββββββββββββββββββββββββββββ 8620Γ
#6750a4 ββββββββββββββββββββββββββββββ 3967Γ
3771Γ frame "container" (100% match)
size: 40Γ40, structure: Frame > [Frame]
2982Γ instance "Checkboxes" (100% match)
size: 48Γ48, structure: Instance > [Frame]
Script with Figma Plugin API
eval gives you the full Figma Plugin API. Modify the file, write it back:
open-pencil eval design.fig -c "figma.currentPage.children.length"
open-pencil eval design.fig -c "figma.currentPage.selection.forEach(n => n.opacity = 0.5)" -w
Control the running app
When the desktop app is running, omit the file argument β the CLI connects via RPC and operates on the live canvas. Useful for automation scripts, CI pipelines, or AI agents that need to interact with the editor:
open-pencil tree # Inspect the live document
open-pencil export -f png # Screenshot the current canvas
open-pencil eval -c "figma.currentPage.name" # Query the editor
All commands support --json for machine-readable output.
AI & MCP
Built-in chat
Press βJ to open the AI assistant. It has 87 tools that can create shapes, set fills and strokes, manage auto-layout, work with components and variables, run boolean operations, analyze design tokens, and export assets. Bring your own OpenRouter API key β no backend, no account.
MCP server
Connect Claude Code, Cursor, Windsurf, or any MCP client to read and write .fig files headlessly. 90 tools (87 core + 3 file management). Full docs β
Stdio (Claude Code, Cursor, Windsurf):
bun add -g @open-pencil/mcp
{
"mcpServers": {
"open-pencil": {
"command": "openpencil-mcp"
}
}
}
HTTP (scripts, CI):
openpencil-mcp-http # http://localhost:3100/mcp
AI agent skill
Teach your AI coding agent to use OpenPencil β inspect designs, export assets, analyze tokens, modify .fig files:
npx skills add open-pencil/skills@open-pencil
Works with Claude Code, Cursor, Windsurf, Codex, and any agent that supports skills.
Collaboration
Share a link to co-edit in real time. No server, no account β peers connect directly via WebRTC.
- Click the share button in the top-right panel
- Share the generated link (
app.openpencil.dev/share/<room-id>) - Collaborators see your cursor, selection, and edits in real time
- Click a peer's avatar to follow their viewport
Why
Figma is a closed platform that actively fights programmatic access. Their MCP server is read-only. figma-use added full read/write automation via CDP β then Figma 126 killed CDP. Your design files are in a proprietary binary format that only their software can fully read. Your workflows break when they decide to ship a point release.
OpenPencil is the alternative: open source (MIT), reads .fig files natively, every operation is scriptable, and your data never leaves your machine.
Roadmap
- Prototyping β frame transitions, interaction triggers, overlay management, preview mode
- Shader effects (SkSL) β custom visual effects via GPU shaders
- Raster tile caching β instant zoom/pan for complex documents
- Component libraries β publish, share, and consume design systems across files
- CI tools β design linting, code export, visual regression in pipelines
- Grid child positioning UI β column/row span controls, grid overlay on canvas
- Skewing and OkHCL color support
- Windows code signing (Azure Authenticode certificates)
- Experimental WebGPU/Graphite rendering backend
Contributing
Setup
bun install
bun run dev # Dev server at localhost:1420
bun run tauri dev # Desktop app (requires Rust)
Quality gates
| Command | Description |
|---|---|
bun run check | Lint + typecheck |
bun run test | E2E visual regression |
bun run test:unit | Unit tests |
bun run format | Code formatting |
Project structure
packages/
core/ @open-pencil/core β engine (scene graph, renderer, layout, codec)
cli/ @open-pencil/cli β headless CLI
mcp/ @open-pencil/mcp β MCP server (stdio + HTTP)
docs/ Documentation site (openpencil.dev)
src/ Vue app (components, composables, stores)
desktop/ Tauri v2 (Rust + config)
tests/ E2E (188 tests) + unit (764 tests)
Tech stack
| Layer | Tech |
|---|---|
| Rendering | Skia (CanvasKit WASM) |
| Layout | Yoga WASM (flex + grid via fork) |
| UI | Vue 3, Reka UI, Tailwind CSS 4 |
| File format | Kiwi binary + Zstd + ZIP |
| Collaboration | Trystero (WebRTC P2P) + Yjs (CRDT) |
| Desktop | Tauri v2 |
| AI/MCP | Multi-provider (Anthropic, OpenAI, Google AI, OpenRouter), MCP SDK, Hono |
Desktop builds
Requires Rust and platform-specific prerequisites (Tauri v2 guide).
bun run tauri build
Acknowledgments
Thanks to @sld0Ant (Anton Soldatov) for creating and maintaining the documentation site.
License
MIT
