Openpencil

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, 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):

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

Quick Start (Development)

# 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-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):

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 .

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:

npm install -g @zseven-w/openpencil

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 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

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.