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

# Install dependencies
bun install

# Start dev server at http://localhost:3000
bun --bun run dev

Or run as a desktop app:

bun run electron:dev

Prerequisites: Bun >= 1.0 and Node.js >= 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

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

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 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: feat(canvas): add rotation snapping
5. Open a PR against main

Roadmap

• Design variables & tokens with CSS sync
• Component system (instances & overrides)
• AI design generation with orchestrator
• MCP server integration with layered design workflow
• Multi-page support
• Figma .fig import
• Boolean operations (union, subtract, intersect)
• Collaborative editing
• Plugin system

Contributors

Community

Join our Discord — Ask questions, share designs, suggest features.

License

MIT — Copyright (c) 2026 ZSeven-W