OpenPencil – Open‑source design editor with built‑in AI

What it is – A locally‑run design tool that can open native Figma (.fig) and Pencil (.pen) files, edit them with a full UI, and automate everything via a powerful CLI and an AI‑driven “MCP” server. It ships as a tiny (~15 MB) desktop app (Tauri v2) and as a PWA, and offers a Vue‑based SDK for embedding the editor in other applications.

Core capabilities

Capability	How it works
File support	Reads/writes `.fig` (Figma) and `.pen` (Pencil) files; can copy‑paste nodes between apps.
AI‑assisted design	Built‑in chat panel with 100+ “tools” (create shapes, set fills, run auto‑layout, manage components, export assets, etc.). Connect any BYOK LLM provider (OpenAI, Anthropic, Google AI, OpenRouter, DeepSeek, etc.) – no backend, no account.
Programmable CLI	`openpencil` lets you inspect node trees, run XPath queries, lint, analyze colors/typography, convert between formats, export to PNG/JPG/SVG/PDF/JSX/Tailwind/Storybook, and even execute Figma Plugin API scripts headlessly.
MCP server	Exposes the same 100+ design tools over stdio or HTTP, so AI coding agents (Claude Code, Codex, Gemini, Cursor, etc.) can read/modify/export designs programmatically.
Vue SDK	Head‑less components and composables let you embed the editor or build custom workflow‑specific editors.
Real‑time collaboration	Peer‑to‑peer WebRTC + Yjs CRDT; share a link, see each other’s cursors, follow viewports, and start voice calls – all without a central server.
Auto‑layout & CSS Grid	Flexbox and grid powered by Yoga compiled to WASM, with full gap, padding, and alignment support.
Image vectorization	Convert raster layers to editable vectors via Recraft or fal.ai.
Design‑to‑code export	Export selections as JSX/Tailwind, generate design‑token files, or produce Storybook stories.
Cross‑platform	Desktop builds for macOS, Windows, Linux (via Tauri); web app works in modern browsers (Chrome 111+, Edge 111+, Firefox 128+, Safari 16.4+).

Getting started

# macOS via Homebrew
brew install --cask openpencil

# Or install the CLI globally
npm i -g @open-pencil/cli   # or bun add -g @open-pencil/cli

Download the latest desktop release from GitHub, or run the web demo at https://app.openpencil.dev/demo.

Typical workflows

Open a Figma file → edit UI or run openpencil tree design.fig to explore the node hierarchy.
Ask the AI to create a component → open the chat (⌘J/Ctrl+J), describe the UI, and let the tool generate nodes.
Export assets → openpencil export design.fig -f tailwind-jsx or -f storybook for code hand‑off.
Automate with a script → openpencil eval design.fig -c "figma.currentPage.selection.forEach(n => n.opacity=0.5)" -w.
Collaborate → share the generated WebRTC link; teammates see live edits and can voice‑chat.
Integrate elsewhere → import @open-pencil/sdk into a Vue app and build a custom editor surface.

Who might use it?

Design‑ops teams that need a scriptable, local‑first alternative to Figma’s closed API.
Developers building design‑to‑code pipelines (auto‑export JSX/Tailwind, generate token files).
AI‑tool builders who want a programmable design backend for agents like Claude Code, Cursor, or custom MCP clients.
Educators & hobbyists looking for a free, open‑source design editor with real‑time collaboration.

Community & contribution

Discord: https://discord.gg/4wXc9fuZfm – quick help and showcase.
GitHub Discussions: Q&A, ideas, announcements.
Contributing: bun install && bun run dev:portless for the web editor, bun run tauri dev for the desktop app (requires Rust). See CONTRIBUTING.md for guidelines.

License

MIT – free for personal, educational, or commercial use.

Bottom line – OpenPencil provides a fully open, scriptable design environment with first‑class AI integration, making it possible to automate, extend, and collaborate on UI/UX work without relying on proprietary platforms.

open-pencil/open-pencil