开源设计工具 Penpot：为设计师、开发者和 AI 而生

有了 AI 的帮助后，一个人完成整个项目的开发、设计，到部署上线成为可能。

像我这样纯后端开发出身，也可以在AI帮助下，很顺利的完成设计和前端代码的实现。

但是要想把产品界面设计好，还是想了不少办法：之前文章介绍过几个关于设计的工具和资源：

用专业的设计提示词：Claude Design 系统提示词被泄露：AI 如何成为你的专业设计师

参考同类产品：Lazyweb 免费的 25.7 万截图库｜让 AI 写出好看的前端页面

直接像素级拷贝：15 分钟上线｜开源克隆网站 + 一键部署，搭建你自己的产品

今天这篇文章介绍的 Penpot， 是一个开源的设计与原型制作平台，一个连接设计师、前端开发者和 AI 编码代理的协作平台。

Penpot 设计的思路：设计稿的存储格式不是某个公司的专有文件，而是 SVG、CSS、HTML、JSON 这些 Web 开放标准。

这意味着你的设计稿在 Penpot 里，本身就是代码可以读懂的东西。

UI 设计：从线框图到交互原型

Penpot 提供了完整的 UI 设计能力。

可以先简单的理解为是 Figma 的免费平替，它使用线框图快速搭建页面结构，用简单的矩形和文本勾勒出信息架构。

交互原型支持页面间的点击跳转和过渡动画，做完后生成一个可分享的链接，可以直接在浏览器里点击体验，不需要安装任何软件。

布局引擎是 Penpot 最核心的设计能力：直接使用 CSS Grid 和 Flexbox。

在画布上拉一个三列布局，设置 grid-template-columns: 1fr 2fr 1fr，右下角 Inspect 面板里显示的就是这行 CSS 代码。

开发者复制粘贴，直接进入生产环境，像素级一致。

响应式设计也一样。

同一份设计稿可以创建多个变体，对应不同的屏幕尺寸。

移动端、平板、桌面三个断点，改几列参数就行，不用从头画三份。

设计系统：组件、变体和设计令牌

做产品设计，最难的不是画一个页面，是画完以后怎么保持一致性。

Penpot 通过设计系统解决这个问题。

组件系统支持创建主组件和实例，改主组件，所有实例自动同步。

按钮、输入框、卡片这些基础元素做成组件后，全局一致，不再出现同一个按钮左边圆角 8px 右边 12px 的问题。

变体让同一个组件可以有多套状态。

比如一个按钮组件，可以定义 default、hover、disabled 三种变体。设计师在画布上切换变体查看效果，开发者拿到的是对应状态的样式代码。

设计令牌是设计系统的核心。

颜色、字体、间距这些设计决策，在 Penpot 里被存成结构化的 JSON 数据，可以直接导出。

导出后的 JSON 转成 CSS 变量，前端代码里引用 var(--color-primary) 而不是 #6366F1。

设计师改一个主色，设计稿和代码全局同步。

共享库让整个团队复用同一套组件和令牌。

团队成员从共享库拖入组件开始设计，而不是从空白画布开始。

AI 工作流：MCP Server 让 AI 读懂设计稿

Penpot 通过 MCP（Model Context Protocol）协议，把设计稿的结构化数据暴露给外部的 AI 编码工具。

Claude Code、VS Code Copilot、Cursor 这些工具可以直接连接到 Penpot，读取设计稿的布局、组件、令牌信息。

获得一份结构化数据：组件名称、Grid 列定义、设计令牌命名、图层嵌套关系、变体状态。

有了这些语义信息，AI 能够理解「这里有一个 Dashboard 布局，左边是折叠侧边栏，中间有一个叫 MetricCard 的数据卡片组件」，然后生成对应的 React 或 Vue 组件代码。

MCP 支持四种工作流方向：

• • 设计到代码：从设计稿生成组件代码框架
• • 代码到设计：从线上产品的 CSS 变量反向生成设计令牌
• • 设计到设计：让 AI 基于现有组件探索多种布局变体
• • 设计到文档：自动生成设计变更说明，前后对比截图

Penpot 原生 Inspect 给你的是原子 CSS 属性，MCP + AI 给你的是带组件语义的工程代码。

代码协作：Inspect 模式与开放标准

对于开发者，Penpot 提供了 Inspect 模式。

选中任意设计元素，右下角面板显示该元素的 CSS 属性、尺寸、间距、颜色值。

因为是原生 CSS Grid 和 Flexbox 布局，显示的不是「近似值」，而是真实可用的 CSS 代码。

Penpot 的整个文件格式就是开放的：SVG、CSS、HTML、JSON。

如何使用

Penpot 提供了两种使用方式。

云版直接访问 design.penpot.app，注册即用。免费，不限项目数，不限团队成员数，没有功能阉割。

自托管使用 Docker Compose 部署：

git clone https://github.com/penpot/penpot.git
cd penpot
docker compose up -d

启动后访问 http://localhost:9000。

生产环境建议搭配外部 PostgreSQL 数据库和 S3 对象存储，支持 Kubernetes 和 Helm Chart 部署。

金融、政务等有合规要求的团队，可以把 Penpot 部署在内网或私有云上，数据不出边界。

同时还支持 LDAP、SAML 对接企业账号体系。

和 Figma 简单对比

如果你熟悉 Figma，以下对比帮你快速定位差异：

Penpot 的布局引擎是原生 CSS Grid/Flexbox，Figma 是专有的 Auto Layout。

Penpot 的设计令牌是一等公民，Figma 需要插件或第三方工具补充。

Penpot 可以自托管，Figma 只有云服务。Penpot 永久免费，Figma 按编辑者付费（$15/月起）。

Figma 的优势在于：大文件性能更流畅，插件生态有几千个成熟方案，高级原型交互支持变量驱动和条件逻辑。

总结

Penpot：用 Web 标准重新定义设计工具。

CSS Grid 做布局引擎，SVG 做矢量存储，设计令牌打通设计系统到前端组件，MCP Server 打通设计稿到 AI 编码工具。

目前为止我看到的一些给AI用的设计技能 Skill，都是在定义 Penpot 里的设计令牌。

而界面是否能设计得好，是否符合你的想象，还需要一点运气：AI生成的前端页面恰好符合要求，或者你给AI一个参考页面，让它参考生成。

还有一些团队协作的场景，有一位专业设计的成员，她可以用这个工具，生成有专业审美品味的外观，然后跟AI无缝衔接生成前端页面代码，直接能用。

有实际落地的案例：设计迭代周期缩短60%，开发还原度达到95%，团队协作效率提高3倍。

GitHub 地址：https://github.com/penpot/penpot

官网：https://penpot.app