Pencil仓库中的 .pen 文件riviera.pen矢量画布文件，Git 版本控制UI 套件内置组件编辑：更平和的标题在画布或提示块上编辑
Pencil 
OpenDesign 完全开源的 Pencil.dev 替代方案：OpenDesign
OpenDesign 和 Pencil 异常相似：两者都由智能体驱动，并将设计作为文件保存在你的 Git 代码库中。OpenDesign 是免费、完全开源、提供商中立的替代方案——整个应用程序采用 Apache-2.0 协议，支持任何主流编程智能体的 BYOK 模式，输出范围涵盖 UI、演示文稿、原型和设计系统。本页说明了它们的重合之处、Pencil 的画布在哪些方面真正胜出，以及如何进行迁移。
按任务分类的结论12 / Pencil
各自是什么
Pencil 与 OpenDesign：每个工具是什么
Pencil 和 OpenDesign 共享一个大理念——由智能体驱动的设计作为文件保存在你的代码库中——但在什么是开源的、哪些智能体是一流的，以及输出范围有多广方面存在差异。OpenDesign 撰写了这篇关于其自身产品的对比，且与 Pencil 没有任何关联。
简短回答。 OpenDesign 是一个免费、完全开源 (Apache-2.0)、本地优先的 Pencil 替代方案：同样是由智能体驱动、文件存放在代码库的理念，但整个应用程序都是开源的，而不仅仅是文件格式；提供商中立，支持跨 Claude、Codex、Cursor、Gemini、OpenCode 和 Qwen 的 BYOK 模式；输出范围涵盖 UI、落地页、演示文稿、原型和 DESIGN.md 设计系统。它没有矢量画布；如果你看重的是在 IDE 内手动编辑类似 Figma 的画布并支持原生 Figma 粘贴，请保留 Pencil。
Pencil
Pencil (pencil.dev) 是“在画布上设计，在代码中落地”：一个存在于你的 IDE 和代码库中的无限矢量设计画布，由 a16z Speedrun 支持。设计文件使用开放且有文档说明的 .pen JSON 格式，存放在你的 Git 代码库中，本地 MCP 服务器允许 AI 智能体读取和写入它们。它附带内置 UI 套件和原生 Figma 复制粘贴功能，在抢先体验阶段免费。
- 运行方式本地桌面应用、IDE 扩展和本地 MCP 服务器
- 模型支持多个智能体的 MCP，针对 Claude Code 进行了优化
- 输出代码库中的 .pen JSON 文件；UI 屏幕和组件转代码
- 成本抢先体验阶段免费；已预告付费计划未公布上限
OpenDesign
OpenDesign 是一个本地优先、开源的设计智能体，你可以将其指向你自己的编程智能体。技能和便携式品牌作为文件存放在你的代码库中；桌面应用渲染并审查结果。
- 运行方式你机器上的桌面应用和本地守护进程
- 智能体你的：Claude Code、Codex、Cursor、Gemini、OpenCode、Qwen 等
- 输出项目目录中的文件
- 成本Apache-2.0；你向自己的提供商支付 API 使用费
它们的重合之处
Git 代码库中由智能体驱动的设计文件，以及转化为代码的 UI。这是这两个工具大部分的功能，也是本页其余部分对比的全部内容。
本页未声明的内容
OpenDesign 拥有矢量画布、图层面板、内置 UI 套件或原生 Figma 粘贴功能，或者 .pen 文件会自动转换。如果画布是核心工作，下面的结论建议保留 Pencil。
结论
Pencil 还是 OpenDesign？按情况给出的结论
选择 Pencil 如果…
- 你想在 Cursor 或 VS Code 中手动编辑成熟的、类似 Figma 的矢量画布。
- 你经常从 Figma 粘贴，并需要保持图层和自动布局完好无损。
- 内置 UI 套件和 Claude 优先的智能体体验是你最看重的。
选择 OpenDesign 如果……
- 你希望整个工具都是开源的——可以分叉、审计、自托管——而不仅仅是格式有文档说明。
- 你希望“免费”一直免费，抢先体验后没有供应商限制；你只需支付自己的模型费用。
- 你希望使用提供商中立的 BYOK：Claude、Codex、Cursor、Gemini、OpenCode 和 Qwen 都是一等公民。
- 你希望从一个 DESIGN.md 渲染出 UI、演示文稿、原型和设计系统。
两者都运行如果……
- 设计师在 Pencil 的画布上绘制；其余的工件在 OpenDesign 中从同一个品牌渲染。
- 你希望有一个开放的后备方案，以防抢先体验定价或 Claude 优先的调优不再适合你。
- 两者都将文件保存在仓库中，因此并排运行它们的成本很低。
相同的简报，两种结果
Pencil 和 OpenDesign 中相同的简报
比较的诚实度取决于其输入。将相同的简报和相同的品牌输入 Pencil 和 OpenDesign；返回的结果、如何编辑以及你还能从中渲染出什么，才是你要比较的内容。下方的面板是插图，而非屏幕截图；20 分钟测试让你亲自运行该简报。
简报 · 在两个工具中相同
为一个预订慢旅行住宿的小型工作室设计一个落地页。一个带有强烈标题的英雄区，三个特色地点，关于预订如何运作的简短说明，以及最后的行动号召。桌面端和手机端。
- 品牌
- 纸张背景，Albert Sans，一种绿色强调色，8px 圆角
- 断点
- 1440 桌面端，390 移动端；无水平滚动
- 编辑测试
- 在第一个结果之后：“让标题更平静，交换第二个地点”
- 记录
- 模型、日期、首次结果时间、所需编辑、导出格式
Pencil仓库中的 .pen 文件OpenDesign + 你的智能体仓库中的文件riviera-landing.html新建 · v2DESIGN.md已绑定编辑：更平和的标题指向元素，代理进行修改
说明性两个面板均为本页面绘制的插图，而非任一工具的屏幕截图，结论也不依赖于它们。请使用下方的 20 分钟测试亲自运行简报，并注意此处列出的要点，以便公平地比较两个结果。
注意事项 · 两个工具
模型和版本、运行日期、首次可用结果的时间、达到“完成”的编辑次数、导出包含的内容。
注意事项 · Pencil
哪个代理通过 MCP 运行以及它在 Claude 之外的表现如何，.pen 文件是否干净地往返于代码，Figma 粘贴保留了什么。
注意事项 · OpenDesign
使用的代理和密钥，DESIGN.md 是否在没有重新提示的情况下得到尊重，检查了两个断点，版本作为文件保留。
逐项功能
OpenDesign 与 Pencil，逐项功能
OpenDesign 和 Pencil 在实践中存在差异的九个维度：许可证、运行时、设计文件、帐户、成本、模型、主要界面、输出范围和成熟度。Pencil 的事实已于 2026-09-06 根据公开来源进行核查；抢先体验条款可能会发生变化。
| 维度 | OpenDesign | Pencil |
|---|---|---|
| 许可证 | Apache-2.0；整个应用程序是开源的 | 闭源应用程序；只有 .pen 格式有文档说明 |
| 运行时 | 本地守护进程和桌面应用程序 | 本地桌面应用程序、IDE 扩展和本地 MCP 服务器 |
| 设计文件 | 仓库中的文件：DESIGN.md 和工件 | 仓库中的 .pen JSON 文件 |
| 帐户 | 不需要 | 登录，抢先体验 |
| 成本 | 免费且开源；你自己的模型费用 | 抢先体验期间免费；已发出付费计划信号条款可能会改变 |
| 模型 | 提供商中立的 BYOK：Claude、Codex、Cursor、Gemini、OpenCode、Qwen | 具有多个代理的 MCP，针对 Claude Code 进行了优化 |
| 主要界面 | 代理驱动：从简报到工件，加上审查 UI | 你直接编辑的类似 Figma 的矢量画布；代理通过 MCP |
| 输出范围 | UI、落地页、演示文稿、原型、设计系统 | UI 屏幕和组件到代码 |
| 自托管 / 分叉 | 是 | 否；应用程序是闭源的 |
Pencil 胜出的地方
动手操作的画布：一个成熟的、类似 Figma 的界面，你可以直接编辑，具有保留图层和自动布局的原生 Figma 粘贴功能，内置 UI 套件，所有这些都在你的 IDE 中。做设计的开发人员永远不会离开编辑器。
OpenDesign 胜出的地方
所有权和范围：整个应用程序是开源的，BYOK 是提供商中立的而不是 Claude 优先的，免费一直免费，因为没有供应商来从你身上赚钱，而且输出范围远远超过 UI 到代码。
决定
什么时候 OpenDesign 是合适的 Pencil 替代方案
在 IDE 中设计的开发人员
使用 Claude Code 在代码旁边手动绘制屏幕
PencilCursor 或 VS Code 中的画布、原生 Figma 粘贴和 Claude 优先的调优正是这个人的工作流。OpenDesign 没有画布可以提供给他们。
不适合的情况 团队运行 Codex、Gemini 或 Qwen 而不是 Claude。
有开源政策的团队
整个工具必须可审计且可分叉
OpenDesign代理、技能库和渲染器均采用 Apache-2.0；.pen 格式有文档说明与此不同。
不适合的情况 仅靠开放的文件格式就能满足政策要求。
跨多种产物类型的品牌
同一品牌的演示文稿、落地页、原型和 UI
OpenDesign一个 DESIGN.md 即可渲染所有这些内容，无需重新提示；Pencil 的范围是 UI 到代码。请参阅设计系统解决方案。
不适合的情况 UI 屏幕是唯一的交付物。
对冲抢先体验风险的 Pencil 用户
今天免费，已发出付费计划信号
两者都运行继续在 Pencil 中绘制；将品牌提取到 DESIGN.md 中，并在 OpenDesign 中渲染其余部分，这样就不会依赖于一家供应商的定价。两者都将文件保存在仓库中。
不适合的情况 你期望 .pen 文件和 DESIGN.md 自动保持同步；它们不会。
迁移设计，或两者都运行
如何将设计从 Pencil 迁移到 OpenDesign
这两种工具都将设计作为文件保存在你的仓库中，因此无需应对有损的云端导出。迁移的是品牌和简报，通过从 Pencil 导出中进行一次性提取；.pen 画布文件在 Pencil 中保持可编辑状态。
| 迁移的内容 | |
|---|---|
| 品牌 | 将你的代理指向 Pencil 导出、Figma 粘贴或屏幕截图；它会将颜色、排版、间距和语调提取到 DESIGN.md 中。 |
| 提示词 | 纯文本。画布中的提示词块原样粘贴到 OpenDesign 简报中。 |
| 生成的代码 | Pencil 从 .pen 文件生成的代码可以作为结构参考；代理在 DESIGN.md 下重新渲染，而不是修补它。 |
| 留在 Pencil 中的内容 | |
| .pen 画布文件 | 矢量图层不会转换；从简报和 DESIGN.md 重新渲染。 |
| 内置 UI 套件 | Shadcn 风格的套件通过 DESIGN.md 和你自己的组件重新表达。 |
| 原生 Figma 粘贴 | 如果团队成员继续从 Figma 粘贴，该步骤留在 Pencil 中。 |
-
导出一个 Pencil 屏幕作为参考
导出你想要保留其外观的屏幕的 PNG（或生成的代码），并将其添加到项目中。
-
要求代理将品牌提取到 DESIGN.md 中
手动审查文件：一种强调色、正确的字体、正确的圆角。这是唯一需要判断的迁移步骤。
-
根据新品牌渲染原始简报
选择一项技能并渲染；从这里开始，每项技能——UI、演示文稿、原型——都在你的品牌中渲染，无需重新提示，并且每个版本都是一个文件。
两者都运行
保留 Pencil 用于在画布上手动编辑 UI；使用 OpenDesign 处理从品牌渲染的所有内容。两者都位于同一个仓库中；当画布更改时更新 DESIGN.md。没有任何东西会自动同步。
回退和损失
尝试一下几乎没有损失：无论哪种方式，.pen 文件都留在仓库中。如果 OpenDesign 渲染失败，最后一个版本保留在磁盘上，简报保持不变；使用同一个代理或不同的代理重试。
20 分钟测试
在你在 Pencil 中已经绘制的屏幕上尝试 OpenDesign
拿一个你在 Pencil 中绘制的屏幕，用你喜欢的任何代理在 OpenDesign 中重建它。如果结果在二十分钟内不可用，那么这个比较就告诉了你一些值得了解的事情。
1任务
这是我在 Pencil 中设计的屏幕的 PNG 导出。将其品牌提取到 DESIGN.md 中，然后使用我的设计规则从这个简报重建相同的屏幕，并在同一品牌中添加一个单幻灯片演示文稿封面。检查桌面和移动宽度的屏幕。
- 01Pencil 屏幕输入你想要保留其外观的 .pen 屏幕的 PNG 导出。
- 02DESIGN.md 输出你的品牌提取到 .pen 文件旁边的文件中——手动审查它。
- 03屏幕和演示文稿封面，已渲染桌面和手机上的屏幕加上同一品牌的演示文稿封面，然后通过指向一个元素进行一次编辑。
2它起作用了，如果…
- DESIGN.md 提交在 .pen 文件旁边，你会认可其设计令牌。
- 屏幕在 1440 和 390 下渲染，没有水平滚动，演示文稿封面共享该品牌。
- 通过指向元素应用了一次编辑（“更平静的标题”），如果你愿意，可以使用 Claude 以外的代理。
- 两个版本作为文件并排存放；没有任何东西被静默覆盖。
如果它不起作用：检查你的代理是否已连接并为你选择的模式进行了身份验证，然后在评判该工具之前使用较小的简报重试。
其他选项
其他 Pencil.dev 替代方案
常见问题
Pencil.dev 替代方案：常见问题
Pencil (pencil.dev) 是开源的吗？
应用本身不是。Pencil 是一款闭源的、由 a16z 支持的产品；开源的只是 .pen 文件格式，该格式有文档说明但可能会变动。OpenDesign 在 Apache-2.0 协议下完全开源——不仅是格式，而是整个应用程序。
Pencil.dev 免费吗？
目前是免费的，明确处于抢先体验阶段，且创始人已暗示未来会有付费计划和限制。OpenDesign 免费是因为它是开源的；你自带智能体密钥（BYOK），因此模型费用由你直接支付，没有供应商限制。
OpenDesign 和 Pencil 有什么区别？
它们很接近：两者都是由智能体驱动，并将设计作为文件保存在你的 Git 代码库中。OpenDesign 是完全开源的、提供商中立的 BYOK，而不是 Claude 优先，并且可以渲染 UI、演示文稿、原型和设计系统；Pencil 是你 IDE 中的矢量画布，专注于从 UI 到代码。我们的结论列出了各自的适用条件。
Pencil 能与 Claude 以外的智能体配合使用吗？
可以，它通过 MCP 连接了几个智能体，但它是为 Claude Code 优化的，评测者报告称在其他地方体验较弱。OpenDesign 将 Claude、Codex、Cursor、Gemini、OpenCode 和 Qwen 视为一等公民。
我可以同时使用 Pencil 和 OpenDesign 吗？
可以。两者都将文件保存在同一个代码库中，因此并排运行它们的成本很低：在 Pencil 中绘图，在 OpenDesign 中从 DESIGN.md 渲染其他所有内容。请参阅什么迁移，什么保留。
OpenDesign 真的是开源的吗？
是的。它托管在 github.com/nexu-io/open-design，采用 Apache-2.0 协议，并且可以自托管。
OpenDesign 与 Pencil 有关联吗？
没有。OpenDesign 是一个独立的开源项目。Pencil 是 pencil.dev 上一款独立的、由 a16z 支持的产品；这是由 OpenDesign 团队撰写的无关联对比。
在一个真实界面上尝试 OpenDesign
使用任何编码智能体重建你在 Pencil 中绘制的界面，评判整个往返过程，然后再做决定。选择符合你的情况；此页面不会检测你的设置。