# Openpencil > 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. - **Type:** MCP server - **Install:** `agentstack add mcp-zseven-w-openpencil` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [ZSeven-W](https://agentstack.voostack.com/s/zseven-w) - **Installs:** 0 - **Category:** [Communication](https://agentstack.voostack.com/c/communication) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [ZSeven-W](https://github.com/ZSeven-W) - **Source:** https://github.com/ZSeven-W/openpencil - **Website:** https://op.zseven.tech ## Install ```sh agentstack add mcp-zseven-w-openpencil ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About OpenPencil The world's first open-source AI-native vector design tool. Concurrent Agent Teams • Design-as-Code • Built-in MCP Server • Multi-model Intelligence English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia Click the image to watch the demo video > **Note:** There is another open-source project with the same name — [OpenPencil](https://github.com/open-pencil/open-pencil), focused on Figma-compatible visual design with real-time collaboration. This project focuses on AI-native design-to-code workflows. ## Why OpenPencil ### 🎨 Prompt → Canvas 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. ### 🤖 Concurrent Agent Teams 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. ### 🧠 Multi-Model Intelligence 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. ### 🔌 MCP Server 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. ### 🎨 Style Guides 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. ### 📦 Design-as-Code `.op` files are JSON — human-readable, Git-friendly, diffable. Design variables generate CSS custom properties. Code export to React + Tailwind or HTML + CSS. ### 🖥️ Runs Everywhere Web app + native desktop on macOS, Windows, and Linux via Electron. Auto-updates from GitHub Releases. `.op` file association — double-click to open. ### ⌨️ CLI — `op` Control 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. ### 🎯 Multi-Platform Code Export 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. ### 🧩 Embeddable SDK `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. ### 🛡️ Design System Kit Manage reusable UIKits with style switching and component composition. Import/export kits from `.pen` files. Built-in registry with MCP tools for external access. ## Install **macOS (Homebrew):** ```bash brew tap zseven-w/openpencil brew install --cask openpencil ``` **Windows (Scoop):** ```powershell scoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil scoop install openpencil ``` **Linux / Windows direct download:** [GitHub Releases](https://github.com/ZSeven-W/openpencil/releases) — `.exe` (Windows), `.AppImage` / `.deb` (Linux) **CLI (`op`):** ```bash npm install -g @zseven-w/openpencil ``` ## Quick Start (Development) ```bash # Install dependencies bun install # Start dev server at http://localhost:3000 bun --bun run dev ``` Or run as a desktop app: ```bash bun run electron:dev ``` > **Prerequisites:** [Bun](https://bun.sh/) >= 1.0 and [Node.js](https://nodejs.org/) >= 18. Optional: [Zig](https://ziglang.org/) >= 0.14 for building `agent-native` from source (a prebuilt binary will be downloaded automatically if Zig is not installed). ### Docker 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):** ```bash 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: ```bash # 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:** ```bash # 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 . ``` ## AI-Native Design **Prompt to UI** - **Text-to-design** — describe a page, get it generated on canvas in real-time with SSE streaming animation - **Orchestrator** — decomposes complex pages into spatial sub-tasks for parallel generation - **Agent Teams** — concurrent team members with delegate tool, per-member canvas indicators, and fallback strategies - **Design modification** — select elements, then describe changes in natural language - **Vision input** — attach screenshots or mockups for reference-based design - **Style Guides** — apply visual styles (glassmorphism, brutalist, retro, etc.) via tag-based fuzzy matching - **Anti-slop** — cross-generation diversity tracking to avoid repetitive AI output **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** - Built-in MCP server (`pen-mcp` package) — one-click install into Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs - Auto-detects Node.js — if not installed, falls back to HTTP transport and auto-starts the MCP HTTP server - Design automation from terminal: read, create, and modify `.op` files via any MCP-compatible agent - **Layered design workflow** — `design_skeleton` → `design_content` → `design_refine` for higher-fidelity multi-section designs - **Segmented prompt retrieval** — load only the design knowledge you need (schema, layout, roles, icons, planning, etc.) - **Style guide tools** — `get_style_guide_tags` and `get_style_guide` for applying visual styles via MCP - Multi-page support — create, rename, reorder, and duplicate pages via MCP tools **Code Generation** - React + Tailwind CSS, HTML + CSS, CSS Variables - Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native ## CLI — `op` Install globally and control the design tool from your terminal: ```bash npm install -g @zseven-w/openpencil ``` ```bash op start # Launch desktop app op design @landing.txt # Batch design from file op insert '{"type":"RECT"}' # Insert a node op import:figma design.fig # Import Figma file cat design.dsl | op design - # Pipe from stdin ``` Supports three input methods: inline string, `@filepath` (read from file), or `-` (read from stdin). Works with desktop app or web dev server. See [CLI README](./apps/cli/README.md) for full command reference. **LLM Skill** — install the [OpenPencil Skill](https://github.com/ZSeven-W/openpencil-skill) plugin to teach AI agents (Claude Code, Cursor, Codex, Gemini CLI, etc.) how to design with `op`. ## Features **Canvas & Drawing** - Infinite canvas with pan, zoom, smart alignment guides, and snapping - Rectangle, Ellipse, Line, Polygon, Pen (Bezier), Frame, Text - Boolean operations — union, subtract, intersect with contextual toolbar - Icon picker (Iconify) and image import (PNG/JPEG/SVG/WebP/GIF) - Auto-layout — vertical/horizontal with gap, padding, justify, align - Multi-page documents with tab navigation **Design System** - Design variables — color, number, string tokens with `$variable` references - Multi-theme support — multiple axes, each with variants (Light/Dark, Compact/Comfortable) - Component system — reusable components with instances and overrides - CSS sync — auto-generated custom properties, `var(--name)` in code output - Reusable UIKits — import/export component kits from `.pen` files **AI & Agents** - Prompt-to-canvas with streaming generation and orchestrator-driven spatial decomposition - Concurrent Agent Teams — multiple designers work on different sections in parallel with per-member canvas indicators - Layered workflow — `design_skeleton` → `design_content` → `design_refine` with focused prompts per phase - Style Guides — 50+ built-in styles (glassmorphism, brutalist, retro, etc.) with tag-based fuzzy matching, wired into planning and generation - Multi-model capability profiles — auto-adapts thinking mode, effort, and prompt shape per model tier - Built-in agent runtime (`agent-native`, Zig NAPI) + Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini providers - Anthropic-format passthrough for Chinese LLM providers — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans **Git Integration** - Clone wizard with SSH / HTTPS auth and SSH key management - Branch picker — create, switch, delete, merge, all from the git panel - Pull / push cascades with auth retry and non-fast-forward handling - Folder-mode three-way merge with on-disk `MERGE_HEAD` state tracking - Conflict panel with per-node / per-field three-way cards, inline JSON editor, bulk actions, and inline diff block - Remote settings and SSH keys UI; 15-locale i18n across the whole Git surface **Export** - Canvas export — PNG, JPEG, WEBP, PDF (`Cmd+Shift+P`) - Code export — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native - Incremental MCP codegen pipeline — `codegen_plan`, `codegen_submit_chunk`, `codegen_assemble`, `codegen_clean` **Figma Import** - Import `.fig` files with layout, fills, strokes, effects, text, images, and vectors preserved **Desktop App** - Native macOS, Windows, and Linux via Electron - `.op` file association — double-click to open, single-instance lock - Auto-update from GitHub Releases - Native application menu with Save As, Open Recent, and an unsaved-changes dialog on close - Recent files persistence ## Tech Stack | | | | --------------- | --------------------------------------------------------------------------------------- | | **Frontend** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next | | **Canvas** | CanvasKit/Skia (WASM, GPU-accelerated) | | **Engine** | pen-engine (headless) · pen-react (React UI SDK) | | **State** | Zustand v5 | | **Server** | Nitro | | **Desktop** | Electron 35 | | **CLI** | `op` — terminal control, batch design DSL | | **AI** | agent-native (Zig NAPI) · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK | | **Runtime** | Bun · Vite 7 | | **Lint** | oxlint · oxfmt | | **File format** | `.op` — JSON-based, human-readable, Git-friendly | ## Project Structure ```text openpencil/ ├── apps/ │ ├── web/ TanStack Start web app │ │ ├── src/ │ │ │ ├── canvas/ CanvasKit/Skia engine — drawing, sync, layout │ │ │ ├── components/ React UI — editor, panels, shared dialogs, icons │ │ │ ├── services/ai/ AI chat, orchestrator, design generation, streaming │ │ │ ├── services/codegen/ Code generation service wrappers │ │ │ ├── stores/ Zustand — canvas, document, pages, history, AI │ │ │ ├── hooks/ Keyboard shortcuts, file drop, Figma paste, MCP sync │ │ │ ├── i18n/ Internationalization — 15 locales │ │ │ └── uikit/ Reusable component kit system │ │ └── server/ │ │ ├── api/ai/ Nitro API — streaming chat, agent, generation, image search │ │ ├── api/mcp/ MCP HTTP transport endpoints │ │ └── utils/ Claude, OpenCode, Codex, Copilot, Gemini CLI wrappers │ ├── desktop/ Electron desktop app │ │ ├── main.ts Window, Nitro fork, native menu, auto-updater │ │ ├── ipc-handlers.ts Native file dialogs, theme sync, prefs IPC │ │ └── preload.ts IPC bridge │ └── cli/ CLI tool — `op` command │ ├── src/commands/ Design, document, export, import, node, page, variable commands │ ├── connection.ts WebSocket connection to running app │ └── launcher.ts Auto-detect and launch desktop app or web server ├── packages/ │ ├── pen-types/ Type definitions for PenDocument model │ ├── pen-core/ Document tree ops, layout engine, variables │ ├── pen-engine/ Headless design engine — document, selection, history, viewport │ ├── pen-react/ React UI SDK — provider, canvas, hooks, panels, toolbar │ ├── pen-codegen/ Code generators (React, HTML, Vue, Flutter, ...) │ ├── pen-figma/ Figma .fig file parser and converter │ ├── pen-renderer/ Standalone CanvasKit/Skia renderer │ ├── pen-mcp/ MCP server — tools, routes, document manager │ ├── pen-sdk/ Umbrella SDK (re-exports all packages) │ ├── pen-ai-skills/ AI prompt skill engine (phase-driven prompt loading) │ └── agent-native/ Native AI agent runtime (Zig NAPI, multi-provider, teams … ## Source & license This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [ZSeven-W](https://github.com/ZSeven-W) - **Source:** [ZSeven-W/openpencil](https://github.com/ZSeven-W/openpencil) - **License:** MIT - **Homepage:** https://op.zseven.tech Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** yes - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/mcp-zseven-w-openpencil - Seller: https://agentstack.voostack.com/s/zseven-w - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.