Skip to main content
ClaudeWave

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.

Subagents3.3k stars337 forksTypeScriptMITUpdated today
Editor's note

OpenPencil is an open-source, AI-native vector design tool that lets users describe UI components in natural language and watch them render directly on an infinite canvas in real time. It connects to Claude through a built-in MCP server that supports one-click installation into Claude Code, enabling terminal-based creation, reading, and modification of `.op` design files via any MCP-compatible agent. A standout feature is its Concurrent Agent Teams system, where an orchestrator breaks a complex page into spatial sub-tasks and dispatches multiple AI agents to work on separate sections simultaneously, each with its own canvas indicator showing progress. The tool stores designs in a human-readable JSON format, making files Git-friendly and diffable. Code export targets React plus Tailwind, HTML plus CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, and React Native from a single source file. An embeddable SDK and a command-line tool called `op` round out the package, making it relevant to UI designers, frontend developers, and anyone building design tooling into larger workflows.

ClaudeWave Trust Score
100/100
Verified
Passed
  • Open-source license (MIT)
  • Actively maintained (<30d)
  • Healthy fork ratio
  • Clear description
  • Topics declared
  • Documented (README)
Last scanned: 6/11/2026
Install as a Claude Code subagent
Method: Clone
Terminal
git clone https://github.com/ZSeven-W/openpencil && cp openpencil/*.md ~/.claude/agents/
1. Clone the repository and copy the agent .md definitions into ~/.claude/agents (or .claude/agents inside a project).
2. Start a new Claude Code session to load the agents.
3. Delegate work to them with the Task/Agent tool or by name.
Use cases

Subagents overview

README preview not available. Visit the repo on GitHub for full documentation.
agentagent-teamaiclaudeclaude-codecodexfimgaflutterhtmlmcpopencodeopenpencilpencilreactreact-nativesvelteuivibecodingvibedesignvue

What people ask about openpencil

What is ZSeven-W/openpencil?

+

ZSeven-W/openpencil is subagents for the Claude AI ecosystem. 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. It has 3.3k GitHub stars and was last updated today.

How do I install openpencil?

+

You can install openpencil by cloning the repository (https://github.com/ZSeven-W/openpencil) or following the README instructions on GitHub. ClaudeWave also provides quick install blocks on this page.

Is ZSeven-W/openpencil safe to use?

+

Our security agent has analyzed ZSeven-W/openpencil and assigned a Trust Score of 100/100 (tier: Verified). See the full breakdown of passed checks and flags on this page.

Who maintains ZSeven-W/openpencil?

+

ZSeven-W/openpencil is maintained by ZSeven-W. The last recorded GitHub activity is from today, with 14 open issues.

Are there alternatives to openpencil?

+

Yes. On ClaudeWave you can browse similar subagents at /categories/agents, sorted by popularity or recent activity.

Deploy openpencil to your cloud

Ship this repo to production in minutes. Each platform spins up its own environment with editable env vars.

Maintain this repo? Add a badge to your README

Drop the badge into your GitHub README to show it's tracked on ClaudeWave. Each badge links back to this page and reflects the live Trust Score.

Featured on ClaudeWave: ZSeven-W/openpencil
[![Featured on ClaudeWave](https://claudewave.com/api/badge/zseven-w-openpencil)](https://claudewave.com/repo/zseven-w-openpencil)
<a href="https://claudewave.com/repo/zseven-w-openpencil"><img src="https://claudewave.com/api/badge/zseven-w-openpencil" alt="Featured on ClaudeWave: ZSeven-W/openpencil" width="320" height="64" /></a>

More Subagents