by ZSeven-W
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.
# Add to your Claude Code skills
git clone https://github.com/ZSeven-W/openpencilLast scanned: 4/24/2026
{
"issues": [],
"status": "PASSED",
"scannedAt": "2026-04-24T06:08:21.681Z",
"semgrepRan": false,
"npmAuditRan": false,
"pipAuditRan": true
}openpencil is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by ZSeven-W. 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 5,799 GitHub stars.
Yes. openpencil passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.
Clone the repository with "git clone https://github.com/ZSeven-W/openpencil" and add it to your Claude Code skills directory (see the Installation section above).
openpencil is primarily written in Rust. It is open-source under ZSeven-W on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh openpencil against similar tools.
No comments yet. Be the first to share your thoughts!
Based on votes and bookmarks from developers who liked this skill
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
感谢 Infistar.cc 无限星河 赞助并为 OpenPencil 提供模型服务支持！
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.
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.
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.
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.
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.
.op files are JSON — human-readable, Git-friendly, diffable. Design variables generate CSS custom properties. Code export to React + Tailwind or HTML + CSS.
Web app + native desktop on macOS, Windows, and Linux — one Rust core, a single self-contained binary, no browser engine. .op file association — double-click to open.
opControl the design tool from your terminal. op design, op insert — batch design DSL, node manipulation. Pipe in from files or stdin. Works with desktop app or web server.
Export to React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native — all from one .op file. Design variables become CSS custom properties.
op-web-sdk (vanilla) + op-web-sdk-react / op-web-sdk-vue adapters — embed a read-only .op viewer in your own app, powered by the same wasm renderer the editor ships.
Manage reusable UIKits with style switching and component composition. Import/export kits from .pen files. Built-in registry with MCP tools for external access.
Design together over authenticated peer-to-peer sessions with a public relay and built-in regional hubs. Join with a short pairing code, see live remote cursors, and resolve conflicts with per-edit detail and replay.
Building from source on Windows: see BUILD_WINDOWS.md
macOS (Homebrew):
brew tap zseven-w/openpencil
brew install --cask openpencil
Windows (Scoop):
scoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil
scoop install openpencil
Linux / Windows direct download: GitHub Releases — .exe (Windows), .AppImage / .deb (Linux)
The Windows .exe installer, both Scoop packages, and the install-op.ps1
CLI installer check and, when needed, service the pinned, Microsoft-signed
Visual C++ v14 runtime during every install or upgrade. The portable Windows
.zip archives and Windows VSIX packages do not run an elevated system
installer; install Microsoft's
latest supported Visual C++ Redistributable
before using those artifacts directly.
Antivirus flagged the Windows installer? That's a known heuristic false positive on new, low-prevalence releases — see how to verify your download.
Nix (Linux x86_64):
nix develop
nix run . # launch the desktop app
nix build .#openpencil # native web host + CanvasKit web bundle
nix build .#op-cli # the `op` CLI
nix build .#prebuilt # use the matching upstream desktop archive
nix build .#prebuilt-cli # use the matching upstream CLI archive
nix build .#web-server # native GL-free web server + web bundle
nix build .#runtime-prebuilt # prebuilt desktop + `op` CLI runtime
nix build .#web-sdk-packages # npm tarballs for the web SDKs
nix build .#appimage # portable desktop AppImage
The flake uses the pinned Rust toolchain from rust-toolchain.toml and is
currently published for x86_64-linux. A Debian package is not produced by
the flake yet; use the upstream release artifacts when a .deb is required.
The prebuilt outputs use the release version and hashes pinned in
nix/release-manifest.json, independently of the workspace source version.
After a release is published, the release workflow opens a PR to refresh that
manifest. Until it is merged, the prebuilt outputs continue to use the prior
published release; the source-built outputs always build the checked-out source.
CLI (op):
brew install zseven-w/openpencil/op
Or use the install script (macOS / Linux):
curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | bash
To allow the newest pre-release:
curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | OP_PRERELEASE=1 bash
Windows PowerShell:
irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex
To allow the newest pre-release:
$env:OP_PRERELEASE = "1"; irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex
git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git
# Or already cloned — sync first so stale submodule URLs pick up .gitmodules changes:
git submodule sync --recursive && git submodule update --init --recursive
Three submodules live under vendor/, all public and fetched over HTTPS (no SSH key needed): jian (GPU-Skia UI framework — widgets/render/events), casement (winit fork), and agent (agent-rs — cross-product Rust agent runtime, shared by OP + Zode). vendor/anthropic-agent-sdk is tracked in-tree, not a submodule.
# Web dev server (builds the CanvasKit wasm bundle,