Open Pencil Design Editor

If you've ever wanted to script Figma files from the command line or let Claude edit designs directly, this is the tool. It's a fully open source design editor that reads and writes real .fig files, with a headless CLI for queries and exports, plus an MCP server that gives AI agents 87 tools to manipulate designs. The XPath query syntax is clever for finding nodes, and the eval command lets you run Figma Plugin API code against files or a live desktop app. Built on Skia rendering with Vue, ships as web app, desktop, or CLI. The peer to peer collaboration and built in AI chat with bring your own key are nice touches for a self hosted workflow.

skills.sh installs: 766
GitHub stars: 61
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add aradotso/trending-skills --skill open-pencil-design-editor --agent claude-code

Installs into .claude/skills of the current project.

Files

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.

SKILL.md on GitHub