AI-Native Design Tool

Design as Code

Prompt to UI on canvas. Multi-agent orchestration. Built-in MCP server. Production code generation. Open source.

OpenPencil
OpenPencil interface showing AI-powered design generation on canvas

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 openpencil

Or install CLI via npm

npm install -g @zseven-w/openpencil