替代方案 · Pencil.dev
最佳 Pencil.dev 设计替代方案。
Open Design 是 Pencil 的完全开源、本地优先替代方案 —— 一个 agent 原生的设计工作空间，你用自己已经在用的编码 agent 来驱动它，用你自己的密钥、你自己的文件，以及一套保存在仓库里的可移植设计系统。
Pencil（pencil.dev）是来自 a16z Speedrun 的一款 agent 驱动设计工具，它把一块类 Figma 的矢量画布放进你的 IDE，并将设计以 .pen JSON 文件保存在你的仓库里，用 Git 做版本管理。一个本地 MCP 服务器让你的编码 agent 读写这些文件，于是一句提示词就变成可编辑的 UI，随后你可以交给编码 agent 生成生产级代码。它于 2026 年初公开发布，用户数突破 10 万，确实很不错 —— 只是有个前提：应用本身是闭源的，首先针对 Claude 调优，而且仅在早期体验期间免费。
Open Design 是完全开源、本地优先的替代方案：一个 agent 原生的设计工作空间，你把自己的编码 agent（Claude Code、Codex、Cursor、Gemini、OpenCode、Qwen）通过 BYOK 对准它。这两者异常接近 —— 都以 agent 驱动，都把设计当作文件保存在仓库里。区别在于所有权与覆盖面：用 Open Design 时整个应用都是 Apache-2.0（而不仅是一种有文档的格式），BYOK 对厂商中立，产出横跨 UI、演示文稿、原型，以及可移植的 DESIGN.md。本页会诚实说明 Pencil 真正胜出的地方。
01
Pencil 是什么
Pencil（pencil.dev）主打“在画布上设计，落地为代码” —— 一块无限矢量设计画布，驻留在你的 IDE 和代码库中，由 Tom Krcha（此前打造了 Around，被 Miro 收购）构建，并获 a16z Speedrun 投资。它的设计文件采用开放、有文档的 .pen JSON 格式，用 Git 保存在你的仓库里，一个本地 MCP 服务器让 AI agent 读写它们。你在画布上输入提示词或绘制，然后把设计交给编码 agent（Claude Code 等）生成与你技术栈匹配的生产级组件。
作为设计工作面，Pencil 很精致：一块真正的矢量画布，带图层、属性检查器、可拖放的组件，可以直接摆放在画布上的提示词区块，保留图层和自动布局的原生 Figma 复制粘贴，以及内置 UI 套件（Shadcn、Lunaris、Halo、Nitro）。手动的画布编辑不消耗 agent token。
投入前需要知道的：Pencil 应用是闭源的（只有 .pen 格式有文档，且可能变更），它针对 Claude Code 优化，在其他模型上体验较弱，仅在早期体验期间免费（据创始人所言“免费不是一种商业模式”），而且评测者指出它仍处早期 —— 偶有崩溃，且没有自动保存。
- 厂商：Pencil（pencil.dev），a16z Speedrun —— 闭源应用，约 10 万用户，2026 年初发布
- 运行时：本地桌面应用 + IDE 扩展（Cursor / VS Code / Windsurf）+ 本地 MCP 服务器
- 设计文件：仓库中开放的 .pen JSON 格式，用 Git 做版本管理
- 模型：通过 MCP 连接多种 agent，针对 Claude Code 优化；需自带 agent 订阅
- 价格：早期体验免费，尚未公布限额 —— 已释放付费方案信号
02
Open Design vs Pencil，逐项对比
| 功能 | Open Design | Pencil (pencil.dev) |
|---|---|---|
| 许可协议 | Apache-2.0 —— 整个应用都是开源的 | 闭源应用；只有 .pen 格式有文档 |
| 运行时 | 本地守护进程 + 桌面应用 | 本地桌面应用 + IDE 扩展 + 本地 MCP 服务器 |
| 设计文件 | 仓库中的文件（Git）：DESIGN.md、产物 | 仓库中的 .pen JSON 文件（Git） |
| 账号 | 无需账号；本地运行 | 需要账号 / 登录（早期体验） |
| 价格 | 免费且开源；只付你自己的模型费用 | 早期体验免费；已释放付费方案信号 |
| 模型 | BYOK，厂商中立 —— Claude、Codex、Cursor、Gemini、Qwen | 通过 MCP 连接多种 agent，针对 Claude Code 优化 |
| 主要工作面 | agent 驱动（提示词 → 产物）+ Web UI | 类 Figma 的矢量画布，可直接编辑；agent 通过 MCP 接入 |
| 产出 | UI、落地页、演示文稿、原型、设计系统 | UI 界面/组件 → 代码（匹配你的仓库） |
| 设计系统 | 可移植的 DESIGN.md，每个技能都强制遵循 | 变量/组件 + 内置 UI 套件（Shadcn、Lunaris…） |
| Figma 导入 | 通过 agent（粘贴/截图 → DESIGN.md） | 原生复制粘贴（保留图层、自动布局） |
| 协作 | 单人本地；agent 驱动 | 无真人多人协作；SWARM = 多个 AI agent |
| 自托管 / fork | 支持（Apache-2.0） | 不支持 —— 应用是闭源的 |
| 成熟度 | 稳定版本 | 早期体验 —— 有崩溃、无自动保存的反馈 |
诚实地看：Pencil 胜在可上手的画布 —— 一块成熟、类 Figma、可直接编辑的工作面，带原生 Figma 粘贴和内置 UI 套件，就在你的 IDE 里。Open Design 胜在所有权与覆盖面 —— 整个应用都是开源的（而不仅是文件格式），BYOK 对厂商中立而非以 Claude 为先，“免费”因为没有厂商要靠你变现而始终免费，产出横跨 UI、演示文稿、原型，以及一套作为你留存文件的可移植设计系统。
03
团队为何寻找 Pencil 替代方案
Pencil 是在 IDE 里做设计的一个强力方案，对很多“会做设计的开发者”来说非常合适。人们仍在寻找替代方案，原因大多集中在早期体验蜜月期之后会发生什么 —— 所有权、厂商锁定和范围。
- 应用是闭的，只有格式是开的: Pencil 的 .pen 格式有文档，但应用是闭源、由 a16z 投资的，而且格式规范保留了变更的权利。Open Design 从头到尾都是 Apache-2.0 —— 可以 fork、审计、自托管，并拥有它产出的每一件产物。
- “免费”有到期日: Pencil 在早期体验期间免费，但创始人明确表示“免费不是一种商业模式”。付费方案和限制正在路上。Open Design 之所以免费，是因为它开源；你唯一要付的只是你自己的模型费用。
- 它以 Claude 为先: Pencil 通过 MCP 连接多种 agent，但针对 Claude Code 调优，在其他地方体验较弱。Open Design 是对厂商中立的 BYOK —— Claude、Codex、Cursor、Gemini、OpenCode 和 Qwen 全是一等公民。
- 你想要的不只是 UI 转代码: Pencil 专注于 UI → 代码。Open Design 则从同一套品牌规范渲染出 UI、落地页、演示文稿、原型，以及可移植的 DESIGN.md 设计系统，全都是仓库里的文件。
04
开源 + BYOK，详解
两款工具都是本地优先，都把设计当作文件保存在仓库里 —— 这部分是共同点。Open Design 的不同之处在于整个应用都是 Apache-2.0，而不仅是一份有文档的文件格式，因此你可以 fork、审计并自托管它。你的品牌以可移植的 DESIGN.md 形式保存在仓库里，每个技能都会遵循它。
你还可以自带 agent 密钥，对厂商中立。凭据留在本地配置或环境变量中 —— Open Design 从不代理它们 —— 而 API 费用直接计到你头上，按你服务商的费率结算，早期体验结束后也没有厂商限额。
刚接触这个概念？读一读什么是 vibe design，浏览插件与设计系统库，查看所有 Open Design 对比 —— 包括 Figma 和 Google Stitch —— 或下载 Open Design 亲自试试。
05
Pencil 真正胜出之处 —— 以及该选哪个
该给的肯定要给：作为设计工作面，Pencil 非常出色。它是一块真正的、类 Figma、可亲手编辑的矢量画布 —— 图层、属性检查器、可拖放的组件，以及直接摆放在画布上的提示词区块 —— 配上保留图层和自动布局的原生 Figma 复制粘贴，外加内置 UI 套件（Shadcn、Lunaris、Halo、Nitro）。而且这一切就在你的 IDE 里，所以会做设计的开发者从不用离开 Cursor 或 VS Code。如果你想要的是一块可以直接操控的精致画布，那么就目前而言，Pencil 的工作面比 Open Design 以 agent 为先的流程更成熟。代价是围绕它的一切结构性因素：闭源应用、以 Claude 为先的调优，以及一个据创始人所言不会长久的“免费”。
按你实际想做的事快速判断的方法 —— 两者有重叠，所以诚实的分野很重要：
| 如果你想…… | 最佳选择 |
|---|---|
| 拥有整个工具，作为可 fork/自托管的开源项目 | Open Design |
| 让“免费”始终免费，早期体验后没有厂商限额 | Open Design |
| 使用对厂商中立的 BYOK（而非以 Claude 为先） | Open Design |
| 渲染 UI + 演示文稿 + 原型 + 设计系统 | Open Design |
| 亲手编辑一块成熟、类 Figma 的矢量画布 | Pencil |
| 从 Figma 粘贴且保留图层和自动布局 | Pencil |
| 在 Cursor / VS Code 内直接内嵌设计 | Pencil |
06
把设计从 Pencil 迁到 Open Design
两款工具都把设计当作文件保存在仓库里，所以没有会丢信息的云端导出要应付 —— 迁移是以设计为先的。提取一次你的品牌，之后每一次渲染都会继承它。
- 从下载页安装 Open Design，并自带你的 agent 密钥（Claude Code、Codex、Cursor、Gemini、OpenCode 或 Qwen）。
- 让你的 agent 对准一份 Pencil 导出文件、一次 Figma 粘贴，或一张你想保留其外观的截图。
- 让 agent 提取品牌 —— 颜色、字体、间距 —— 写入仓库中的 DESIGN.md 文件。
- 挑一个技能，据你的新品牌渲染一遍，确认外观一致。
从此以后，每个技能都会以你的品牌来渲染 —— 而 UI、代码和设计系统都留在你的仓库里，以归你所有的文件形式纳入版本控制。
FAQ
常见问题
-
01 Pencil（pencil.dev）是开源的吗？
应用不是。Pencil 是一款闭源、由 a16z 投资的产品；“开放”的是 .pen 文件格式，它有文档但可能变更（团队保留做破坏性变更的权利）。Open Design 则在 Apache-2.0 下完全开源 —— 是整个应用，而不仅是文件规范 —— 并且可自托管。
-
02 Pencil.dev 免费吗？
今天免费，但明确处于早期体验阶段。创始人说过“免费不是一种商业模式”，这暗示了未来的付费方案和限制。Open Design 之所以免费，是因为它开源；你自带 agent 密钥，所以模型费用直接计到你头上，没有厂商设定的限额。
-
03 Open Design 和 Pencil 有什么区别？
两者很接近 —— 都以 agent 驱动，都把设计当作文件用 Git 保存在仓库里。区别在于：Open Design 完全开源（Apache-2.0，而不只是一种开放格式）、对厂商中立的 BYOK（而非主要针对 Claude 调优），并且能渲染更广泛的产物（UI、演示文稿、原型、设计系统）。Pencil 则提供更成熟的可上手矢量画布和原生 Figma 粘贴。
-
04 Pencil 能配合 Claude 以外的 agent 使用吗？
可以 —— 它通过 MCP 连接多种 agent（Cursor、Windsurf、Codex 等），但它针对 Claude Code 优化，评测者反映在其他模型上体验较弱。Open Design 则把 Claude、Codex、Cursor、Gemini、OpenCode 和 Qwen 都当作一等公民。
-
05 Open Design 与 Pencil 有关联吗？
没有。Open Design 是一个独立的开源项目（github.com/nexu-io/open-design，Apache-2.0）。Pencil 是位于 pencil.dev 的另一款、由 a16z 投资的产品；本页是无关联的对比。
拥有整个工具，而不仅仅是文件格式。
给仓库加星、获取桌面版，或在终端里运行安装命令。Open Design 从头到尾开源 —— 从第一次渲染起，你的 UI、代码和 DESIGN.md 系统就一直留在你的仓库里。