Penpot：设计稿即代码的开源 Figma 替代品

设计师在 Figma 里画好了界面，开发者拿到手一看：间距多少？字号多少？颜色值是什么？Figma 导出的 CSS 只是个近似值，真正的答案锁在专有格式里，只能靠猜。这不是开发者的错，也不是设计师的错，而是工具的问题。Penpot 用一个直接的思路解决了它：所有设计元素直接就是 SVG、CSS、HTML。

一、Penpot 是什么

Penpot 是一个完全开源（MPL-2.0 许可）、可自托管的设计平台，由西班牙开源公司 Kaleidos 开发，定位是 Figma 的开源替代品，目前在 GitHub 上已经收获了超过 6 万颗 star。

但它的核心差异不在"免费"或"开源"，而在一个根本性的技术选择：所有设计元素都用 SVG、CSS、HTML 这三个开放标准来表达。

这意味着什么？传统设计工具（Figma、Sketch、Adobe XD）用的是专有格式，设计师画出来的东西必须通过"导出"才能变成代码，而这个导出永远是近似的、有损的。Penpot 不需要"导出"，因为设计稿本身就是代码：Inspect 面板里直接给出可用的 SVG/CSS/HTML 代码，开发者复制即用。

二、核心功能一览

特性	说明
开放标准	所有设计元素都是原生 SVG/CSS/HTML，无需转换
实时协作	多人同时编辑，和 Figma 一样的体验
CSS Grid 与 Flex 布局	原生支持，设计即布局，和真实代码一致
设计令牌（Design Tokens）	颜色、间距、字号等变量统一管理，全局一致
组件与变体	可复用的组件库，修改一处全局生效
MCP 服务器	可直接与 AI 编码工具链对接
开放 API 与插件系统	方便集成到 CI/CD 或自动化流程

其中最后两项，MCP 服务器和开放 API，对于 AI 时代的开发工作流特别重要。

部署方式也很灵活：既可以直接使用官方托管版本，也可以用 Docker 或 Kubernetes 自托管，设计资产完全掌握在自己手里。

三、为什么"开放标准"这件事很关键

传统工作流的痛点

设计到开发之间有一条鸿沟：

设计师用 Figma 画，导出（有损），开发者用代码实现（近似），再和设计师"对稿"。这个循环反复出现，每次都对不齐，因为 Figma 的专有格式和 Web 标准之间存在难以消除的语义鸿沟。

Penpot 的思路

设计稿 = 代码。SVG 就是矢量图形，CSS 就是样式，HTML 就是结构，没有"导出"这个步骤，因为不需要。设计师画出来的东西，开发者直接看代码就能理解：间距是 gap: 16px，颜色是 #FF5733，字号是 font-size: 14px，没有歧义。

Penpot 设计即代码工作流对比

四、MCP 服务器：AI Agent 时代的杀手级功能

Penpot 提供了 MCP（Model Context Protocol）服务器，这意味着 coding agent（Claude Code、Cursor 等）可以直接读取 Penpot 设计稿的代码表示。

环节	传统方式	Penpot + MCP
agent 获取设计信息	截图 + OCR（有损）	直接读取 SVG/CSS/HTML（无损）
颜色/间距信息	人工标注或估算	代码即答案
设计变更同步	重新截图/导出	agent 实时读取最新版本

设计到代码的鸿沟，从协议层面就被抹平了。在 AI 编码智能体越来越普遍的今天，这是一项重要的基础设施。

Penpot MCP 服务器与 AI Agent 集成