openpencil/README.md

OpenPencil

Open-source design tool with a Design-as-Code philosophy.
Design on canvas. Generate code. Let AI build screens from a prompt.

Quick Start · Features · AI Agents · 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

Features

Canvas & Drawing

• Infinite canvas with pan, zoom, smart alignment guides, and snapping
• Rectangle, Ellipse, Line, Polygon, Pen (Bezier), Frame, Text
• 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

Code Generation

• React + Tailwind CSS
• HTML + CSS
• CSS Variables from design tokens

Figma Import

• Import .fig files with layout, fills, strokes, effects, text, images, and vectors preserved

Desktop App

• Native macOS, Windows, and Linux via Electron
• Auto-update from GitHub Releases
• Native application menu and file dialogs

AI Agents

OpenPencil integrates with multiple AI coding agents to generate full-page designs from a single prompt — directly on canvas with streaming animation.

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+,)

• Text-to-design — describe a page, get it generated on canvas in real-time
• Image attachments — attach screenshots or mockups for vision-based analysis
• Orchestrator — decomposes complex pages into spatial sub-tasks for parallel generation
• Design modification — select elements, then describe changes in natural language
• MCP server — install into Claude Code / Codex / Gemini / OpenCode / Kiro CLIs for design automation from terminal

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

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
• 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