OpenPencil

AI-native open-source design tool. Design-as-Code.
Prompt to UI on canvas. Multi-agent orchestration. Built-in MCP server. Code generation.

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia

Quick Start · AI · Features · Discord · Contributing

_{Click the image to watch the demo video}

## Quick Start ```bash # Install dependencies bun install # Start dev server at http://localhost:3000 bun --bun run dev ``` Or run as a desktop app: ```bash bun run electron:dev ``` > **Prerequisites:** [Bun](https://bun.sh/) >= 1.0 and [Node.js](https://nodejs.org/) >= 18 ## AI-Native Design OpenPencil is built around AI from the ground up — not as a plugin, but as a core workflow. **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 (`Cmd+,`) | | **OpenCode** | Connect in Agent Settings (`Cmd+,`) | | **GitHub Copilot** | `copilot login` then connect in Agent Settings (`Cmd+,`) | **MCP Server** - Built-in MCP server — one-click install into Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs - Design automation from terminal: read, create, and modify `.op` files via any MCP-compatible agent - **Layered design workflow** — `design_skeleton` → `design_content` → `design_refine` 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 from design tokens ## 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 `$variable` 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, `var(--name)` in code output **Figma Import** - Import `.fig` files with layout, fills, strokes, effects, text, images, and vectors preserved **Desktop App** - Native macOS, Windows, and Linux via Electron - `.op` 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** | Fabric.js v7 | | **State** | Zustand v5 | | **Server** | Nitro | | **Desktop** | Electron 35 | | **AI** | Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK | | **Runtime** | Bun · Vite 7 | | **File format** | `.op` — JSON-based, human-readable, Git-friendly | ## Project Structure ```text src/ canvas/ Fabric.js engine — drawing, sync, layout, guides, pen tool components/ React UI — editor, panels, shared dialogs, icons services/ai/ AI chat, orchestrator, design generation, streaming services/figma/ Figma .fig binary import pipeline services/codegen React+Tailwind and HTML+CSS code generators stores/ Zustand — canvas, document, pages, history, AI, settings variables/ Design token resolution and reference management mcp/ MCP server tools for external CLI integration uikit/ Reusable component kit system server/ api/ai/ Nitro API — streaming chat, generation, validation utils/ Claude CLI, OpenCode, Codex, Copilot client wrappers electron/ main.ts Window, Nitro fork, native menu, auto-updater preload.ts IPC bridge ``` ## Keyboard Shortcuts | Key | Action | | Key | Action | | --- | --- | --- | --- | --- | | `V` | Select | | `Cmd+S` | Save | | `R` | Rectangle | | `Cmd+Z` | Undo | | `O` | Ellipse | | `Cmd+Shift+Z` | Redo | | `L` | Line | | `Cmd+C/X/V/D` | Copy/Cut/Paste/Duplicate | | `T` | Text | | `Cmd+G` | Group | | `F` | Frame | | `Cmd+Shift+G` | Ungroup | | `P` | Pen tool | | `Cmd+Shift+E` | Export | | `H` | Hand (pan) | | `Cmd+Shift+C` | Code panel | | `Del` | Delete | | `Cmd+Shift+V` | Variables panel | | `[ / ]` | Reorder | | `Cmd+J` | AI chat | | Arrows | Nudge 1px | | `Cmd+,` | Agent settings | | `Cmd+Alt+U` | Boolean union | | `Cmd+Alt+S` | Boolean subtract | | `Cmd+Alt+I` | Boolean intersect | | | | ## Scripts ```bash bun --bun run dev # Dev server (port 3000) bun --bun run build # Production build bun --bun run test # Run tests (Vitest) npx tsc --noEmit # Type check bun run electron:dev # Electron dev bun run electron:build # Electron package ``` ## Contributing Contributions are welcome! See [CLAUDE.md](./CLAUDE.md) for architecture details and code style. 1. Fork and clone 2. Create a branch: `git checkout -b feat/my-feature` 3. Run checks: `npx tsc --noEmit && bun --bun run test` 4. Commit with [Conventional Commits](https://www.conventionalcommits.org/): `feat(canvas): add rotation snapping` 5. Open a PR against `main` ## Roadmap - [x] Design variables & tokens with CSS sync - [x] Component system (instances & overrides) - [x] AI design generation with orchestrator - [x] MCP server integration with layered design workflow - [x] Multi-page support - [x] Figma `.fig` import - [x] Boolean operations (union, subtract, intersect) - [ ] Collaborative editing - [ ] Plugin system ## Contributors

## Community