openpencil 如何安装和开始使用？

访问 openpencil 的 GitHub 仓库或官方网站，按照 README 文档中的步骤安装依赖并运行。通常需要 Python 3.8+ 或 Node.js 16+ 基础环境。

openpencil 是否免费？许可证是什么？

openpencil 完全免费，采用 MIT 许可证开源发布，任何人都可以免费使用、修改和分发。

openpencil 适合哪些用户使用？

openpencil 对初学者友好，无需深厚技术背景即可快速上手。同时也适合有经验的开发者和 AI 工程师进行深度定制。

openpencil 的社区活跃度和项目维护状况如何？

openpencil 在 GitHub 上已获得 3,092 个 Star，拥有较好的社区基础，定期更新迭代。

📄 工具详情 ⚙️ 安装教程 📚 使用教程

能力标签

🔌 MCP 🤖 Agent 🔄 工作流 🌐 翻译 🐳 Docker 💻 CLI 🔗 REST API 🖼 视觉 🧠 Claude ✨ GPT

🔌

MCP工具

OpenPencil开源向量设计工具

Q: openpencil 是什么工具？

openpencil 是一款TypeScript开发的AI辅助工具。开源MCP工具：The world's first open-source AI-native vector design tool and the first to feat。⭐3.1k · TypeScript 主要应用场景包括：编程开发、MCP配置。

基于 TypeScript · 让 AI 助手直接操作你的系统与工具

英文名：openpencil

⭐ 3.1k Stars 🍴 314 Forks 💻 TypeScript 📄 MIT 🏷 AI 8.5分

8.5AI 综合评分

向量设计AI原生MCP协议Agent协作开源设计工具

⬇ 下载源码 ZIP ⚙️ 配置说明 📺 TG 频道

✦ AI Skill Hub 推荐

AI Skill Hub 强烈推荐：OpenPencil开源向量设计工具是一款优质的MCP工具。已获得 3.1k 颗 GitHub Star，AI 综合评分 8.5 分，在同类工具中表现稳健。如果你正在寻找可靠的MCP工具解决方案，这是一个值得深入了解的选择。

📚 深度解析

OpenPencil开源向量设计工具是一款基于 MCP（Model Context Protocol）标准协议的 AI 工具扩展。MCP 协议由 Anthropic 开发并开源，旨在建立 AI 模型与外部工具之间的标准化通信接口，目前已被 Claude Desktop、Claude Code、Cursor 等主流 AI 工具采纳。

通过安装 OpenPencil开源向量设计工具，你的 AI 助手将获得额外的工具调用能力，可以用自然语言直接操控该工具的功能，无需学习复杂的命令行语法。MCP 工具的核心价值在于"一次配置，永久增强"——配置完成后，每次与 AI 对话时都可以无缝调用这些工具。

在技术实现上，MCP 工具通过标准的 JSON-RPC 协议与 AI 客户端通信，工具的功能以"工具列表"的形式暴露给 AI 模型，AI 可以按需调用。OpenPencil开源向量设计工具提供了结构化的工具调用接口，使 AI 模型能够精确地理解和使用每个功能点，显著降低 AI 在工具使用上的错误率。

与传统的 API 集成相比，MCP 工具的优势在于无需编写代码——用户只需在配置文件中添加几行 JSON，即可让 AI 获得全新能力。AI Skill Hub 将 OpenPencil开源向量设计工具评为 AI 评分 8.5 分，属于同类工具中的优质选择。

📋 工具概览

全球首个开源AI原生向量设计工具，集成MCP协议支持AI Agent团队协作。基于TypeScript构建，提供AI辅助设计能力，适合设计师、开发者和AI应用开发者使用，推动设计自动化和智能化。

OpenPencil开源向量设计工具是一款遵循 MCP（Model Context Protocol）标准协议的 AI 工具扩展。通过 MCP 协议，它可以让 Claude、Cursor 等主流 AI 客户端直接访问和操作外部工具、数据源和服务，实现 AI 能力的无缝扩展。无论是文件操作、数据库查询还是 API 调用，都可以通过自然语言在 AI 对话中直接触发，极大提升生产效率。

GitHub Stars

⭐ 3.1k

开发语言

TypeScript

支持平台

Windows / macOS / Linux

维护状态

持续维护，定期更新

开源协议

MIT

AI 综合评分

8.5 分

工具类型

MCP工具

Forks

314

📖 中文文档

