OpenPencil：全球首个 AI 原生矢量设计工具

你正在为一个 AI 助手设计一套 UI 界面——按钮该多大？色彩如何搭配？传统工具需要反复手动拖拽、调整、对齐，而 OpenPencil 告诉你：只需用自然语言描述你想要的界面，它就能在无限画布上实时生成矢量设计。2025 年，一个名为 ZSeven-W 的独立开发者推出了这款工具，在 GitHub 上迅速获得数千 Stars，成为 AI × 设计领域最受关注的新项目之一。

背景：为什么设计工具需要 AI 原生？

设计工具市场长期被 Figma、Sketch、Adobe XD 主导。这些工具功能强大，但本质上是「手工工具」——即便引入了 AI 辅助（如 Figma 的 AI 生成），也始终是在传统设计管线上的补丁。OpenPencil 的核心思路截然不同：它从第一天起就将 AI 作为设计的核心引擎，所有操作（从布局到组件生成）都以 AI 模型为驱动力，而非简单地在已有设计流程中加入 Copilot。 ZSeven-W 团队认为，设计工具的下一阶段是「Design-as-Code」——将设计视为一种可编程的输出。OpenPencil 内置了 MCP（Model Context Protocol）服务器，可以直接作为 AI 编程工具（如 Claude Code、OpenCode）的设计插件，让 AI 生成的代码与设计稿保持像素级同步。

核心技术：多智能体协作与空间分解

OpenPencil 采用了业界少见的 Concurrent Agent Teams（并发智能体团队）架构。当你输入一个复杂的设计需求时，系统内的 Orchestrator（编排器）会首先将任务分解为多个空间子任务——比如「页头」「功能区」「页脚」——然后同时调度多个 AI 智能体分别在画布的不同区域工作。 图1：OpenPencil 工作界面

这种架构的巧妙之处在于「空间感知」：每个智能体不仅知道自己在做什么（生成某个区域的设计），还知道自己在哪里（画布上的哪个坐标范围）。所有区域并行生成、实时流式输出，设计师可以随时中断、修改任一区域。 设计生成采用分层工作流：design_skeleton（骨架布局）→ design_content（内容填充）→ design_refine（精细调整），三个阶段逐步深化，确保生成结果既有结构又有细节。

技术栈：TypeScript monorepo + Bun + Zig NAPI

项目采用 TypeScript 构建，底层运行时使用 Bun（替代 Node.js 以获得更好的性能），构建工具为 Vite。前端框架为 React + TanStack Start（全栈 React 框架），配合 Nitro 实现服务端渲染。矢量渲染引擎基于 CanvasKit（Skia 的 WebAssembly 版本），提供高质量的 2D 矢量图形渲染能力。 monorepo 架构包含多个内部包：pen-core（核心数据模型）、pen-engine（引擎）、pen-renderer（渲染器）、pen-react（React 绑定）、pen-ai-skills（AI 技能）、pen-mcp（MCP 服务器）、pen-figma（Figma 兼容层）、pen-sdk（SDK）。此外，agent-native 是一个用 Zig 编写的 NAPI 扩展，负责本地 AI 推理加速。 样式系统使用 Tailwind CSS v4，并内置了 50+ 预设风格（glassmorphism、brutalist、retro 等），支持基于标签的模糊匹配，帮助 AI 快速确定设计调性。

功能亮点：Git 集成、组件系统、Design-as-Code

OpenPencil 不仅仅是一个设计工具，它更像是一个完整的设计工程平台：

• Git 集成：内置 Clone、分支管理、Pull/Push、Merge 和冲突解决，设计师可以像开发者一样使用 Git 进行版本协作。
• 组件系统：支持设计变量（颜色/数值/字符串 Token）、多主题切换、组件实例与覆盖，以及自动生成的 CSS 自定义属性。
• 多模型适配：自动识别 Claude、GPT-4o、Gemini 等不同模型的能力边界，动态调整提示词策略。支持国内 GLM、Kimimi、Zhipu 等中文 LLM。
• MCP 服务器：内置 MCP Server，可以被 Claude Code、Copilot 等 AI 编程工具直接调用，实现「设计→代码→设计」双向同步。

部署体验：Docker 一键构建

OpenPencil 提供了完整的多阶段 Dockerfile，构建过程自动化程度很高：

1. 构建阶段：使用 oven/bun:1 镜像，安装 Zig 编译器，复制 monorepo 依赖，执行 bun --bun run build。
2. Web 服务镜像：基于 oven/bun:1-slim，只复制编译产物，自动配置 Nitro 服务端口 3000。
3. Claude CLI 变体：内置 @anthropic-ai/claude-code，适合需要 AI 编程辅助的场景。 本地部署只需 docker build -t openpencil . && docker run -p 3000:3000 openpencil，约 5-10 分钟完成。内存建议 4GB 以上，无需 GPU。

局限与挑战

尽管功能丰富，OpenPencil 目前仍面临一些现实挑战：作为新生项目，其稳定性和大规模团队协作能力尚未经过充分验证；AI 生成设计的一致性和可控性仍有提升空间；此外，Figma 生态的插件、模板、社区积累深厚，OpenPencil 需要时间构建自己的生态护城河。

行业意义

OpenPencil 代表了 AI 设计工具的一种新范式——不是「设计工具 + AI 功能」，而是「AI 原生 + 设计能力」。随着多模态模型能力的持续进化，这类工具或许将重新定义设计师与 AI 的协作方式。