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

## Why OpenPencil ### [OpenPencil × Infistar.cc 无限星河｜全模型 API · 驱动 AI 原生设计创作](https://www.infistar.cc/register?aff=LLZC3RLG&ref_source=link) 感谢 [Infistar.cc 无限星河](https://www.infistar.cc/register?aff=LLZC3RLG&ref_source=link) 赞助并为 OpenPencil 提供模型服务支持！ - ⚡ **稳定承载复杂设计任务：** 提供企业级高并发通道与多节点冗余，价格低至官方渠道 1 折，稳定支持长任务、流式响应与连续工具调用。 - **一个 API Key 接入主流模型：** 全面支持 ChatGPT、Claude、Gemini、Kimi、GLM、DeepSeek 等模型，兼容 OpenAI、Anthropic 等主流接口，可在 OpenPencil 中灵活配置模型服务。 - **赋能 AI 原生矢量设计：** 适用于提示词生成设计、画布内容修改、多模型协同、图片生成及设计方案迭代，让 AI Agent 更高效地完成从创意到成稿的全过程。 - **OpenPencil 用户专属福利：** 通过 [专属推广链接](https://www.infistar.cc/register?aff=LLZC3RLG&ref_source=link) 注册并完成首次调用，即可领取 **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.
### 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.	### 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](./docs/build_windows/BUILD_WINDOWS.md) **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) 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](https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170) 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](docs/security/antivirus-false-positives.md). **Nix (Linux x86_64):** ``` … ``` 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`):** ```bash brew install zseven-w/openpencil/op ``` Or use the install script (macOS / Linux): ```bash curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | bash ``` To allow the newest pre-release: ```bash curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | OP_PRERELEASE=1 bash ``` Windows PowerShell: ```powershell irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex ``` To allow the newest pre-release: ```powershell $env:OP_PRERELEASE = "1"; irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex ``` ## Cloning (with submodules) ```bash 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) ```bash # 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: ```bash cargo run -p op-host-desktop ``` > **Prerequisites:** [Rust](https://www.rust-lang.org/) (stable) to build the product. [Bun](https://bun.sh/) >= 1.0 and [Node.js](https://nodejs.org/) >= 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:** ```bash 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:** ```bash 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 natu