OpenPencil

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.