Penpot – 开源的在线UI设计工具

Penpot 的核心思路不一样。它的第一性原理不是”协作”，而是设计即代码。

在 Penpot 里，每一个设计元素底层对应的都是真实的 Web 标准——SVG 画形状、CSS Grid 和 Flexbox 做布局、HTML 结构组织层级。设计师在画布上拖拽一个按钮，Penpot 底层存储的不是一个私有二进制格式的”按钮对象”，而是一段符合标准的 SVG + CSS。

这意味着什么？

开发者可以直接从设计稿里复制代码来用，不需要翻译层。 Figma 也可以导出 CSS，但那是渲染后的”近似值”——Figma 自己的布局引擎跟浏览器的 CSS Box Model 不完全一致，开发还原的时候总会有偏差。Penpot 的布局是基于 CSS Grid 和 Flexbox 原生实现的，设计师在 Penpot 里定义的布局，跟浏览器实际渲染出来的效果在数学上等价。

这个差异对普通设计师来说可能感受不深——画布上的操作手感跟 Figma 差别不大。但开发者一旦用过 Penpot 的 Inspect 模式，就很难回去了。 选中一个组件，直接看到它的 SVG 结构、CSS 属性、Flex 或 Grid 参数，复制就能用，不需要猜测”设计师说的居中是 flex-center 还是 margin: 0 auto”。

网址：https://penpot.app/

定价策略：免费力度比 Figma 狠很多

Penpot 目前的定价分四档：

套餐	价格	核心限制
Professional	$0	8 人团队，10GB 存储，7 天版本历史
Unlimited	$7/人/月，月封顶 $175	25GB，30 天版本历史，优先体验新功能
Enterprise	$25/人/月，起 $950/月	无限存储，SSO，审计日志，180 天历史
Private Server	$50k/年	独立私有部署，专属基础设施

对比 Figma：Figma 免费版限制 3 个项目、无限历史只给 30 天。Penpot Professional 直接给 8 个人、不限项目、所有核心功能全开，完全不搞”功能阉割”那套——只是限制了存储空间和历史版本天数。

而且 Professional 套餐支持自托管——你自己搭服务器，连那 10GB 的存储限制都不存在了。这在整个设计工具市场里几乎是独一份：Figma 没有自托管选项，Sketch 没有自托管，Adobe XD 也不可能有。

开源自托管的战略价值在 AI 时代被放大了——你的设计数据在自己手里，意味着你的 AI 可以在自己数据上训练和工作，不需要担心数据被拿去训练对手的模型。

MCP 是 Penpot 在 2026 年最大的差异化武器

2026 年，设计工具赛道最大的变量就是 AI 集成能力。绝大部分设计工具目前还停留在”AI 帮你生成图片”的阶段——选一个区域，AI 在对话框里输出一张图，你手动拖到画布上。本质还是复制粘贴。

Penpot 走了一条完全不同的路：它直接内置了 MCP（Model Context Protocol）服务器。

MCP 是 Anthropic 提出的一套标准协议，让 AI 客户端可以直接读写工具的数据。Penpot 的 MCP 服务器让任何兼容 MCP 的 AI—Claude Code、Cursor、Claude Desktop—能直接操作 Penpot 的设计文件。

因为 Penpot 的设计文件本身就是结构化的代码（SVG、CSS、JSON），AI 不需要从截图里猜测”这个按钮是什么颜色”，而是直接读取真实的 Design Token：

“把主按钮颜色改成 #0055FF”

AI 在 Penpot 文件里找到所有引用 primary-button 这个 Token 的组件，直接改掉。Design Token 的定义是 JSON，改一个值，下游所有组件全部更新。

这比传统”AI 生图”的工作流先进太多了。那张截图里的像素信息对 AI 来说是一团概率云——它可以猜，但永远不能确定。但 Penpot 文件里的 Design Token 和 CSS 属性是确定的、机器可读的、可精确修改的。

真正的”AI 辅助设计”不是 AI 帮你画图，而是 AI 直接操作你的设计系统。