by ZSeven-W
The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
# Add to your Claude Code skills
git clone https://github.com/ZSeven-W/openpencilLast scanned: 4/24/2026
{
"issues": [],
"status": "PASSED",
"scannedAt": "2026-04-24T06:08:21.681Z",
"semgrepRan": false,
"npmAuditRan": false,
"pipAuditRan": true
}No comments yet. Be the first to share your thoughts!
Based on votes and bookmarks from developers who liked this skill
30 days in the Featured rail
Note: There is another open-source project with the same name — OpenPencil, focused on Figma-compatible visual design with real-time collaboration. This project focuses on AI-native design-to-code workflows.
Describe any UI in natural language. Watch it appear on the infinite canvas in real-time with streaming animation. Modify existing designs by selecting elements and chatting.
The orchestrator decomposes complex pages into spatial sub-tasks. Multiple AI agents work on different sections simultaneously — hero, features, footer — all streaming in parallel with per-member canvas indicators.
Automatically adapts to each model's capabilities. Claude gets full prompts with thinking; GPT-4o/Gemini disable thinking; smaller models (MiniMax, Qwen, Llama) get simplified prompts for reliable output.
One-click install into Claude Code, Codex, Gemini, OpenCode, Kiro, or Copilot CLIs. Design from your terminal — read, create, and modify .op files through any MCP-compatible agent.
Built-in style guide library with tag-based fuzzy matching. Apply visual styles (glassmorphism, brutalist, retro, etc.) to AI-generated designs. MCP tools for external agent access.
.op files are JSON — human-readable, Git-friendly, diffable. Design variables generate CSS custom properties. Code export to React + Tailwind or HTML + CSS.
Web app + native desktop on macOS, Windows, and Linux via Electron. Auto-updates from GitHub Releases. .op file association — double-click to open.
opControl the design tool from your terminal. op design, op insert — batch design DSL, node manipulation. Pipe in from files or stdin. Works with desktop app or web server.
Export to React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native — all from one .op file. Design variables become CSS custom properties.
pen-engine (headless) + pen-react (React UI SDK) — embed the design engine in your own app. DesignProvider, DesignCanvas, hooks, panels, and toolbar components out of the box.
Manage reusable UIKits with style switching and component composition. Import/export kits from .pen files. Built-in registry with MCP tools for external access.
macOS (Homebrew):
brew tap zseven-w/openpencil
brew install --cask openpencil
Windows (Scoop):
scoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil
scoop install openpencil
Linux / Windows direct download: GitHub Releases — .exe (Windows), .AppImage / .deb (Linux)
CLI (op):
npm install -g @zseven-w/openpencil
# Install dependencies
bun install
# Start dev server at http://localhost:3000
bun --bun run dev
Or run as a desktop app:
bun run electron:dev
Prerequisites: Bun >= 1.0 and Node.js >= 18. Optional: Zig >= 0.14 for building
agent-nativefrom source (a prebuilt binary will be downloaded automatically if Zig is not installed).
Multiple image variants are available — pick the one that fits your needs:
| Image | Size | Includes |
| ---------------------------- | ------- | -------------------- |
| openpencil:latest | ~226 MB | Web app only |
| openpencil-claude:latest | — | + Claude Code CLI |
| openpencil-codex:latest | — | + Codex CLI |
| openpencil-opencode:latest | — | + OpenCode CLI |
| openpencil-copilot:latest | — | + GitHub Copilot CLI |
| openpencil-gemini:latest | — | + Gemini CLI |
| openpencil-full:latest | ~1 GB | All CLI tools |
Run (web only):
docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest
Run with AI CLI (e.g. Claude Code):
The AI chat relies on Claude CLI OAuth login. Use a Docker volume to persist the login session:
# Step 1 — Login (one-time)
docker volume create openpencil-claude-auth
docker run -it --rm \
-v openpencil-claude-auth:/root/.claude \
ghcr.io/zseven-w/openpencil-claude:latest claude login
# Step 2 — Start
docker run -d -p 3000:3000 \
-v openpencil-claude-auth:/root/.claude \
ghcr.io/zseven-w/openpencil-claude:latest
Build locally:
# Base (web only)
docker build --target base -t openpencil .
# With a specific CLI
docker build --target with-claude -t openpencil-claude .
# Full (all CLIs)
docker build --target full -t openpencil-full .
Prompt to UI
Multi-Agent Support
| Agent | Setup |
| --------------------------- | ------------------------------------------------------------------------------------------------- |
| Built-in (9+ providers) | Select from provider presets with region switcher — Anthropic, OpenAI, Google, DeepSeek, and more |
| Claude Code | No config — uses Claude Agent SDK with local OAuth |
| Codex CLI | Connect in Agent Settings (Cmd+,) |
| OpenCode | Connect in Agent Settings (Cmd+,) |
| GitHub Copilot | copilot login then connect in Agent Settings (Cmd+,) |
| Gemini CLI | Connect in Agent Settings (Cmd+,) |
Model Capability Profiles — automatically adapts prompts, thinking mode, and timeouts per model tier. Full-tier models (Claude) get complete prompts; standard-tier (GPT-4o, Gemini, DeepSeek) disable thinking; basic-tier (MiniMax, Qwen, Llama, Mistral) get simplified nested-JSON prompts for maximum reliability.
i18n — Full interface localization in 15 languages: English, 简体中文, 繁體中文, 日本語, 한국어, Français, Español, Deutsch, Português, Русский, हिन्दी, Türkçe, ไทย, Tiếng Việt, Bahasa Indonesia.
MCP Server
pen-mcp package) — one-click install into Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs.op files via