GitHub上 5 万 Star，这个开源设计平台让 AI 直接读懂设计稿。

hlx

GitHub 上有一个在浏览器上能用的 Figma 平替。也就是在浏览器就能画设计稿的开源工具。【图片1】而且它能让 AI 直接读取。有很多人画原型都想生成的原型尽可能和原本的设计稿样式逼近一些。如果你只是把之前的设计稿截屏发给 AI，让它仿照生成大概率不行。可以来试试今天推荐的这个开源项目的方案。【图片2】01开源项目简介Penpot 是一个开源的设计协作平台，UI 设计、原型、团队协作，全在浏览器里搞定。GitHub 上 5 万多 Star，全球 150 万用户。而且这个开源项目已经迭代了 5 年。不是那种 Demo 跑两天就停更的玩具项目。它能自己部署哦。设计文件、组件库、tokens 全在你自己电脑上，这个还挺不错的。【图片3】Penpot 背后是西班牙一家叫 Kaleidos 的开源公司。创始人 Pablo之前做过 Taiga，一个开源的项目管理工具，全球十几万人用户吧。当年他们团队招了设计师，结果发现开源的设计工具基本没有好用的。于是自己做了一个，坚持迭代了 5 年。开源地址：https://github.com/penpot/penpotPenpot 官方自称是唯一真正部署无关的设计平台，这个说法基本属实。两种用法：直接用官方网站，也能 Docker 自部署。对于金融、政府、医疗这些行业，设计稿涉及敏感数据，扔公有云上合规过不去。有一些大公司想做设计资产私有化，内网部署是刚需。02设计即代码Penpot 最有意思的一个设计哲学是设计文件本身就是代码。不是导出的时候翻译成代码，是从一开始就用 SVG、CSS、HTML 这些 Web 标准来表达设计。这个理念影响很深。【图片4】具体表现在三个地方：Inspect 模式：选中任何元素，直接看到可复制的 SVG/CSS/HTML 代码。程序员拿过去就能用。【图片5】原生 CSS Grid 和 Flex 布局。你在 Penpot 里画响应式布局，它真的按 Grid/Flex 规则渲染。所见即所得，画出来什么样，最后代码就长什么样。文件用开放标准保存，别的软件也能打开。哪天你不想用 Penpot 了，设计稿不是专有格式。03原生 Design Tokens + MCP这一块让 Penpot 在 AI 时代变得好用。Design TokensPenpot 是业内第一个完整支持 W3C Design Tokens 标准的设计工具。Design Tokens 简单说就是把颜色、字号、间距这些设计变量统一管理。设计稿里改一处，全项目联动，开发那边也用同一套变量，不用手动同步。【图片6】【图片7】对要建设计系统的团队来说，这是刚需，而且 Penpot 做的是行业标准级别。MCPPenpot 内置了 MCP。AI Agent可以直接读你的设计文件。并且读到的是真实的 components、tokens、layers、页面结构，不是一张截图。让 Claude Code 链接 Penpot 后，能直接读你的设计文件、按需生成或调整组件，并且代码改动能同步回设计稿。不用让 AI 看截图猜 UI 了，思路还挺不一样的。04怎么用方式一：懒人方案直接打开 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，按提示注册管理员账号就行。详细的配置文档在官方 self-host 页面，有什么特殊需求，比如HTTPS、反向代理、子路径部署啥的都查得到。内容来源于互联网[玫瑰]