以下内容由 AI Skill Hub 根据项目信息自动整理，如需查看完整原始文档请访问底部「原始来源」。

📌 核心特色

通过标准 MCP 协议与 Claude、Cursor 等主流 AI 客户端深度集成
提供结构化工具调用接口，显著降低 AI 集成复杂度
支持 Claude Desktop 和 Claude Code 无缝接入，开箱即用
可与其他 MCP 工具组合叠加，构建完整 AI 工作站
轻量无侵入设计，不影响现有系统架构

🎯 主要使用场景

在 Claude Desktop 对话中直接调用本地工具，实现 AI 与系统的深度联动
通过自然语言驱动复杂的多步骤自动化任务，代替繁琐手动操作
将多个 MCP 工具组合使用，构建个人专属 AI 工作站

以下安装命令基于项目开发语言和类型自动生成，实际以官方 README 为准。

安装命令

# 方式一：通过 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

📋 安装步骤说明

确认已安装 Node.js（v18 或以上版本）
打开 Claude Desktop 或 Claude Code 的 MCP 配置文件
按「交给 Agent 安装 → Claude Desktop」标签中的 JSON 配置填入 mcpServers 字段
保存配置文件并重启 Claude 客户端
重启后，在对话中即可使用本工具

以下用法示例由 AI Skill Hub 整理，涵盖最常见的使用场景。

常用命令 / 代码示例

# 安装后在 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 生效

📑 README 深度解析真实文档完整度 62/100 查看 GitHub 原文 →

以下内容由系统直接从 GitHub README 解析整理，保留代码块、表格与列表结构。

简介

OpenPencil

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

<a href="./README.md">English</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>

<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> Click the image to watch the demo video

Note: There is another open-source project with the same name — OpenPencil, focused on Figma-compatible visual design with real-time collaboration. This project focuses on AI-native design-to-code workflows.

Features

Canvas & Drawing

Infinite canvas with pan, zoom, smart alignment guides, and snapping
Rectangle, Ellipse, Line, Polygon, Pen (Bezier), Frame, Text
Boolean operations — union, subtract, intersect with contextual toolbar
Icon picker (Iconify) and image import (PNG/JPEG/SVG/WebP/GIF)
Auto-layout — vertical/horizontal with gap, padding, justify, align
Multi-page documents with tab navigation

Design System

Design variables — color, number, string tokens with $variable references
Multi-theme support — multiple axes, each with variants (Light/Dark, Compact/Comfortable)
Component system — reusable components with instances and overrides
CSS sync — auto-generated custom properties, var(--name) in code output
Reusable UIKits — import/export component kits from .pen files

AI & Agents

Prompt-to-canvas with streaming generation and orchestrator-driven spatial decomposition
Concurrent Agent Teams — multiple designers work on different sections in parallel with per-member canvas indicators
Layered workflow — design_skeleton → design_content → design_refine with focused prompts per phase
Style Guides — 50+ built-in styles (glassmorphism, brutalist, retro, etc.) with tag-based fuzzy matching, wired into planning and generation
Multi-model capability profiles — auto-adapts thinking mode, effort, and prompt shape per model tier
Built-in agent runtime (agent-native, Zig NAPI) + Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini providers
Anthropic-format passthrough for Chinese LLM providers — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans

Git Integration

Clone wizard with SSH / HTTPS auth and SSH key management
Branch picker — create, switch, delete, merge, all from the git panel
Pull / push cascades with auth retry and non-fast-forward handling
Folder-mode three-way merge with on-disk MERGE_HEAD state tracking
Conflict panel with per-node / per-field three-way cards, inline JSON editor, bulk actions, and inline diff block
Remote settings and SSH keys UI; 15-locale i18n across the whole Git surface

Export

Canvas export — PNG, JPEG, WEBP, PDF (Cmd+Shift+P)
Code export — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native
Incremental MCP codegen pipeline — codegen_plan, codegen_submit_chunk, codegen_assemble, codegen_clean

Figma Import

Import .fig files with layout, fills, strokes, effects, text, images, and vectors preserved

Desktop App

Native macOS, Windows, and Linux via Electron
.op file association — double-click to open, single-instance lock
Auto-update from GitHub Releases
Native application menu with Save As, Open Recent, and an unsaved-changes dialog on close
Recent files persistence

Install dependencies

bun install

Install

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)

CLI (op):

npm install -g @zseven-w/openpencil

Docker

Multiple image variants are available — pick the one that fits your needs:

