设计师在 Figma 里画完稿，开发者拿到手一看，尺寸标注不清晰、间距对不上、颜色值不一致，来回沟通好几轮才能落地。更别提那些对数据安全有要求的团队，设计文件存在别人的云上，合规审计过不了关。
Penpot 想解决的就是这些问题。它是一个开源的设计和原型平台，GitHub 上近 5 万颗星，由西班牙公司 Kaleidos 开发维护，采用 MPL-2.0 协议。但 Penpot 不是简单做一个"Figma 的开源翻版"，它从底层就选了一条不同的路：用代码思维做设计。
用代码思维做设计，不是设计思维做代码
大多数设计工具的逻辑是：先画图，再想办法转成代码。设计师用绝对定位拖拽元素，开发者拿到设计稿后，要"翻译"成 CSS 布局。这个翻译过程就是沟通成本的来源。
Penpot 反过来。它的布局系统直接用 CSS Grid 和 Flex Layout，设计师在设计阶段就在用和开发者一样的语言。你拖出来的不是一个"宽 300px 的矩形"，而是一个"flex 容器里的子元素，gap 16px，justify-content space-between"。开发者拿到设计稿，打开 Inspect 面板，看到的就是可以直接用的 CSS、HTML 和 SVG 代码。
这不是事后导出，而是设计本身就是这样构建的。一位开发者评价说："Penpot 用了和开发者一样的抽象——CSS flexbox 和 grid——这对前端开发可能是个很大的改变。"
自托管：设计数据全在自己手里
Penpot 是极少数真正支持企业级自托管的设计工具。你可以用 Docker、Kubernetes 或 Elestio 把它部署在自己的服务器上，所有设计文件、协作数据都存在自己这边。
对金融、医疗、政府这些对数据安全敏感的行业来说，这个能力是硬需求。设计文件涉及产品界面、业务流程、用户交互，这些信息放在第三方云上，合规审计就过不了关。Penpot 自托管后，数据完全自主可控，没有 vendor lock-in。
当然，如果你不想自己部署，Penpot 也提供免费的云端版本（design.penpot.app），注册就能用，没有用户数限制。
Design Tokens：改一个颜色不用改几十个地方
Penpot 2.6 引入了原生 Design Tokens，而且是第一个支持 W3C DTCG 标准的设计工具。
Design Tokens 听起来抽象，但解决的问题很实际：一个产品的主色、字号、间距、圆角这些设计变量，散落在几十个设计文件和几百个组件里，改一个主色要手动改几十个地方，漏改一个就出现"这个按钮颜色怎么不一样"的问题。
Penpot 的 Design Tokens 把这些变量集中管理，颜色、圆角、尺寸、间距、旋转、边框、透明度都可以定义为 Token，一改全改。而且因为符合 W3C 标准，这些 Token 可以直接同步到代码仓库，设计和开发用同一套变量，不再有"设计稿和代码不一致"的问题。
MCP 服务器：让 AI 也能读懂设计稿
Penpot 最近推出了开源的 MCP 服务器，这让 AI 工作流也能和设计稿对接起来。
MCP（Model Context Protocol）是 AI 工具连接外部数据的标准协议。有了 MCP 服务器，Claude Code、Cursor 这些 AI 编程助手可以直接读取 Penpot 的设计文件，理解布局结构、组件关系、样式变量，然后生成对应的代码。设计到代码的转化，AI 也能帮上忙了。
插件系统和开放 API
Penpot 有完整的插件系统，PenpotHub 上有社区贡献的各种插件。比如 Locofy 插件可以把设计稿直接转成生产级代码。
同时提供开放 API 和 Webhook 支持，可以跟现有的开发工具链集成。CI/CD 流水线可以自动拉取设计稿更新，设计变更自动通知开发团队。
实时协作
跟 Figma 一样，Penpot 支持多人实时协作。团队成员可以同时在同一个文件里工作，看到彼此的光标和编辑。设计师、开发者、产品经理都在一个平台上，设计师画原型、开发者看代码、产品经理提反馈，不需要来回切换工具。
版本演进
Penpot 的版本迭代节奏稳定。2021 年在 FOSDEM 上发布 Alpha 版，2023 年 1.0 正式发布。2024 年 2.0 大版本更新，带来了 CSS Grid 布局、全新 UI、组件系统和 Design Tokens。2025 年推出付费 Premium 和 Enterprise 层级，核心功能仍然免费无限制。2026 年加入 MCP 服务器和新的 Skia 渲染引擎（Beta），KDE Plasma 团队也从 Figma 迁移到了 Penpot。
目前 Penpot 有超过 40 万用户、8 万多个团队在使用。
两种使用方式
在线版最简单，访问 design.penpot.app 注册就能用，免费，没有用户数限制。适合个人和小团队。
自托管版适合有数据安全要求或需要内网使用的团队。用 Docker 部署，几条命令就能跑起来：
mkdir penpot && cd penpot
# 创建 docker-compose.yml 配置文件
docker-compose up -d
# 访问 http://localhost:9001
和 Figma 比，差什么？
公平地说，Penpot 在性能上还有差距。因为它底层用 SVG 渲染，大文件时流畅度不如 Figma 的 WebGL 渲染引擎。这也是为什么团队在开发新的 Skia 渲染引擎。
Figma 的插件生态更丰富，社区更大，这是先发优势带来的壁垒。Penpot 的插件系统在快速追赶，但数量上还有差距。
但 Penpot 有几个 Figma 给不了的东西：自托管、开放标准、代码原生、没有席位限制。对很多团队来说，这些比流畅度更重要。
适合什么人？
如果你是开发者，厌倦了从设计稿里"猜"布局逻辑，Penpot 的 CSS Grid/Flex 布局和 Inspect 模式会让你舒服很多。如果你是团队负责人，对设计数据的安全和合规有要求，自托管是刚需，Penpot 是少数能选的方案之一。如果你是开源爱好者，想用开源工具完成完整的设计工作流，Penpot 目前是最成熟的选择。
反过来，如果你重度依赖 Figma 的某个特定插件，或者团队已经深度嵌入 Figma 生态，迁移成本需要评估。Penpot 支持导入 SVG 文件，但复杂设计需要手动重建。
关注
觉得有用？关注我，持续分享 AI 工具和开源项目的深度解读。
