openpencil

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

The web UI exposes built-in agent profiles only; Claude/Codex/OpenCode/Copilot/Gemini 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