Image	Size	Includes
`openpencil:latest`	~226 MB	Web app only
`openpencil-claude:latest`	—	+ Claude Code CLI
`openpencil-codex:latest`	—	+ Codex CLI
`openpencil-opencode:latest`	—	+ OpenCode CLI
`openpencil-copilot:latest`	—	+ GitHub Copilot CLI
`openpencil-gemini:latest`	—	+ Gemini CLI
`openpencil-full:latest`	~1 GB	All CLI tools

Run (web only):

docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest

Run with AI CLI (e.g. Claude Code):

The AI chat relies on Claude CLI OAuth login. Use a Docker volume to persist the login session:

```bash

🎨 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.

</td> <td width="50%">

Quick Start (Development)

```bash

⌨️ CLI — `op`

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%">

🧩 Embeddable SDK

pen-engine (headless) + pen-react (React UI SDK) — embed the design engine in your own app. DesignProvider, DesignCanvas, hooks, panels, and toolbar components out of the box.

</td> </tr> <tr> <td width="50%">

CLI — `op`

Install globally and control the design tool from your terminal:

npm install -g @zseven-w/openpencil

op start                     # Launch desktop app
op design @landing.txt       # Batch design from file
op insert '{"type":"RECT"}'  # 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 desktop app or web dev server. See CLI README for full command reference.

LLM Skill — install the OpenPencil Skill plugin to teach AI agents (Claude Code, Cursor, Codex, Gemini CLI, etc.) how to design with op.

🎯 aiskill88 AI 点评 A 级 2026-05-17

创新AI原生设计工具，MCP集成架构前沿。社区热度高、更新活跃，AI赋能设计领域典范之作，具高度参考价值。

📚 实用指南（长尾问题）

适合谁

需要让 Claude / Cursor 操作本地工具的 AI 工程师
构建多智能体协作系统的 Agent 开发者
跨境业务、多语言内容运营团队

最佳实践

配置 MCP 服务器时建议使用 stdio 传输 + JSON-RPC，避免暴露公网
生产部署优先使用 Docker Compose 隔离依赖，并挂载 volume 持久化数据
Agent 任务先做 dry-run 验证工具调用链，再开启自主执行

常见错误

API key 直接提交到 git 仓库（请用 .env 并加入 .gitignore）
MCP 配置路径拼错或权限不足，重启 Claude Desktop 才生效
容器内无法访问宿主机 localhost — 使用 host.docker.internal

部署方案

Docker：openpencil 提供官方镜像，docker compose up 一键启动
CLI：直接 npm install -g / pip install，命令行调用
云端托管：可放在 Vercel / Railway / Fly.io 等 PaaS 平台

⚡ 核心功能

通过标准 MCP 协议与 Claude、Cursor 等主流 AI 客户端深度集成
提供结构化工具调用接口，显著降低 AI 集成复杂度
支持 Claude Desktop 和 Claude Code 无缝接入，开箱即用
可与其他 MCP 工具组合叠加，构建完整 AI 工作站
轻量无侵入设计，不影响现有系统架构

👥 适合谁

需要让 Claude / Cursor 操作本地工具的 AI 工程师
构建多智能体协作系统的 Agent 开发者
跨境业务、多语言内容运营团队

⭐ 最佳实践

配置 MCP 服务器时建议使用 stdio 传输 + JSON-RPC，避免暴露公网
生产部署优先使用 Docker Compose 隔离依赖，并挂载 volume 持久化数据
Agent 任务先做 dry-run 验证工具调用链，再开启自主执行

⚠️ 常见错误

API key 直接提交到 git 仓库（请用 .env 并加入 .gitignore）
MCP 配置路径拼错或权限不足，重启 Claude Desktop 才生效
容器内无法访问宿主机 localhost — 使用 host.docker.internal

👥 适合人群

Claude Desktop / Claude Code 用户AI 工具开发者需要扩展 AI 能力的专业人士自动化工程师

🎯 使用场景

在 Claude Desktop 对话中直接调用本地工具，实现 AI 与系统的深度联动
通过自然语言驱动复杂的多步骤自动化任务，代替繁琐手动操作
将多个 MCP 工具组合使用，构建个人专属 AI 工作站

⚖️ 优点与不足

✅ 优点

+MIT 协议，可免费商用
+标准化 MCP 协议，生态互联性强
+与 Claude 官方生态无缝对接
+即插即用，配置简单快捷

