AI-Native Design Tool
Design as Code
Prompt to UI on canvas. Multi-agent orchestration. Built-in MCP server. Production code generation. Open source.

Describe it. Watch it appear.
Type a natural-language prompt. The AI streams a production-quality UI directly onto the infinite canvas — rectangles, text, icons, layout, all in real time.
- Streaming generation with live canvas updates
- Orchestrator decomposes complex pages into spatial sub-tasks
- 50+ style guides for consistent visual language
One prompt. Multiple designers.
The orchestrator splits your page into sections and assigns each to a parallel AI agent. Hero, features, footer — all streaming simultaneously with per-member canvas indicators.
- Concurrent Agent Teams with spatial decomposition
- Per-member canvas indicators show who's working where
- Layered workflow: skeleton → content → refine
Your terminal is a design tool.
Install the MCP server into Claude Code, Codex, Gemini, or any compatible CLI. Read, create, and modify .op files from your editor — or script batch operations with the op CLI.
- One-click install into 6 major AI CLIs
- op CLI for scripted design operations
- Incremental codegen pipeline: plan → submit → assemble
Git Integration
Clone repos, pick branches, push and pull — all from the editor. Three-way merge with a built-in conflict resolution panel.
Style Guides
50+ built-in styles with tag-based fuzzy matching. Apply consistent visual language across your entire project.
Figma Import
Import .fig files with full layout, style, and component preservation. Seamless migration from your existing workflow.
Canvas Export
Export designs as PNG, JPEG, WebP, or PDF. Code export to React, Vue, Svelte, Flutter, SwiftUI, and more.
design.md
Markdown-based design system spec. AI agents follow it for consistent output. Import, export, or auto-generate.
Codegen Pipeline
Incremental code generation: plan, submit chunks, assemble output. 8 framework targets from one .op file.
Ready to start?
Free and open source. Available for macOS, Windows, and Linux.
- License
- MIT
- License
- Platforms
- 3
- Platforms
- AI Agents
- 3+
- AI Agents
- File Format
- .op
- File Format
Or install via package manager
brew tap zseven-w/openpencil && brew install --cask openpencilOr install CLI via npm
npm install -g @zseven-w/openpencil