OpenPencil: Design at the Speed of Thought, The Open-source Alternative to Stitch and Figma AI

amy 15/05/2026

I think it is the time to stop switching between prompts, mockups, and code. Time to switch to OpenPencil!

What is OpenPencil?

Describe a UI in plain language, and it streams onto an infinite canvas in real-time. Complex pages are split into spatial tasks handled by concurrent AI agents (hero, features, footer) working in parallel. Designs are saved as human-readable .op (JSON) files—Git-friendly, diffable, and ready to export to React + Tailwind, Vue, Flutter, SwiftUI, Jetpack Compose, and more.

It includes a built-in MCP server for terminal control (op design, op insert), runs as a web app or native desktop (macOS/Windows/Linux), supports Docker for self-hosting, and embeds into your own apps via SDK.

What does it do?

Prompt → Canvas. Describe a UI in plain language. Watch it stream onto an infinite canvas in real-time. Select any element and refine it by chatting. No layers panel archaeology. No plugin sprawl.

Agents, not just assistants. An orchestrator breaks complex pages into spatial tasks. Multiple AI agents work concurrently—hero, features, footer—streaming in parallel with live canvas indicators. Think of it as a design squad, not a solo bot.

Smart model routing. OpenPencil auto-adapts to your LLM: Claude gets full reasoning prompts; GPT-4o/ Gemini run lean; smaller models receive simplified, reliable instructions. One tool, every tier.

Design-as-Code, by default. .op files are human-readable JSON—Git-friendly, diffable, versionable. Design variables become CSS custom properties. Export to React + Tailwind, Vue, Flutter, SwiftUI, Jetpack Compose, or plain HTML/CSS—from the same source.

Your terminal, now a design studio. Install the built-in MCP server and control OpenPencil via CLI: op design @brief.txt, op insert, op import:figma. Pipe, script, automate. Works with Claude Code, Codex, Copilot, Gemini CLI—or standalone.

Runs everywhere. Web app or native desktop (macOS, Windows, Linux) via Electron. Auto-updates. Double-click .op files to open. Docker images available for self-hosted teams.

Built for builders. Embed the engine with pen-engine (headless) or pen-react (UI SDK). Manage UIKits, apply style tags (glassmorphism, brutalist, retro), and enforce consistency—all MCP-accessible for external agents.

No vendor lock-in. No black box. Just open, composable, AI-native design.

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
  • Reusable UIKits — import/export component kits from .pen files

AI & Agents

  • Prompt-to-canvas with streaming generation and orchestrator-driven spatial decomposition
  • Concurrent Agent Teams — multiple designers work on different sections in parallel with per-member canvas indicators
  • Layered workflow — design_skeleton → design_content → design_refine with focused prompts per phase
  • Style Guides — 50+ built-in styles (glassmorphism, brutalist, retro, etc.) with tag-based fuzzy matching, wired into planning and generation
  • Multi-model capability profiles — auto-adapts thinking mode, effort, and prompt shape per model tier
  • Built-in agent runtime (agent-native, Zig NAPI) + Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini providers
  • Anthropic-format passthrough for Chinese LLM providers — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans

Git Integration

  • Clone wizard with SSH / HTTPS auth and SSH key management
  • Branch picker — create, switch, delete, merge, all from the git panel
  • Pull / push cascades with auth retry and non-fast-forward handling
  • Folder-mode three-way merge with on-disk MERGE_HEAD state tracking
  • Conflict panel with per-node / per-field three-way cards, inline JSON editor, bulk actions, and inline diff block
  • Remote settings and SSH keys UI; 15-locale i18n across the whole Git surface

Export

  • Canvas export — PNG, JPEG, WEBP, PDF (Cmd+Shift+P)
  • Code export — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native
  • Incremental MCP codegen pipeline — codegen_plan, codegen_submit_chunk, codegen_assemble, codegen_clean

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 with Save As, Open Recent, and an unsaved-changes dialog on close
  • Recent files persistence

License

MIT License.

Download and Install

→ Try it: GitHub
→ Install: brew install --cask openpencil (macOS) | scoop install openpencil (Windows) | Releases (Linux)

Design shouldn’t wait. Neither should you.

Related articles