openpencil

<p align="center"> <img src="./crates/op-host-desktop/assets/icon.png" alt="OpenPencil" width="120" /> </p> <h1 align="center">OpenPencil</h1> <p align="center"> <strong>The world's first open-source AI-native vector design tool.</strong><br /> _{Concurrent Agent Teams &bull; Design-as-Code &bull; Built-in MCP Server &bull; Multi-model Intelligence} </p> <p align="center"> <a href="./README.md"><b>English</b></a> · <a href="./README.zh.md">简体中文</a> · <a href="./README.zh-TW.md">繁體中文</a> · <a href="./README.ja.md">日本語</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.fr.md">Français</a> · <a href="./README.es.md">Español</a> · <a href="./README.de.md">Deutsch</a> · <a href="./README.pt.md">Português</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.hi.md">हिन्दी</a> · <a href="./README.tr.md">Türkçe</a> · <a href="./README.th.md">ไทย</a> · <a href="./README.vi.md">Tiếng Việt</a> · <a href="./README.id.md">Bahasa Indonesia</a> </p> <p align="center"> <a href="https://github.com/ZSeven-W/openpencil/stargazers"><img src="https://img.shields.io/github/stars/ZSeven-W/openpencil?style=flat&color=cfb537" alt="Stars" /></a> <a href="https://github.com/ZSeven-W/openpencil/blob/main/LICENSE"><img src="https://img.shields.io/github/license/ZSeven-W/openpencil?color=64748b" alt="License" /></a> <a href="https://github.com/ZSeven-W/openpencil/actions/workflows/rust-check.yml"><img src="https://img.shields.io/github/actions/workflow/status/ZSeven-W/openpencil/rust-check.yml?label=CI" alt="CI" /></a> <a href="https://discord.gg/h9Fmyy6pVh"><img src="https://img.shields.io/badge/Discord-Join%20chat-5865F2?logo=discord&logoColor=white" alt="Discord" /></a> </p> <p align="center"> <a href="https://trendshift.io/repositories/24088?utm_source=repository-badge&amp;utm_medium=badge&amp;utm_campaign=badge-repository-24088" target="_blank" rel="noopener noreferrer"><img src="https://trendshift.io/api/badge/repositories/24088" alt="ZSeven-W%2Fopenpencil | Trendshift" width="250" height="55" /></a> </p> <br /> <p align="center"> <a href="https://oss.ioa.tech/zseven/openpencil/a46e24733239ce24de36702342201033.mp4"> <img src="./screenshot/op-cover.png" alt="OpenPencil — click to watch demo" width="100%" /> </a> </p> <p align="center">_{Click the image to watch the demo video}</p>

Why OpenPencil

<table> <tr> <td width="50%" align="center" valign="middle"> <a href="https://www.infistar.cc/register?aff=LLZC3RLG&amp;ref_source=link" title="Infistar.cc 无限星河"> <img src="./screenshot/infistar-sponsor-banner.png" alt="Infistar.cc 无限星河 — 一站式全球大模型 API 服务平台" width="100%" /> </a> </td> <td width="50%" align="center" valign="middle"> <a href="https://fluxionai.world/register?source=github&amp;campaign=github-openpencil&amp;promo=OPENPENCIL" title="Fluxion AI"> <img src="./screenshot/fluxion-ai-sponsor-banner.png" alt="Fluxion AI — reliable, cost-efficient access to GPT, Claude, and other leading AI models through one unified API" width="100%" /> </a> </td> </tr> <tr> <td width="50%" valign="top"> <h3><a href="https://www.infistar.cc/register?aff=LLZC3RLG&amp;ref_source=link">OpenPencil × Infistar.cc 无限星河｜全模型 API · 驱动 AI 原生设计创作</a></h3> <p>感谢 <a href="https://www.infistar.cc/register?aff=LLZC3RLG&amp;ref_source=link">Infistar.cc 无限星河</a> 赞助并为 OpenPencil 提供模型服务支持！</p> <ul> <li>⚡ <strong>稳定承载复杂设计任务：</strong> 提供企业级高并发通道与多节点冗余，价格低至官方渠道 1 折，稳定支持长任务、流式响应与连续工具调用。</li> <li>🧠 <strong>一个 API Key 接入主流模型：</strong> 全面支持 ChatGPT、Claude、Gemini、Kimi、GLM、DeepSeek 等模型，兼容 OpenAI、Anthropic 等主流接口，可在 OpenPencil 中灵活配置模型服务。</li> <li>🎨 <strong>赋能 AI 原生矢量设计：</strong> 适用于提示词生成设计、画布内容修改、多模型协同、图片生成及设计方案迭代，让 AI Agent 更高效地完成从创意到成稿的全过程。</li> <li>🎁 <strong>OpenPencil 用户专属福利：</strong> 通过 <a href="https://www.infistar.cc/register?aff=LLZC3RLG&amp;ref_source=link">专属推广链接</a> 注册并完成首次调用，即可领取 <strong>5 美元等值测试额度 / 首充专属优惠</strong>！</li> </ul> </td> <td width="50%" valign="top"> <h3><a href="https://fluxionai.world/register?source=github&amp;campaign=github-openpencil&amp;promo=OPENPENCIL">OpenPencil × Fluxion AI | One unified API for GPT, Claude, and more</a></h3> <p>Thanks to <a href="https://fluxionai.world/register?source=github&amp;campaign=github-openpencil&amp;promo=OPENPENCIL">Fluxion AI</a> for sponsoring OpenPencil!</p> <ul> <li>⚡ <strong>Reliable, cost-efficient access:</strong> GPT, Claude, and other leading AI models through one unified API — save up to 70% compared with official API pricing.</li> <li>🎁 <strong>OpenPencil user bonus:</strong> get <strong>$1 in API credits</strong> when you <a href="https://fluxionai.world/register?source=github&amp;campaign=github-openpencil&amp;promo=OPENPENCIL">sign up through this link</a>.</li> </ul> </td> </tr> </table> <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.

</td> </tr> <tr> <td width="50%">

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

</td> </tr> <tr> <td width="50%">

🖥️ 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.

</td> <td width="50%">

⌨️ 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.

</td> </tr> <tr> <td width="50%">

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

</td> <td width="50%">

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

</td> </tr> <tr> <td width="50%">

🛡️ 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.

</td> <td width="50%">

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

</td> </tr> </table>

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