ZSeven-W / 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 🎨 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. 🧠 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 files through any MCP-compatible agent. 📦 Design-as-Code 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 via Electron. Auto-updates from GitHub Releases. file association — double-click to open. Quick Start Or run as a desktop app: > **Prerequisites:** Bun >= 1.0 and Node.js >= 18 Docker Multiple image variants are available — pick the one that fits your needs: | Image | Size | Includes | | --- | --- | --- | | | ~226 MB | Web app only | | | — | + Claude Code CLI | | | — | + Codex CLI | | | — | + OpenCode CLI | | | — | + GitHub Copilot CLI | | | ~1 GB | All CLI tools | **Run (web only):** **Run with AI CLI (e.g. Claude Code):** The AI chat relies on Claude CLI OAuth login. Use a Docker volume to persist the login session: **Build locally:** AI-Native Design **Prompt to UI** • **Text-to-design** — describe a page, get it generated on canvas in real-time with streaming animation • **Orchestrator** — decomposes complex pages into spatial sub-tasks for parallel generation • **Design modification** — select elements, then describe changes in natural language • **Vision input** — attach screenshots or mockups for reference-based design **Multi-Agent Support** | Agent | Setup | | --- | --- | | **Claude Code** | No config — uses Claude Agent SDK with local OAuth | | **Codex CLI** | Connect in Agent Settings ( ) | | **OpenCode** | Connect in Agent Settings ( ) | | **GitHub Copilot** | then connect in Agent Settings ( ) | **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. **MCP Server** • Built-in MCP server — one-click install into Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs • Auto-detects Node.js — if not installed, falls back to HTTP transport and auto-starts the MCP HTTP server • Design automation from terminal: read, create, and modify files via any MCP-compatible agent • **Layered design workflow** — → → for higher-fidelity multi-section designs • **Segmented prompt retrieval** — load only the design knowledge you need (schema, layout, roles, icons, planning, etc.) • 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 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 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, in code output **Figma Import** • Import files with layout, fills, strokes, effects, text, images, and vectors preserved **Desktop App** • Native macOS, Windows, and Linux via Electron • file association — double-click to open, single-instance lock • Auto-update from GitHub Releases • Native application menu and file dialogs Tech Stack | | | | --- | --- | | **Frontend** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui | | **Canvas** | CanvasKit/Skia (WASM, GPU-accelerated) | | **State** | Zustand v5 | | **Server** | Nitro | | **Desktop** | Electron 35 | | **AI** | Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK | | **Runtime** | Bun · Vite 7 | | **File format** | — JSON-based, human-readable, Git-friendly | Project Structure Keyboard Shortcuts | Key | Action | | Key | Action | | --- | --- | --- | --- | --- | | | Select | | | Save | | | Rectangle | | | Undo | | | Ellipse | | | Redo | | | Line | | | Copy/Cut/Paste/Duplicate | | | Text | | | Group | | | Frame | | | Ungroup | | | Pen tool | | | Export | | | Hand (pan) | | | Code panel | | | Delete | | | Variables panel | | | Reorder | | | AI chat | | Arrows | Nudge 1px | | | Agent settings | | | Boolean union | | | Boolean subtract | | | Boolean intersect | | | | Scripts Contributing Contributions are welcome! See CLAUDE.md for architecture details and code style. • Fork and clone • Create a branch: • Run checks: • Co…