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.
Install / Use
npx skills add ZSeven-W/openpencilInstalls into whichever agent you are using.
CLAUDE.md
Claude Code project instructions
Quality Score
Category
DesignSupported Platforms
Skill content
View source on GitHubNote: 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
<table> <tr> <td width="50%">🎨 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.
</td> <td width="50%">🤖 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.
</td> </tr> <tr> <td width="50%">🧠 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.
</td> <td width="50%">🔌 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.
</td> <td width="50%">📦 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.
🎯 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
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.
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
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-mcpcrate) — one-click inst
Truncated for display — read the full file on GitHub.
Related Skills
caveman
107.1k🪨 why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.
claude-mem
94.4kPersistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More
Agent-Reach
84.2kGive your AI agent eyes to see the entire internet. Read & search Twitter, Reddit, YouTube, GitHub, Bilibili, XiaoHongShu — one CLI, zero API fees.
Understand-Anything
83.5kGraphs that teach > graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more.
