open-pencil/open-pencil

AI-native design editor. Open-source Figma alternative

Summary

OpenPencil is an MIT-licensed, open-source design editor that reads and writes native .fig files and exposes a programmable toolkit — CLI, MCP server, and headless Vue SDK — alongside a built-in AI assistant. It runs as a Tauri v2 desktop app, a browser PWA, or as libraries, letting engineers and designers inspect, modify, and automate design files without depending on a closed platform.

What it is useful for

OpenPencil is useful when teams need an open alternative to Figma that they can script, extend, and self-host. The README documents several concrete use cases: opening .fig and .pen files with copy/paste between apps, running design lints for naming, layout, and accessibility, extracting design tokens via openpencil analyze, and exporting selections to JSX/Tailwind, Storybook, SVG, PDF, or PPTX. The built-in AI assistant (100+ tools) creates and modifies nodes from a chat prompt, and a real-time collaboration mode uses WebRTC for peer-to-peer sessions with no account or server. A headless Vue SDK lets teams embed the editor into their own apps or build workflow-specific editing surfaces.

How engineers can use it

The README documents two install paths: brew install --cask openpencil for macOS, or the web app at app.openpencil.dev, plus npm install -g @open-pencil/cli (or bun add -g @open-pencil/cli) for the CLI.

From the terminal you can inspect documents without opening the GUI:

openpencil tree design.fig
openpencil find design.pen --type TEXT
openpencil query design.fig "//FRAME[@width < 300]"
openpencil node design.fig --id 1:23

For automation, openpencil export design.fig -f tailwind-jsx renders a selection to JSX with Tailwind classes, openpencil lint design.fig --preset strict catches design issues, and openpencil eval design.fig -c "figma.currentPage.selection.forEach(n => n.opacity = 0.5)" -w runs Figma Plugin API JavaScript against the document. A running editor can also be controlled with openpencil undo, openpencil documents list, or any MCP tool. For CI, openpencil convert design.pen design.fig switches between formats, and openpencil import card.html --css card.css turns HTML into editable .fig layers.

For AI agents, the README documents claude mcp add --scope user open-pencil -- openpencil-mcp for stdio clients, and npx skills add open-pencil/open-pencil to teach agents like Claude Code, Cursor, Windsurf, or Codex how to use the design tools. BYOK providers include OpenRouter, Anthropic, OpenAI, Google AI, DeepSeek, Z.ai, MiniMax, and compatible endpoints.

The README flags that the project is in active development with "some rough edges," that not every BYOK provider works in the browser or streams tool calls correctly, and points readers to the roadmap for current Figma compatibility gaps.