ZSeven-W/openpencil

这是什么？

核心功能

• 01在无限画布上通过文字提示直接生成界面，支持流式显示。
• 02多个 Agent 并行设计页面的不同区块。
• 03内置 MCP 服务器，可接入 Claude Code、Codex、OpenCode、Kiro 和 Copilot CLI。
• 04设计稿以可读的 JSON `.op` 文件保存，便于 Git 管理。
• 05可导出 React、Vue、Svelte、Flutter、SwiftUI、Jetpack Compose 等多种代码。
• 06提供 `op` 命令行工具和可嵌入的只读 Web 查看 SDK。

适用场景

• 通过描述需求让 AI 快速原型化界面页面。
• 让编程 Agent 通过 MCP 读取和修改设计文件。
• 将设计稿直接转换为前端框架代码，减少手动还原。
• 在自己的 Web 应用中嵌入只读的设计文件查看器。

快速上手

1. 1

   克隆仓库并包含子模块

   git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git
2. 2

   安装 Rust（稳定版）作为构建前提

3. 3

   启动 Web 开发服务器

   bash scripts/start-web-rust.sh
4. 4

   或者改为运行桌面应用

   cargo run -p op-host-desktop

使用前须知

• !项目处于早期阶段，README 仍在变动，可能存在粗糙之处。
• !CLI 和 ACP 代理仅在原生桌面应用中可用，Web 版不支持。
• !从源码构建需要 Rust 并初始化子模块，Windows 需要单独的构建指南。

标签

常见问题

openpencil 是什么？

开源的 AI 原生矢量设计工具，支持提示词生成界面、多 Agent 协同设计与代码导出。 OpenPencil 是一款在无限画布上设计界面的矢量设计工具。用户可以用自然语言描述页面，AI 直接在画布上生成内容；也可以选中已有元素，通过对话提出修改。设计文件以 `.op` 格式保存，本质是 JSON，便于用 Git 管理、查看差异和版本追溯。

openpencil 可以免费使用吗？用的什么许可证？

openpencil 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

openpencil 还在维护吗？

活跃维护中。openpencil 最近一次提交是在 2026年10月19日。

openpencil 适合用来做什么？

通过描述需求让 AI 快速原型化界面页面。 让编程 Agent 通过 MCP 读取和修改设计文件。 将设计稿直接转换为前端框架代码，减少手动还原。 在自己的 Web 应用中嵌入只读的设计文件查看器。

openpencil 怎么安装和运行？

克隆仓库并包含子模块: git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git 安装 Rust（稳定版）作为构建前提 启动 Web 开发服务器: bash scripts/start-web-rust.sh 或者改为运行桌面应用: cargo run -p op-host-desktop

在哪里获取 openpencil？

源代码和安装说明在 GitHub 上：https://github.com/ZSeven-W/openpencil