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
Why OpenPencil
感谢 Infistar.cc 无限星河 赞助并为 OpenPencil 提供模型服务支持！
- ⚡ 稳定承载复杂设计任务： 提供企业级高并发通道与多节点冗余，价格低至官方渠道 1 折，稳定支持长任务、流式响应与连续工具调用。
- 🧠 一个 API Key 接入主流模型： 全面支持 ChatGPT、Claude、Gemini、Kimi、GLM、DeepSeek 等模型，兼容 OpenAI、Anthropic 等主流接口，可在 OpenPencil 中灵活配置模型服务。
- 🎨 赋能 AI 原生矢量设计： 适用于提示词生成设计、画布内容修改、多模型协同、图片生成及设计方案迭代，让 AI Agent 更高效地完成从创意到成稿的全过程。
- 🎁 OpenPencil 用户专属福利： 通过 专属推广链接 注册并完成首次调用，即可领取 5 美元等值测试额度 / 首充专属优惠！
🎨 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, 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 — one Rust core, a single self-contained binary, no browser engine. .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.
|
|
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
op-web-sdk (vanilla) + op-web-sdk-react / op-web-sdk-vue adapters — embed a read-only .op viewer in your own app, powered by the same wasm renderer the editor ships.
|
🛡️ 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.
|
👥 Real-Time Collaboration
Design together over authenticated peer-to-peer sessions with a public relay and built-in regional hubs. Join with a short pairing code, see live remote cursors, and resolve conflicts with per-edit detail and replay.
|
Install
Building from source on Windows: see BUILD_WINDOWS.md
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)
The Windows .exe installer, both Scoop packages, and the install-op.ps1
CLI installer check and, when needed, service the pinned, Microsoft-signed
Visual C++ v14 runtime during every install or upgrade. The portable Windows
.zip archives and Windows VSIX packages do not run an elevated system
installer; install Microsoft's
latest supported Visual C++ Redistributable
before using those artifacts directly.
Antivirus flagged the Windows installer? That's a known heuristic false positive on new, low-prevalence releases — see how to verify your download.
Nix (Linux x86_64):
nix develop
nix run . # launch the desktop app
nix build .#openpencil # native web host + CanvasKit web bundle
nix build .#op-cli # the `op` CLI
nix build .#prebuilt # use the matching upstream desktop archive
nix build .#prebuilt-cli # use the matching upstream CLI archive
nix build .#web-server # native GL-free web server + web bundle
nix build .#runtime-prebuilt # prebuilt desktop + `op` CLI runtime
nix build .#web-sdk-packages # npm tarballs for the web SDKs
nix build .#appimage # portable desktop AppImage
The flake uses the pinned Rust toolchain from rust-toolchain.toml and is
currently published for x86_64-linux. A Debian package is not produced by
the flake yet; use the upstream release artifacts when a .deb is required.
The prebuilt outputs use the release version and hashes pinned in
nix/release-manifest.json, independently of the workspace source version.
After a release is published, the release workflow opens a PR to refresh that
manifest. Until it is merged, the prebuilt outputs continue to use the prior
published release; the source-built outputs always build the checked-out source.
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
To allow the newest pre-release:
curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | OP_PRERELEASE=1 bash
Windows PowerShell:
irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex
To allow the newest pre-release:
$env:OP_PRERELEASE = "1"; irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex
Cloning (with submodules)
git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git
# Or already cloned — sync first so stale submodule URLs pick up .gitmodules changes:
git submodule sync --recursive && git submodule update --init --recursive
Three submodules live under vendor/, all public and fetched over HTTPS (no SSH key needed): jian (GPU-Skia UI framework — widgets/render/events), casement (winit fork), and agent (agent-rs — cross-product Rust agent runtime, shared by OP + Zode). vendor/anthropic-agent-sdk is tracked in-tree, not a submodule.
Quick Start (Development)
# Web dev server (builds the CanvasKit wasm bundle, then runs the headless web host)
bash scripts/start-web-rust.sh
Browser-entered built-in provider, image-generation, and Openverse credentials
are kept in same-origin localStorage
(openpencil-rust-web-credentials) by default,
separate from ordinary web preferences. A credential needed by an AI request is
sent with that request, but the daemon does not write the browser snapshot to
settings.json.
Private deployments can opt into server persistence with
OPENPENCIL_PERSIST_WEB_CREDENTIALS_SERVER=true. This setting is
deployment-wide; each accepted browser snapshot replaces the shared
browser-owned copy. Enable it only for a trusted, access-controlled deployment
with one active administrator profile, behind HTTPS. Turning the setting off
removes previously persisted browser-owned credentials at the next startup
while preserving operator-owned configuration. As with all localStorage,
same-origin scripts can read these values, so the web origin must be protected
from untrusted scripts and XSS. Before downgrading to a release that predates
this switch, turn it off and start the current release once to scrub the
browser-owned copy.
The web host supports built-in API-key agents only. CLI and ACP agents remain
native-only: they are not shown in the web model picker, stored in browser
credential snapshots, synchronized to the server, or exposed through web
connect routes. Browser requests to credential and AI endpoints allow
loopback/localhost origins by default. A public reverse proxy must separately set
OPENPENCIL_WEB_ALLOWED_ORIGINS to a comma-separated list of exact origins,
for example https://demo.openpencil.dev.
Server persistence does not permit browser-controlled requests to loopback,
private, link-local, metadata, or reserved provider endpoints. A trusted private
deployment that intentionally uses an internal provider must separately set
OPENPENCIL_WEB_AI_ENDPOINT_ALLOWLIST to a comma-separated list of exact URL
origins, for example http://127.0.0.1:11434,https://llm.internal.example.
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
Tagged Rust releases publish a single web-host image. The retired TypeScript images with bundled AI CLIs are no longer published.
| Image |
Includes |
ghcr.io/zseven-w/openpencil-web:vX.Y.Z |
Rust web host, wasm bundle, and CanvasKit assets |
The web UI exposes built-in agent profiles only; Claude/Codex/OpenCode/Copilot CLI tooling is not bundled into Docker images.
Run:
VERSION="$(scripts/workspace-version.sh)"
docker run -d -p 3100:3100 "ghcr.io/zseven-w/openpencil-web:v${VERSION}"
Then open http://localhost:3100/.
Build locally:
docker build -f Dockerfile.web-rust -t openpencil-web-rust .
docker run -p 3100:3100 openpencil-web-rust
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+,) |
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 (
op-mcp crate) — one-click install into Claude Code / Codex / OpenCode / Kiro / Copilot CLIs
- No Node.js required — stdio transport via the desktop binary (
--mcp <path>), plus a live HTTP endpoint (127.0.0.1:<port>/mcp) from the running app
- 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 or the install script, then control the design tool from your terminal:
brew install zseven-w/openpencil/op
curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | bash
curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | OP_PRERELEASE=1 bash
irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex
$env:OP_PRERELEASE = "1"; irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex
op start # Launch desktop app
op start --headless --file design.op # Launch headless file-backed server
op design @landing.txt # Batch design from file
op design @ui.js # Sandboxed JavaScript with loops
op insert '{"type":"rectangle"}' # 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 the desktop app, web server, or headless file-backed server. See the CLI command reference for all commands.
LLM Skill — install the OpenPencil Skill plugin to teach AI agents how to design with op. Run op install for detected agents, or target one explicitly with op install --target codex.
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,
OpenPencil is the world's first open-source AI-native vector design tool, built around Design-as-Code: you describe a UI in natural language and it appears live on an infinite canvas, with concurrent AI 'Agent Teams' building different sections in parallel.