OpenPencil is a vector design tool with AI generation built in. You describe a page in natural language and it streams onto an infinite canvas, and you can select elements and describe changes to modify them. For larger pages an orchestrator splits the layout into spatial sub-tasks (hero, features, footer) that several agents generate in parallel, each shown on the canvas.
Designs are saved as .op files, which are JSON and work with Git diffs and merges. Design variables become CSS custom properties, and code export covers React with Tailwind, HTML and CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, and React Native. The editor also supports components with instances and overrides, multi-theme variables, auto-layout, boolean operations, Figma file import, presentation decks with PowerPoint and PDF export, and peer-to-peer real-time collaboration.
Models connect through built-in presets for providers such as Anthropic, OpenAI, Google, and DeepSeek, or through Claude Code (via the Claude Agent SDK), Codex CLI, OpenCode, and GitHub Copilot. Prompts, thinking mode, and timeouts adapt per model tier, with simplified prompts for smaller models such as Qwen, Llama, and Mistral.
A built-in MCP server lets coding agents such as Claude Code, Codex, OpenCode, Kiro, and Copilot CLI read, create, and modify .op files, including a layered skeleton, content, and refine workflow. An op command-line tool drives the editor from a terminal with a batch design DSL. The app is a single Rust binary for macOS, Windows, and Linux, with a web version and an embeddable read-only viewer SDK for React and Vue.
Features
- Prompt to canvas: natural-language descriptions generate UI on the canvas with streaming output
- Concurrent agent teams: an orchestrator splits a page into sections that several agents design in parallel
- Design-as-code files: .op files are JSON, readable and diffable in Git
- Multi-platform code export: React with Tailwind, HTML and CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, and React Native
- MCP server: coding agents read, create, and modify designs through MCP tools
- Model capability profiles: prompts and thinking mode adapt per model tier
- Style guides: 50 or more built-in visual styles matched by tags and applied during generation
- Design system: variables, multi-theme tokens, components with overrides, and reusable UI kits
- Figma import: brings in .fig files with layout, fills, effects, text, and vectors
- Collaboration: authenticated peer-to-peer sessions with live cursors and conflict replay
- Presentation decks: deck templates with slideshow mode and PDF, HTML, and PowerPoint export
- CLI and SDK: an op command-line tool and an embeddable read-only viewer for React and Vue
