OpenPencil Design Editor

Skill by ara.so — Daily 2026 Skills collection.

OpenPencil is an open-source, AI-native design editor that reads and writes native Figma (.fig) files, provides a headless CLI, an MCP server for AI agents, and a Vue SDK for building custom editors. It is MIT-licensed and runs in the browser, as a desktop app (Tauri/macOS/Windows/Linux), or fully headlessly.

Installation

Web app (no install)

Visit app.openpencil.dev/demo.

Desktop (macOS)

brew install open-pencil/tap/open-pencil

Or download from releases.

CLI

bun add -g @open-pencil/cli

MCP server

bun add -g @open-pencil/mcp

Local development

git clone https://github.com/open-pencil/open-pencil
cd open-pencil
bun install
bun run dev          # Web app at localhost:1420
bun run tauri dev    # Desktop (requires Rust)

CLI Reference

The open-pencil CLI operates on .fig files headlessly. When the desktop app is running, omit the file argument to connect to the live canvas via RPC.

Inspect file structure

# Print the full node tree
open-pencil tree design.fig

# Find nodes by type
open-pencil find design.fig --type TEXT
open-pencil find design.fig --type FRAME

# Get a specific node by ID
open-pencil node design.fig --id 1:23

# File metadata
open-pencil info design.fig

XPath queries

# All frames
open-pencil query design.fig "//FRAME"

# Frames narrower than 300px
open-pencil query design.fig "//FRAME[@width < 300]"

# Text nodes whose name contains "Button"
open-pencil query design.fig "//TEXT[contains(@name, 'Button')]"

# Nodes with rounded corners
open-pencil query design.fig "//*[@cornerRadius > 0]"

# Text inside sections
open-pencil query design.fig "//SECTION//TEXT"

Export

# PNG (default)
open-pencil export design.fig

# JPG at 2x scale, quality 90
open-pencil export design.fig -f jpg -s 2 -q 90

# SVG
open-pencil export design.fig -f svg

# WEBP
open-pencil export design.fig -f webp

# JSX with Tailwind v4 utility classes
open-pencil export design.fig -f jsx --style tailwind

Example Tailwind output:

<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>

Design token analysis

open-pencil analyze colors design.fig
open-pencil analyze typography design.fig
open-pencil analyze spacing design.fig
open-pencil analyze clusters design.fig   # Repeated structures / component candidates

Scripting with Figma Plugin API (`eval`)

# Read: count children on the current page
open-pencil eval design.fig -c "figma.currentPage.children.length"

# Read: get all text node contents
open-pencil eval design.fig -c "figma.currentPage.findAll(n => n.type === 'TEXT').map(n => n.characters)"

# Write: set opacity of all selected nodes (-w writes back to file)
open-pencil eval design.fig -c "figma.currentPage.selection.forEach(n => n.opacity = 0.5)" -w

# Write: rename all frames on the page
open-pencil eval design.fig -c "figma.currentPage.findAll(n => n.type === 'FRAME').forEach((f, i) => f.name = 'Frame ' + i)" -w

# Connect to the live running desktop app (no file arg)
open-pencil eval -c "figma.currentPage.name"
open-pencil tree
open-pencil export -f png

All commands support --json for machine-readable output:

open-pencil find design.fig --type TEXT --json
open-pencil analyze colors design.fig --json

MCP Server

The MCP server exposes 90 tools (87 core + 3 file management) for AI agents to read and write .fig files.

Stdio (Claude Code, Cursor, Windsurf)

bun add -g @open-pencil/mcp

Add to your MCP client config (e.g. ~/.claude/mcp.json or Cursor settings):

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

HTTP server (scripts, CI)

openpencil-mcp-http
# Listens at http://localhost:3100/mcp

Claude Code desktop integration

Install the ACP adapter:

npm i -g @zed-industries/claude-agent-acp

Add MCP permission to ~/.claude/settings.json:

{
  "permissions": {
    "allow": ["mcp__open-pencil"]
  }
}

Open the desktop app → Ctrl+J → select Claude Code from the provider dropdown.

Agent skill (quick setup)

npx skills add open-pencil/skills@open-pencil

AI Chat (Built-in)

Open with ⌘J (macOS) or Ctrl+J (desktop/web).
87 tools: create shapes, set fills/strokes, manage auto-layout, work with components and variables, boolean operations, token analysis, asset export.
Bring your own API key — no backend or account required.

Supported providers

Configure via the provider dropdown in the chat panel:

Provider	Env var
Anthropic	`ANTHROPIC_API_KEY`
OpenAI	`OPENAI_API_KEY`
Google AI	`GOOGLE_AI_API_KEY`
OpenRouter	`OPENROUTER_API_KEY`
Any compatible endpoint	Custom base URL

