5万Star开源设计平台Penpot:浏览器端Figma替代,让AI直接读懂设计稿
在GitHub上,有一款完全在浏览器中就能运行的设计工具,堪称Figma的开源替代方案。

更妙的是,它还能让AI直接读取设计源文件。不少人画原型时,总希望生成的界面跟原始设计稿尽可能贴近。如果你只是把设计稿截个图发给AI让它仿造,十有八九达不到效果。今天推荐的这套开源方案,思路就完全不同。

Penpot究竟是什么?
Penpot是一个开源的设计协作平台,UI设计、原型制作、团队协同,全在浏览器里一站式完成。它在GitHub上已经攒了5万多颗Star,全球有超过150万用户。这个项目扎扎实实迭代了5年,绝不是那种跑两天Demo就停更的玩具项目。
另一大亮点是,你可以自行部署。设计文件、组件库、设计Tokens全都放在你自己的机器上,这对注重数据安全的团队来说非常实用。

Penpot的背后是西班牙开源公司Kaleidos。创始人Pablo之前还做过开源项目管理工具Taiga,全球也有十几万用户。当年他们招了设计师后,发现市面上几乎没有好用的开源设计工具,于是干脆自己动手做了一个,一路迭代至今。
项目开源地址:https://github.com/penpot/penpot

设计即代码:核心理念
Penpot最令人耳目一新的设计哲学就是「设计文件本身就是代码」。不是导出时才翻译成代码,而是从一开始就使用SVG、CSS、HTML这些Web标准来表达设计。这个理念的影响非常深远。

具体体现在三个方面:
- Inspect模式:选中任意元素,立刻就能看到可复制的SVG/CSS/HTML代码,开发人员直接拿走就能用。
- 原生CSS Grid与Flex布局:在Penpot里绘制响应式布局时,它实实在在地按Grid/Flex规则渲染,所见即所得,画成什么样,最终代码就长什么样。
- 开放标准保存:设计稿用开放的格式存储,其他软件也能打开。哪怕以后不再使用Penpot,你的设计文件也不会被专有格式锁死。

原生Design Tokens与MCP:AI时代的核心武器
Design Tokens
Penpot是业界第一个完整支持W3C Design Tokens标准的设计工具。Design Tokens可以简单理解为,把颜色、字号、间距这些设计变量统一管理起来。设计稿里改一处,整个项目就会联动更新,开发侧也用同一套变量,再也不用手动来回同步。


对于需要搭建完整设计系统的团队,这几乎是刚性需求,而Penpot在这件事上做到了行业标准级别。
MCP
Penpot内置了MCP,让AI Agent可以直接读取你的设计文件。更重要的是,它读到的是真实的组件、Tokens、图层和页面结构,而不仅仅是一张模糊的截图。


把Claude Code连接到Penpot之后,AI能直接读懂你的设计稿,按需生成或调整组件,代码的改动还能同步回设计文件。再也不用让AI凭截图去猜测UI了,这套思路确实大不一样。
快速上手:两种使用方式
方式一:懒人方案
直接打开 design.penpot.app,注册账号就能免费使用,无需任何部署。
方式二:Docker自部署
在自己的电脑或服务器上部署,核心只需要两步:
# 下载官方 docker-compose 配置
curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml
# 启动
docker compose -p penpot -f docker-compose.yaml up -d
启动成功后,访问 http://你的服务器IP:9001,按提示注册管理员账号即可。更详细的配置文档(如HTTPS、反向代理、子路径部署等)可以在官方self-host页面找到。