Claude Code plugin

Openpencil

The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.

7,037 stars 607 forksPlugins & marketplaces Source

Install

brew install --cask openpencil

Found in the project README. Check it for setup steps after installing.

From source

git clone https://github.com/ZSeven-W/openpencil.git

From the README

OpenPencil

The world's first open-source AI-native vector design tool.
Concurrent Agent Teams &bull; Design-as-Code &bull; Built-in MCP Server &bull; Multi-model Intelligence

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia

Click the image to watch the demo video

Why OpenPencil

🎨 Prompt → Canvas

Describe any UI in natural language. Watch it appear on the infinite canvas in real-time with streaming animation. Modify existing designs by selecting elements and chatting.

🤖 Concurrent Agent Teams

The orchestrator decomposes complex pages into spatial sub-tasks. Multiple AI agents work on different sections simultaneously — hero, features, footer — all streaming in parallel with per-member canvas indicators.

🧠 Multi-Model Intelligence

Automatically adapts to each model's capabilities. Claude gets full prompts with thinking; GPT-4o/Gemini disable thinking; smaller models (MiniMax, Qwen, Llama) get simplified prompts for reliable output.

🔌 MCP Server

One-click install into Claude Code, Codex, OpenCode, Kiro, or Copilot CLIs. Design from your terminal — read, create, and modify .op files through any MCP-compatible agent.

🎨 Style Guides

Built-in style guide library with tag-based fuzzy matching. Apply visual styles (glassmorphism, brutalist, retro, etc.) to AI-generated designs. MCP tools for external agent access.

📦 Design-as-Code

.op files are JSON — human-readable, Git-friendly, diffable. Design variables generate CSS custom properties. Code export to React + Tailwind or HTML + CSS.

🖥️ Runs Everywhere

Web app + native desktop on macOS, Windows, and Linux — one Rust core, a single self-contained binary, no browser engine. .op file association —…

Read the full README on GitHub

How plugins work

A plugin bundles slash commands, subagents, skills, hooks, MCP servers and status lines so they install together.
Add the marketplace inside Claude Code with /plugin marketplace add ZSeven-W/openpencil, then run /plugin to pick what to install.
You can turn a plugin off again from /plugin without deleting anything.

Claude Code docs

Details

Repository: ZSeven-W/openpencil
Type: Plugins & marketplaces
Website: op.zseven.tech
Language: Rust
License: MIT
Last updated: 2 November 2026
Topics: agentagent-teamaiclaudeclaude-codecodexdsh-pluginfimgafluttermcpopencodeopenpencil