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

brew install zseven-w/openpencil/op

Or use the install script (macOS / Linux):

curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | bash

Cloning（含 Rust 子系统）

git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git
# Or already cloned:
git submodule update --init --recursive

vendor/agent is the agent-rs submodule (cross-product, OP + Zode share); HTTPS URL needs no SSH key.

Quick Start (Development)

# Web dev server (builds the CanvasKit wasm bundle, then runs the headless web host)
bash scripts/start-web-rust.sh

Or run as a desktop app:

cargo run -p op-host-desktop

Prerequisites: Rust (stable) to build the product. Bun >= 1.0 and Node.js >= 18 are only needed for the web SDK under packages/.

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 via Homebrew and control the design tool from your terminal:

brew install zseven-w/openpencil/op

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 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 Rust agent runtime + 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	Built-in Rust runtime · 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

Why Rust

OpenPencil is being rewritten from the ground up in Rust (#129). The TypeScript + Electron build is what ships today; the Rust rewrite is what's next — one native core that is dramatically smaller and faster, and runs on more platforms from a single codebase.

	TypeScript + Electron (today)	Rust (the rewrite)
Desktop runtime	Electron — bundles Chromium + Node.js	Native window (winit + GPU Skia), no browser engine
Desktop footprint	Full Chromium runtime per install	Single self-contained binary — 55.5 MB
Web payload	JS + WASM bundle	8.2 MB wasm / 2.18 MB gzip over the wire
Rendering	CanvasKit/Skia on web	One GPU-accelerated Skia backend on every target
Memory	JavaScript GC pauses	No GC — Rust ownership, predictable latency
Codebase	Web stack + Electron	One Rust workspace: editor · CLI · MCP · AI · codegen · Figma · Git
Targets	Web + desktop, two separate stacks	Desktop (macOS/Win/Linux) · mobile (iOS/Android) · browser — one core

Measured improvements

• Tiny footprint — the whole desktop app is one 55.5 MB native binary instead of a bundled browser engine plus a Node runtime. The web build is 8.2 MB raw / 2.18 MB gzip after splitting the icon catalog (−48% over the wire).
• Scales to large documents — a 10,000-node live canvas (nested auto-layout, four levels deep) writes, reads, and snapshots layout with no panics and ~0% idle CPU; a full layout snapshot of all 10k nodes returns in ~0.68 s.
• Fast interaction — pan/zoom no longer re-serializes the document every frame (a single hot-path fix cut wheel-zoom CPU from ~69% to ~0%); drags patch the scene incrementally, text measurement is cached, and repaints coalesce to one per frame.
• One core, every screen — the same editor state and the same render backend compile to native desktop, mobile, and the browser via WASM — no parallel reimplementations to keep in sync.
• GPU Skia everywhere — native renders through skia-safe on a GL context; the browser renders through CanvasKit on WebGL2 — the same drawing code, the same output.
• Native accessibility — AccessKit on macOS, Windows, and Linux, plus a DOM mirror on web, instead of leaning on a browser's a11y tree.
• One type-checked workspace — the MCP host, CLI, AI providers, code generation, Figma import, and Git integration all live in a single Rust workspace, with cargo-deny supply-chain gating in CI.

Status: the Rust shell is under active development (see the Roadmap below). Until it reaches feature parity for v0.8.0, the installable downloads above are the TypeScript + Electron build.

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)
└── .githooks/               Pre-commit version sync from branch name

Keyboard Shortcuts

Key	Action		Key	Action
V	Select		Cmd+S	Save
R	Rectangle		Cmd+Z	Undo
O	Ellipse		Cmd+Shift+Z	Redo
L	Line		Cmd+C/X/V/D	Copy/Cut/Paste/Duplicate
T	Text		Cmd+G	Group
F	Frame		Cmd+Shift+G	Ungroup
P	Pen tool		Cmd+Shift+P	Export (PNG/JPG/WEBP/PDF)
H	Hand (pan)		Cmd+Shift+C	Code panel
Del	Delete		Cmd+Shift+V	Variables panel
[ / ]	Reorder		Cmd+J	AI chat
Arrows	Nudge 1px		Cmd+,	Agent settings
Cmd+Alt+U	Boolean union		Cmd+Alt+S	Boolean subtract
Cmd+Alt+I	Boolean intersect		Cmd+Shift+S	Save As

Scripts

# Product (Rust — run from the repo root)
cargo build --workspace              # Build all crates (add --release for prod)
cargo test --workspace               # Run all tests
cargo check --workspace              # Type check
cargo clippy --workspace --all-targets -- -D warnings   # Lint
cargo fmt --all                      # Format
bash scripts/start-web-rust.sh       # Web dev server (wasm bundle + headless host)
cargo run -p op-host-desktop         # Desktop app (binary: openpencil-desktop)
cargo run -p op-cli -- <args>        # CLI (binary: op)

