Agent skill · design visual · aradotso
open-pencil-design-editor
AI-native open-source Figma alternative with CLI, MCP server, and Vue SDK for reading/writing .fig files programmatically.
Why this skill is useful
Adds a comprehensive CLI with executable commands for manipulating .fig files that extend design automation capabilities beyond standard tools.
What it needs
Requires @open-pencil/cli, @open-pencil/mcp, bun, open-pencil installed locally. About 6k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
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) Or download from releases. CLI MCP server Local development --- 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 XPath queries Export Example Tailwind output: Design token analysis Scripting with Figma Plugin API (eval) All commands support --json for machine-readable output: --- 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) Add to your MCP client config (e.g. ~/.claude/mcp.json or Cursor settings): HTTP server (scripts, CI) Claude Code desktop integration 1. Install the ACP adapter: 2. Add MCP permission to ~/.claude/settings.json: 3. Open the desktop app → Ctrl+J → select Claude Code from the provider dropdown. Agent skill (quick setup) --- 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 ANTHROPICAPIKEY OpenAI OPENAIAPIKEY Google AI GOOGLEAIAPIKEY OpenRouter OPENROUTERAPIKEY Any compatible endpoint Custom base URL --- Real-time Collaboration No server, no account. Peer-to-peer via WebRTC. 1. Click the Share button (top-right). 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/open-pencil-design-editor