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页面找到。