# Web SDK / JS tooling (run from packages/)
cd packages && bun run lint          # Lint the web SDK (oxlint); also: bun run format
cd packages && bun run generate-iconify-catalog   # Regenerate the Rust icon catalog assets
cd packages && bun run bump <version>             # Sync SDK package.json versions

Rust subsystem (Step 0+)

OpenPencil 正在进行全量 Rust 化。当前状态见 openpencil-docs/superpowers/specs/2026-05-02-rust-ification-kickoff.md（v7 FROZEN）。

# Install Rust toolchain (rust-toolchain.toml auto-pins 1.94)
rustup toolchain install 1.94
rustup target add wasm32-unknown-unknown

# build / test / lint
cargo check --workspace
cargo test --workspace
cargo clippy --workspace --all-targets -- -D warnings
cargo check --target wasm32-unknown-unknown -p op-host-web --no-default-features --features web  # kickoff §1.2 wasm32 invariant
cargo deny check && cargo deny --target wasm32-unknown-unknown check bans        # cargo-deny (native + wasm32 bans; CI uses cargo-deny-action@v2)

Entry crates (crates/ — build targets):

Crate	Category	wasm32
op-host-web	Browser bundle entry — wasm32 cdylib, renders via CanvasKit	✅
op-host-native	Native host lib — WidgetHostNative + skia-safe GL backend (desktop + mobile)	❌ (native only)
op-host-desktop	Desktop binary openpencil-desktop (winit + skia-safe GL) — also the --serve-web daemon that hosts the web bundle	❌ (native only)
op-cli	op command-line tool	❌ (native only)

Shared library crates: op-editor-core (canonical .op state), op-editor-ui (platform-free widgets + RenderBackend), op-editor-host-core (transport-free host state machines), op-mcp, op-ai, op-ai-skills, op-codegen, op-orchestrator, op-figma, op-git, op-opmerge, op-pen-loader, op-design-lint, op-config-store, op-process-io, op-acp, op-i18n, op-rpc-transport — plus op-smoke (headless design-turn test runner). The browser bundle renders through the official CanvasKit skia WASM (loaded separately), so the retired skia-safe-op wasm fork + wasm-libc-shim no longer exist.

Submodule: vendor/agent → github.com/ZSeven-W/agent-rs (cross-product Rust agent runtime).

Phase boundary: Step 0 = workspace skeleton only (no feature porting). Real implementation begins at Step 1 (kill-spike) and beyond.

Contributing

Contributions are welcome! See CLAUDE.md for architecture details and code style.

1. Fork and clone
2. Set up version sync: git config core.hooksPath .githooks
3. Create a branch: git checkout -b feat/my-feature
4. Run checks: cargo test --workspace && cargo clippy --workspace --all-targets -- -D warnings
5. Commit with Conventional Commits: feat(canvas): add rotation snapping
6. Open a PR against main

Roadmap

• Design variables & tokens with CSS sync
• Component system (instances & overrides)
• AI design generation with orchestrator
• MCP server integration with layered design workflow
• Multi-page support
• Figma .fig import
• Boolean operations (union, subtract, intersect)
• Multi-model capability profiles
• Monorepo restructure with reusable packages
• CLI tool (op) for terminal control
• Built-in AI agent SDK with multi-provider support
• i18n — 15 languages
• Headless design engine (pen-engine) + React UI SDK (pen-react)
• Style Guides with tag-based matching and MCP tools
• Concurrent Agent Teams with delegate tool and canvas indicators
• Built-in Rust agent runtime
• Git integration — clone, branch, push/pull, folder-mode three-way merge
• Canvas raster export (PNG / JPEG / WEBP / PDF)
• Rust shell — Step 1a (G1 shared Skia context) on v0.8.0: SharedSkiaContext + NativeBackend (Jian-DrawOp-backed) + shell-core re-exports jian_core::gesture::* (events stay consistent with Jian — no OP-side translation layer per v19.4) + basic_window demo, with the multi-platform CI matrix green (macOS aarch64 + x86_64, Linux x86_64 + aarch64 cross, Windows x86_64 + aarch64 cross, iOS aarch64 + sim, Android aarch64 + x86_64, wasm32). Spec v19.5 FROZEN; vendor/jian pinned at c4a794dc. OP visual model (single-page + infinite canvas canonical / multi-page also supported / no routing / Figma import auto-converts) and OP chrome (toolbars / panels — Rust-only) deferred to Step 1c+.
• Collaborative editing
• Plugin system

Contributors

Sponsors

OpenPencil is free and open-source. Development is funded by people who find it useful — thank you for keeping the canvas open.

Thanks to MrQyun — want your name here too? Become a sponsor →

Community

Join our Discord — Ask questions, share designs, suggest features.

Star History

Assessments

License

MIT — Copyright (c) 2026 ZSeven-W