⚠️ 不足

−依赖 Claude 客户端，非 Claude 用户无法使用
−MCP 协议仍在持续演进，接口可能变更
−需要一定的配置步骤

⚠️ 使用须知

AI Skill Hub 为第三方内容聚合平台，本页面信息基于公开数据整理，不对工具功能和质量作任何法律背书。

建议在沙箱或测试环境中充分验证后，再部署至生产环境，并做好必要的安全评估。

📄 License 说明

🔗 相关工具推荐

github-mcp-server MCP工具

GitHub官方MCP服务器实现，使AI助手能直接操作GitHub仓库、问题、拉取请求等资源。采用Go语言开发，高性能稳

全市场股票行情MCP接口

一个基于MCP协议的开源股票数据接口工具，支持A股、美股及港股的实时行情与基金数据查询。它允许AI助手直接获取金融市场数

MCP 服务器资源汇总

汇集开源MCP（模型上下文协议）服务器的权威目录库。为开发者提供丰富的MCP服务器实现和集成方案，支持AI应用快速扩展功

playwright-mcp MCP工具

基于Playwright的MCP协议服务器实现，提供浏览器自动化能力。支持网页交互、截图、数据采集等功能，适合开发者集成

📚 相关教程推荐

📰 相关 AI 新闻

Claude Code 最新功能与使用技巧

AI 资讯 · 知识关联

🍿 AI 圈相关吃瓜

配了5个 MCP 工具，Claude 一个都没用

AI 圈观察

AutoGPT 自主完成了任务：把我的文件夹全部重命名了

AI 圈观察

Filesystem MCP 帮 Claude 找文件，找了整个 node_modules

🗺️ 相关解决方案

ai-workflow-templates

translation

ai-translation-pipeline

🧩 你可能还需要

基于当前 Skill 的能力图谱，自动补全的工具组合

技能寻求者

MCP · Agent · 工作流

natively-cluely-ai-assistant — Claude Skill 中文使用文档

免费开源的AI面试助手，实时转录，隐蔽模式，局部RAG，BYOK。无订阅，防止数据泄露。

LLM安全测试框架，检测prompt注入、越狱等

CrewAI 多代理协作平台

MCP · Agent · 工作流

❓ 常见问题 FAQ

OpenPencil支持哪些AI模型？−

原生支持Claude及MCP标准协议的AI模型，可通过MCP拓展其他模型能力

是否可用于生产环境？+

MCP 是什么？和普通 API 有什么区别？+

我需要编程基础才能使用这个 MCP 工具吗？+

这个工具支持 Claude Code 吗？还是只有 Claude Desktop？+

MCP 工具是否会访问我的本地文件或数据？+

多个 MCP 工具可以同时使用吗？+

💡 AI Skill Hub 点评

总体来看，OpenPencil开源向量设计工具是一款质量优秀的MCP工具，在同类工具中具备一定竞争力。AI Skill Hub 将持续追踪其更新动态，建议收藏备用，结合自身场景选择合适时机引入使用。

⬇️ 获取与下载

⬇ 下载源码 ZIP

✅ MIT 协议 · 可免费商用 · 直接从 aiskill88 服务器下载，无需跳转 GitHub

📚 深入学习 OpenPencil开源向量设计工具

查看分步骤安装教程和完整使用指南，快速上手这款工具

⚙️ 安装教程 📚 使用教程

🌐 原始信息

原始名称	`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

🔗 原始来源

🐙 GitHub 仓库 https://github.com/ZSeven-W/openpencil 🌐 官方网站 https://op.zseven.tech

收录时间：2026-05-16 · 更新时间：2026-05-19 · License：MIT · AI Skill Hub 不对第三方内容的准确性作法律背书。

📺 订阅 AI Skill Hub Daily Telegram 频道

每天 8 条精选 AI Skill、MCP、Agent 与自动化工具推送

加入频道 →

OpenPencil开源向量设计工具

📚 深度解析

📋 工具概览

📖 中文文档

简介

OpenPencil

Features

Install dependencies

Install

Docker

🎨 Style Guides

Quick Start (Development)

⌨️ CLI — `op`

🧩 Embeddable SDK

CLI — `op`

⚡ 核心功能

👥 适合人群

🎯 使用场景

⚖️ 优点与不足

🔗 相关工具推荐

❓ 常见问题 FAQ

🤖 交给 Agent 安装 · OpenPencil开源向量设计工具