AI Skill Hub 强烈推荐:OpenPencil开源向量设计工具 是一款优质的MCP工具。已获得 3.1k 颗 GitHub Star,AI 综合评分 8.5 分,在同类工具中表现稳健。如果你正在寻找可靠的MCP工具解决方案,这是一个值得深入了解的选择。
全球首个开源AI原生向量设计工具,集成MCP协议支持AI Agent团队协作。基于TypeScript构建,提供AI辅助设计能力,适合设计师、开发者和AI应用开发者使用,推动设计自动化和智能化。
OpenPencil开源向量设计工具 是一款遵循 MCP(Model Context Protocol)标准协议的 AI 工具扩展。通过 MCP 协议,它可以让 Claude、Cursor 等主流 AI 客户端直接访问和操作外部工具、数据源和服务,实现 AI 能力的无缝扩展。无论是文件操作、数据库查询还是 API 调用,都可以通过自然语言在 AI 对话中直接触发,极大提升生产效率。
全球首个开源AI原生向量设计工具,集成MCP协议支持AI Agent团队协作。基于TypeScript构建,提供AI辅助设计能力,适合设计师、开发者和AI应用开发者使用,推动设计自动化和智能化。
OpenPencil开源向量设计工具 是一款遵循 MCP(Model Context Protocol)标准协议的 AI 工具扩展。通过 MCP 协议,它可以让 Claude、Cursor 等主流 AI 客户端直接访问和操作外部工具、数据源和服务,实现 AI 能力的无缝扩展。无论是文件操作、数据库查询还是 API 调用,都可以通过自然语言在 AI 对话中直接触发,极大提升生产效率。
# 方式一:通过 Claude Code CLI 一键安装
claude skill install https://github.com/ZSeven-W/openpencil
# 方式二:手动配置 claude_desktop_config.json
{
"mcpServers": {
"openpencil--------": {
"command": "npx",
"args": ["-y", "openpencil"]
}
}
}
# 配置文件位置
# macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
# Windows: %APPDATA%/Claude/claude_desktop_config.json
# 安装后在 Claude 对话中直接使用 # 示例: 用户: 请帮我用 OpenPencil开源向量设计工具 执行以下任务... Claude: [自动调用 OpenPencil开源向量设计工具 MCP 工具处理请求] # 查看可用工具列表 # 在 Claude 中输入:"列出所有可用的 MCP 工具"
// claude_desktop_config.json 配置示例
{
"mcpServers": {
"openpencil________": {
"command": "npx",
"args": ["-y", "openpencil"],
"env": {
// "API_KEY": "your-api-key-here"
}
}
}
}
// 保存后重启 Claude Desktop 生效
<p align="center"> <img src="./crates/op-host-desktop/assets/icon.png" alt="OpenPencil" width="120" /> </p>
<p align="center"> <strong>The world's first open-source AI-native vector design tool.</strong><br /> <sub>Concurrent Agent Teams • Design-as-Code • Built-in MCP Server • Multi-model Intelligence</sub> </p>
<p align="center"> <a href="./README.md"><b>English</b></a> · <a href="./README.zh.md">简体中文</a> · <a href="./README.zh-TW.md">繁體中文</a> · <a href="./README.ja.md">日本語</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.fr.md">Français</a> · <a href="./README.es.md">Español</a> · <a href="./README.de.md">Deutsch</a> · <a href="./README.pt.md">Português</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.hi.md">हिन्दी</a> · <a href="./README.tr.md">Türkçe</a> · <a href="./README.th.md">ไทย</a> · <a href="./README.vi.md">Tiếng Việt</a> · <a href="./README.id.md">Bahasa Indonesia</a> </p>
<p align="center"> <a href="https://github.com/ZSeven-W/openpencil/stargazers"><img src="https://img.shields.io/github/stars/ZSeven-W/openpencil?style=flat&color=cfb537" alt="Stars" /></a> <a href="https://github.com/ZSeven-W/openpencil/blob/main/LICENSE"><img src="https://img.shields.io/github/license/ZSeven-W/openpencil?color=64748b" alt="License" /></a> <a href="https://github.com/ZSeven-W/openpencil/actions/workflows/rust-check.yml"><img src="https://img.shields.io/github/actions/workflow/status/ZSeven-W/openpencil/rust-check.yml?label=CI" alt="CI" /></a> <a href="https://discord.gg/h9Fmyy6pVh"><img src="https://img.shields.io/badge/Discord-Join%20chat-5865F2?logo=discord&logoColor=white" alt="Discord" /></a> </p>
<p align="center"> <a href="https://trendshift.io/repositories/24088?utm_source=repository-badge&utm_medium=badge&utm_campaign=badge-repository-24088" target="_blank" rel="noopener noreferrer"><img src="https://trendshift.io/api/badge/repositories/24088" alt="ZSeven-W%2Fopenpencil | Trendshift" width="250" height="55" /></a> </p>
<br />
<p align="center"> <a href="https://oss.ioa.tech/zseven/openpencil/a46e24733239ce24de36702342201033.mp4"> <img src="./screenshot/op-cover.png" alt="OpenPencil — click to watch demo" width="100%" /> </a> </p> <p align="center"><sub>Click the image to watch the demo video</sub></p>
Canvas & Drawing
Design System
$variable referencesvar(--name) in code output.pen filesAI & Agents
design_skeleton → design_content → design_refine with focused prompts per phaseCollaboration
--serve-web daemon, authenticated against the op-hub with cross-account tenant sharingPresentation Decks
.pptx), or a hyperframes video compositionTemplates & Web Capture
.op file offlineGit Integration
MERGE_HEAD state trackingExport
Cmd+Shift+P)codegen_plan, codegen_submit_chunk, codegen_assemble, codegen_cleanFigma Import
.fig files with layout, fills, strokes, effects, text, images, and vectors preservedDesktop App
.op file association — double-click to open, single-instance lockBuilding 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
bash scripts/start-web-rust.sh
Browser-entered built-in provider, image-generation, and Openverse credentials
are kept in same-origin `localStorage`
(`openpencil-rust-web-credentials`) by default,
separate from ordinary web preferences. A credential needed by an AI request is
sent with that request, but the daemon does not write the browser snapshot to
`settings.json`.
Private deployments can opt into server persistence with
`OPENPENCIL_PERSIST_WEB_CREDENTIALS_SERVER=true`. This setting is
deployment-wide; each accepted browser snapshot replaces the shared
browser-owned copy. Enable it only for a trusted, access-controlled deployment
with one active administrator profile, behind HTTPS. Turning the setting off
removes previously persisted browser-owned credentials at the next startup
while preserving operator-owned configuration. As with all `localStorage`,
same-origin scripts can read these values, so the web origin must be protected
from untrusted scripts and XSS. Before downgrading to a release that predates
this switch, turn it off and start the current release once to scrub the
browser-owned copy.
The web host supports built-in API-key agents only. CLI and ACP agents remain
native-only: they are not shown in the web model picker, stored in browser
credential snapshots, synchronized to the server, or exposed through web
connect routes. Browser requests to credential and AI endpoints allow
loopback/localhost origins by default. A public reverse proxy must separately set
`OPENPENCIL_WEB_ALLOWED_ORIGINS` to a comma-separated list of exact origins,
for example `https://demo.openpencil.dev`.
Server persistence does not permit browser-controlled requests to loopback,
private, link-local, metadata, or reserved provider endpoints. A trusted private
deployment that intentionally uses an internal provider must separately set
`OPENPENCIL_WEB_AI_ENDPOINT_ALLOWLIST` to a comma-separated list of exact URL
origins, for example `http://127.0.0.1:11434,https://llm.internal.example`.
Or run as a desktop app:
bash cargo run -p op-host-desktop ```
Prerequisites: Rust (stable) to build the product. Bun >= 1.0 and Node.js >= 18 are only needed for the web SDK under packages/.
Tagged Rust releases publish a single web-host image. The retired TypeScript images with bundled AI CLIs are no longer published.
| Image | Includes |
|---|---|
ghcr.io/zseven-w/openpencil-web:vX.Y.Z | Rust web host, wasm bundle, and CanvasKit assets |
The web UI exposes built-in agent profiles only; Claude/Codex/OpenCode/Copilot CLI tooling is not bundled into Docker images.
Run:
VERSION="$(scripts/workspace-version.sh)"
docker run -d -p 3100:3100 "ghcr.io/zseven-w/openpencil-web:v${VERSION}"
Then open http://localhost:3100/.
Build locally:
docker build -f Dockerfile.web-rust -t openpencil-web-rust .
docker run -p 3100:3100 openpencil-web-rust
rustup toolchain install 1.94 rustup target add wasm32-unknown-unknown
cargo check --workspace cargo test --workspace cargo clippy --workspace --all-targets -- -D warnings cargo check --target wasm32-unknown-unknown -p op-collab --no-default-features cargo check --target wasm32-unknown-unknown -p op-host-web --no-default-features --features web # kickoff §1.2 wasm32 invariant cargo deny check && cargo deny --target wasm32-unknown-unknown check bans # cargo-deny (native + wasm32 bans; CI uses cargo-deny-action@v2) ```
Entry crates (crates/ — build targets):
| Crate | Category | wasm32 |
|---|---|---|
| op-host-web | Browser bundle entry — wasm32 cdylib, renders via CanvasKit | ✅ |
| op-host-native | Native host lib — WidgetHostNative + skia-safe GL backend (desktop + mobile) | ❌ (native only) |
| op-engine-ffi | Player C ABI — one engine, three shells (iOS Metal / Android EGL / host raster) | ❌ (native only) |
| op-engine-jni | Android JNI marshalling layer for op-engine-ffi (engine thread, registry, callbacks) | ❌ (native only) |
| op-host-desktop | Desktop binary openpencil-desktop (winit + skia-safe GL) — also the --serve-web daemon that hosts the web bundle | ❌ (native only) |
| op-cli | op command-line tool | ❌ (native only) |
Shared library crates: op-editor-core (canonical .op state), op-editor-ui (platform-free widgets + RenderBackend), op-editor-host-core (transport-free host state machines), op-collab (open, transport-free collaboration protocol/hash/exact apply), op-collab-transport (native Noise/TCP, bounded admission, and optional LAN discovery), op-mcp, op-ai, op-ai-skills, op-codegen, op-orchestrator, op-figma, op-git, op-opmerge, op-pen-loader, op-design-lint, op-config-store, op-process-io, op-acp, op-i18n, op-rpc-transport — plus op-collab-smoke (authenticated two-process collaboration/recovery matrix) and op-smoke (headless design-turn test runner). The mobile players live in packaging/ (ios + android shells over op-engine-ffi / op-engine-jni). The browser bundle renders through the official CanvasKit skia WASM (loaded separately), so the retired skia-safe-op wasm fork + wasm-libc-shim no longer exist.
Submodule: vendor/agent → github.com/ZSeven-W/agent-rs (cross-product Rust agent runtime).
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.
</td> <td width="50%">
```bash
Control 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.
</td> </tr> <tr> <td width="50%">
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.
</td> </tr> <tr> <td width="50%">
Install via Homebrew or the install script, then control the design tool from your terminal:
brew install zseven-w/openpencil/op
curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | bash
curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | OP_PRERELEASE=1 bash
irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex
$env:OP_PRERELEASE = "1"; irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex
op start # Launch desktop app
op start --headless --file design.op # Launch headless file-backed server
op design @landing.txt # Batch design from file
op design @ui.js # Sandboxed JavaScript with loops
op insert '{"type":"rectangle"}' # Insert a node
op import:figma design.fig # Import Figma file
cat design.dsl | op design - # Pipe from stdin
Supports three input methods: inline string, @filepath (read from file), or - (read from stdin). Works with the desktop app, web server, or headless file-backed server. See the CLI command reference for all commands.
LLM Skill — install the OpenPencil Skill plugin to teach AI agents how to design with op. Run op install for detected agents, or target one explicitly with op install --target codex.
cd packages && bun run lint # Lint the web SDK (oxlint); also: bun run format cd packages && bun run generate-iconify-catalog # Regenerate the Rust icon catalog assets
```bash git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git
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.
创新AI原生设计工具,MCP集成架构前沿。社区热度高、更新活跃,AI赋能设计领域典范之作,具高度参考价值。
AI Skill Hub 为第三方内容聚合平台,本页面信息基于公开数据整理,不对工具功能和质量作任何法律背书。
建议在沙箱或测试环境中充分验证后,再部署至生产环境,并做好必要的安全评估。
✅ MIT 协议 — 最宽松的开源协议之一,可自由商用、修改、分发,仅需保留版权声明。
总体来看,OpenPencil开源向量设计工具 是一款质量优秀的MCP工具,在同类工具中具备一定竞争力。AI Skill Hub 将持续追踪其更新动态,建议收藏备用,结合自身场景选择合适时机引入使用。
| 原始名称 | openpencil |
| 原始描述 | 开源MCP工具:The world's first open-source AI-native vector design tool and the first to feat。⭐3.1k · TypeScript |
| Topics | 向量设计AI原生MCP协议Agent协作开源设计工具 |
| GitHub | https://github.com/ZSeven-W/openpencil |
| License | MIT |
| 语言 | TypeScript |
收录时间:2026-05-16 · 更新时间:2026-05-19 · License:MIT · AI Skill Hub 不对第三方内容的准确性作法律背书。
选择 Agent 类型,复制安装指令后粘贴到对应客户端