# OpenPencil

> The world's first open-source AI-native vector design tool with concurrent Agent Teams, Design-as-Code, built-in MCP Server, and multi-model intelligence.

OpenPencil is the world's first open-source AI-native vector design tool, enabling users to turn natural language prompts into UI directly on an infinite canvas in real-time. It features concurrent Agent Teams where an orchestrator decomposes complex pages into spatial sub-tasks handled by multiple AI agents simultaneously. The tool supports Design-as-Code via `.op` JSON files that are Git-friendly and diffable, with code export to React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, and React Native. It runs as a web app and native desktop application on macOS, Windows, and Linux via Electron.

- **Prompt → Canvas**: *Describe any UI in natural language and watch it appear on the infinite canvas with streaming animation; modify existing designs by selecting elements and chatting.*
- **Concurrent Agent Teams**: *The orchestrator decomposes complex pages into spatial sub-tasks, with multiple AI agents working on different sections simultaneously in parallel.*
- **Multi-Model Intelligence**: *Automatically adapts prompts, thinking mode, and timeouts per model tier — supporting Claude, GPT-4o, Gemini, DeepSeek, MiniMax, Qwen, Llama, Mistral, and more.*
- **Built-in MCP Server**: *One-click install into Claude Code, Codex, Gemini, OpenCode, Kiro, or Copilot CLIs; design from your terminal by reading, creating, and modifying `.op` files through any MCP-compatible agent.*
- **Design-as-Code**: *`.op` files are JSON — human-readable, Git-friendly, and diffable; design variables generate CSS custom properties for seamless code export.*
- **CLI (`op`)**: *Control the design tool from your terminal with commands like `op design`, `op insert`, and `op export`; supports batch design DSL, node manipulation, and code export.*
- **Multi-Platform Code Export**: *Export to React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, and React Native from a single `.op` file.*
- **Figma Import**: *Import `.fig` files with layout, fills, strokes, effects, text, images, and vectors preserved.*
- **Design System**: *Design variables with color, number, and string tokens; multi-theme support; component system with instances and overrides; CSS custom properties sync.*
- **i18n Support**: *Full interface localization in 15 languages including English, Chinese, Japanese, Korean, French, Spanish, German, Portuguese, Russian, Hindi, and more.*

## Features
- Prompt to UI generation on infinite canvas
- Concurrent Agent Teams for parallel design
- Multi-model intelligence with capability profiles
- Built-in MCP Server with one-click CLI install
- Design-as-Code with .op JSON file format
- CLI tool (op) for terminal control
- Multi-platform code export (React, Vue, Flutter, SwiftUI, etc.)
- Figma .fig file import
- Design variables and tokens with CSS sync
- Component system with instances and overrides
- Multi-theme support
- Boolean operations (union, subtract, intersect)
- Auto-layout system
- Infinite canvas with pan, zoom, and smart alignment
- Multi-page document support
- Docker support with multiple image variants
- 15-language interface localization
- Auto-update from GitHub Releases
- Native desktop app via Electron
- Vision input for reference-based design

## Integrations
Claude Code, Codex CLI, OpenCode, GitHub Copilot, Gemini CLI, Anthropic, OpenAI, Google, DeepSeek, MiniMax, Qwen, Llama, Mistral, Iconify, Figma, React, Tailwind CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native, Docker

## Platforms
WEB, WINDOWS, MACOS, LINUX, CLI, API

## Pricing
Open Source

## Links
- Website: https://op.zseven.tech
- Documentation: https://github.com/ZSeven-W/openpencil/blob/main/CLAUDE.md
- Repository: https://github.com/ZSeven-W/openpencil
- EveryDev.ai: https://www.everydev.ai/tools/openpencil