Real-time Collaboration

No server, no account. Peer-to-peer via WebRTC.

Click the Share button (top-right).
Share the generated URL: app.openpencil.dev/share/<room-id>.
Peers see live cursors, selections, and edits.
Click a peer's avatar to follow their viewport.

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
src/        Vue 3 app — components, composables, stores
desktop/    Tauri v2 (Rust + config)
tests/      E2E (188 tests) + unit (764 tests)

Tech stack

Layer	Technology
Rendering	Skia (CanvasKit WASM)
Layout	Yoga WASM (flex + CSS Grid)
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	Anthropic, OpenAI, Google AI, OpenRouter; MCP SDK; Hono

Development Commands

bun run dev        # Start web dev server (localhost:1420)
bun run tauri dev  # Start desktop app (requires Rust)
bun run check      # Lint + typecheck
bun run test       # E2E visual regression tests
bun run test:unit  # Unit tests
bun run format     # Code formatting
bun run tauri build  # Production desktop build

Desktop prerequisites: Rust + Tauri v2 platform deps.

Common Patterns

Batch-rename all text nodes in a .fig file

open-pencil eval design.fig \
  -c "figma.currentPage.findAll(n => n.type === 'TEXT').forEach((t, i) => t.name = 'Text_' + i)" \
  -w

Extract all colors as JSON

open-pencil analyze colors design.fig --json > colors.json

Export every frame as PNG in CI

for id in $(open-pencil find design.fig --type FRAME --json | jq -r '.[].id'); do
  open-pencil export design.fig --id "$id" -f png -o "frames/$id.png"
done

Query nodes matching a naming convention

# Find all nodes named with a "btn-" prefix
open-pencil query design.fig "//*[starts-with(@name, 'btn-')]"

Connect an MCP client to a running desktop app

When the desktop app is open, the MCP stdio server can connect to the live canvas. No file path needed — all reads and writes go to the open document.

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

Export a selection as Tailwind JSX programmatically

open-pencil export design.fig --id 1:23 -f jsx --style tailwind

Troubleshooting

openpencil-mcp not found after install

Ensure bun's global bin dir is on your PATH: export PATH="$HOME/.bun/bin:$PATH"
Or use npx openpencil-mcp as the MCP command value.

Desktop app CLI connection fails

The desktop app must be running before issuing commands without a file argument.
Check that no firewall rule blocks the local RPC socket.

Tauri dev build errors

Install platform prerequisites: v2.tauri.app/start/prerequisites
Ensure Rust is up to date: rustup update

.fig file won't open

Confirm the file was exported from Figma (not a .fig backup or plugin artifact).
Run open-pencil info design.fig to check if the codec can parse the header.

AI chat returns no response

Verify your API key is set correctly in the provider settings panel.
For OpenRouter, ensure your key has credits and the selected model is available.

Collaboration peers not connecting

Both peers must use the exact same share URL (room ID is case-sensitive).
WebRTC requires both peers to allow the browser/app through any firewall.

open-pencil-design-editor

OpenPencil Design Editor

Installation

Web app (no install)

Desktop (macOS)

CLI

MCP server

Local development

CLI Reference

Inspect file structure

XPath queries

Export

Design token analysis

Scripting with Figma Plugin API (`eval`)

MCP Server

Stdio (Claude Code, Cursor, Windsurf)

HTTP server (scripts, CI)

Claude Code desktop integration

Agent skill (quick setup)

AI Chat (Built-in)

Supported providers

Real-time Collaboration

Project Structure

Tech stack

Development Commands

Common Patterns

Batch-rename all text nodes in a .fig file

Extract all colors as JSON

Export every frame as PNG in CI

Query nodes matching a naming convention

Connect an MCP client to a running desktop app

Export a selection as Tailwind JSX programmatically

Troubleshooting

Links

open-pencil-design-editor

OpenPencil Design Editor

Installation

Web app (no install)

Desktop (macOS)

CLI

MCP server

Local development

CLI Reference

Inspect file structure

XPath queries

Export

Design token analysis

Scripting with Figma Plugin API (eval)

MCP Server

Stdio (Claude Code, Cursor, Windsurf)

HTTP server (scripts, CI)

Claude Code desktop integration

Agent skill (quick setup)

AI Chat (Built-in)

Supported providers

Real-time Collaboration

Project Structure

Tech stack

Development Commands

Common Patterns

Batch-rename all text nodes in a .fig file

Extract all colors as JSON

Export every frame as PNG in CI

Query nodes matching a naming convention

Connect an MCP client to a running desktop app

Export a selection as Tailwind JSX programmatically

Troubleshooting

Links

Scripting with Figma Plugin API (`eval`)