# OpenPencil — AI-Native Vector Design + MCP

> Open-source AI-native vector design tool with design-as-code `.op`, concurrent agent teams, and built-in MCP; verified 2777★, pushed 2026-05-14.

## Install

Merge the JSON below into your `.mcp.json`:

## Quick Use

```bash
# Quick web start (README):
docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest
# Or install the desktop app (macOS):
brew tap zseven-w/openpencil && brew install --cask openpencil
# CLI (README):
npm install -g @zseven-w/openpencil
```

## Intro

Open-source AI-native vector design tool with design-as-code `.op`, concurrent agent teams, and built-in MCP; verified 2777★, pushed 2026-05-14.

**Best for:** Teams turning prompts into UI + code exports with a Git-friendly design format

**Works with:** macOS/Windows/Linux; runs as desktop/web app and exposes a built-in MCP server + CLI (per README)

**Setup time:** 15-35 minutes

### Key facts (verified)

- GitHub: 2777 stars · 265 forks · pushed 2026-05-14.
- License: MIT · owner avatar + repo URL verified via GitHub API.
- README-backed entrypoint: `docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest`.

## Main

- Treat `.op` as design-as-code: keep it in Git, review diffs, and generate exports (React+Tailwind/HTML+CSS) from the same source file.

- Use MCP for automation: README calls out one-click MCP install into multiple AI CLIs so agents can read/modify `.op` files deterministically.

- Scale with concurrency: the README describes orchestrated “agent teams” working on different page regions in parallel.

- Start with docker web mode for evaluation, then move to the desktop app if you need native file associations and local workflows.

### Source-backed notes

- README lists install options: Homebrew cask (macOS), Scoop (Windows), direct downloads, and a global CLI package.
- README states `.op` files are JSON and designed to be diffable and Git-friendly.
- README highlights a built-in MCP server for automating `.op` file reads/edits from MCP-compatible agents.

### FAQ

- **Is it just prompts-to-images?**: No — README positions it as a vector design tool with design-as-code files and code exports.
- **How do agents automate it?**: Use the built-in MCP server; agents can read/create/modify `.op` files through MCP tools (per README).
- **What’s a safe first run?**: Start the web container (`ghcr.io/...:latest`) and generate a small page before scaling to multi-agent teams.

## Source & Thanks

> Source: https://github.com/ZSeven-W/openpencil
> License: MIT
> GitHub stars: 2777 · forks: 265

---

<!-- ZH -->

## Quick Use

```bash
# Quick web start (README):
docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest
# Or install the desktop app (macOS):
brew tap zseven-w/openpencil && brew install --cask openpencil
# CLI (README):
npm install -g @zseven-w/openpencil
```

## Intro

OpenPencil 是开源 AI 原生矢量设计工具：Design-as-Code `.op`、并发 agent 团队与内置 MCP server；已验证 2777★，更新于 2026-05-14。

**Best for:** 希望把 prompt→UI→代码导出做成可版本化流程的团队

**Works with:** macOS/Windows/Linux；README 表示提供桌面/网页端，并内置 MCP server 与 CLI

**Setup time:** 15-35 minutes

### Key facts (verified)

- GitHub：2777 stars · 265 forks；最近更新 2026-05-14。
- 许可证：MIT；作者头像与仓库链接均已通过 GitHub API 复核。
- README 中可对照的入口命令：`docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest`。

## Main

- 把 `.op` 当作 design-as-code：放进 Git、审 diff，并从同一源文件导出 React+Tailwind 或 HTML+CSS。

- 用 MCP 做自动化：README 提到一键装入多种 AI CLI，让 agent 以确定性方式读写 `.op` 文件。

- 并发扩展：README 描述 orchestrator 将页面拆分为空间子任务，让多个 agent 并行生成不同区域。

- 先用 docker web 模式评估，再按需切到桌面端以获得本地文件关联与更顺畅的工作流。

### Source-backed notes

- README 列出安装方式：Homebrew cask（macOS）、Scoop（Windows）、直接下载以及全局 CLI 包。
- README 表示 `.op` 文件为 JSON，便于 diff 与 Git 管理。
- README 强调内置 MCP server，可让 MCP agent 自动化读取与修改 `.op` 文件。

### FAQ

- **它只是 prompt 画图吗？**：不是；README 将其定位为矢量设计工具，核心是 design-as-code 文件与代码导出。
- **agent 怎么接入？**：使用内置 MCP server；按 README 可通过 MCP 工具读写 `.op` 文件实现自动化。
- **最安全的起步方式？**：先跑 web 容器（`ghcr.io/...:latest`）生成小页面验证流程，再逐步扩展到并发团队。

## Source & Thanks

> Source: https://github.com/ZSeven-W/openpencil
> License: MIT
> GitHub stars: 2777 · forks: 265


---
Source: https://tokrepo.com/en/workflows/openpencil-ai-native-vector-design-mcp
Author: MCP Hub