open-pencil

Open Pencil — AI skill for Claude Code

AI community

AI-native design editor.

How to install Open Pencil

This entry records only its repository, not the path inside it, so there is no exact command to give. Open open-pencil/open-pencil and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Open Pencil does

AI-native design editor. Open-source Figma alternative.

Alternatives in AI

Invisible Dots — Open-source, self-hosted alternative to OpenAI Dots, Meta Muse, Grok Bot, Manus Cue and Claude Cowork 31.8k ★
Open Dots — Open-source, self-hosted AI agent workspace and alternative to OpenAI Dots, Meta Muse, Grok Bot, Instinct, Man 5.5k ★
Osaurus — Own your AI. The native macOS harness for AI agents -- any model, persistent memory, autonomous execution, cry 5.1k ★

README

OpenPencil

Open-source design editor. Opens `.fig` and `.pen` design files, includes built-in AI, and ships as a programmable toolkit with a headless Vue SDK for building custom editors.

**Status:** Active development. Usable today, with some rough edges as features evolve.

**[Try it online →](https://app.openpencil.dev/demo)** · [Download](https://github.com/open-pencil/open-pencil/releases/latest) · [Documentation](https://openpencil.dev) · [Roadmap](https://openpencil.dev/development/roadmap) · [llms.txt](https://openpencil.dev/llms.txt)

![OpenPencil](packages/docs/public/screenshot.png)

Installation

**macOS (Homebrew):**

brew install openpencil

Or download from the [releases page](https://github.com/open-pencil/open-pencil/releases/latest), or [use the web app](https://app.openpencil.dev) — no install needed.

What it does

Opens .fig and .pen files — read and write native Figma files, open supported Pencil documents from the app or OS file browser, copy & paste nodes between apps
AI builds designs — describe what you want in chat, 90+ tools create and modify nodes. Connect OpenRouter, Anthropic, OpenAI, Google AI, Z.ai, MiniMax, or compatible endpoints
Fully programmable — headless CLI, XPath queries, Figma Plugin API via eval, MCP server for AI agents, and desktop agent integrations for Claude Code, Codex, and Gemini CLI
Lint, convert, and extract tokens — inspect documents, lint naming/layout/accessibility, convert between supported formats, analyze colors/typography/spacing/clusters, and extract design tokens
Components and variants — create reusable components, group variants into component sets, insert local assets as instances, and switch variants from the inspector
Image vectorization — convert image layers into editable vector layers with Recraft or fal.ai
Design-to-code export — export selections as JSX/Tailwind, generate token outputs, and map designs into component-oriented c