前端开发里很常见的一个环节是"对着设计稿写代码"：设计师在设计工具里画好页面，开发者打开标注模式，一个个量间距、抄颜色、对字号，再翻译成 CSS 和组件。现在多了 AI 编程工具，这一步也常常变成截图丢给 AI，让它猜着还原，结果间距、层级和设计系统里的变量往往对不上。

Penpot（GitHub 仓库 penpot/penpot，MPL-2.0 协议，GitHub 上超过 6 万 Star）是一个开源的设计与原型工具，它想解决的正是设计和代码之间的这道鸿沟。它有两个特点：一是基于开放标准，设计稿本身就能以 SVG、CSS、HTML、JSON 的形式被读取；二是提供了官方 MCP 服务器，让 AI 编程工具可以直接读取、甚至修改你的设计文件。

Penpot 是什么

按官方 README 的介绍，Penpot 的核心优势是让团队完全掌握自己的设计基础设施。它可以直接在浏览器里用官方的云端版本，也可以部署在自己的服务器上，适合有合规和数据管控要求的团队。

主要能力有这几项：

基于开放标准。Penpot 使用 SVG、CSS、HTML、JSON 这些通用格式，设计稿对开发者和 AI 都是可读的，不依赖私有文件格式。
检查模式（Inspect）。选中元素后，检查面板会直接给出可用的 SVG、CSS 和 HTML 代码，不用自己量尺寸、抄数值。
CSS Grid 和 Flex 布局。设计时就能用和真实代码一致的布局方式，做出来的响应式界面在行为上更接近最终实现。
设计系统。原生支持设计令牌（Design Tokens）、组件（Components）和变体（Variants），让设计和开发共用一套可信的数据来源。
插件和集成。有插件系统可以扩展功能，也支持 Webhook，以及通过访问令牌调用的 API，方便接进现有的开发工具链。

设计令牌：改一处，两边同步

设计令牌是 Penpot 里和开发关系最紧密的功能之一。颜色、间距、字号等设计决策被定义成一个个有名字的令牌，比如把主色定义为一个"primary"令牌，设计稿里的按钮、链接都引用它，代码里也用同名的 CSS 变量。

这样做的好处是，设计和代码不再各自维护一份数值。改动令牌时，设计稿和遵循同一套令牌的代码可以一起更新，组件和变体也都建立在这套令牌上，设计系统更容易保持一致。

Penpot MCP 服务器能做什么

MCP（模型上下文协议）是一种让 AI 工具调用外部能力的开放协议。Penpot 的 MCP 方案由三部分组成：

MCP 服务器：负责和 AI 客户端通信；
Penpot MCP 插件：运行在你打开的 Penpot 浏览器标签页里，真正执行对设计文件的操作；
MCP 客户端：也就是你使用的 AI 编程工具。官方 MCP 页面列出的客户端包括 Codex、Cursor、VS Code 和 Claude。

连接之后，AI 可以把设计读成结构化的数据，再根据设计生成代码；反过来，也可以根据代码去更新设计。官方把这称为设计和代码之间的"多向工作流"。

本地部署的 MCP 服务器提供了几个核心工具：execute_code（在设计文件上执行操作）、high_level_overview（获取文件的整体结构）、penpot_api_info（查询 Penpot API 信息）、export_shape（导出图形）和 import_image（导入图片）。使用官方托管的远程模式时，导入图片和导出图形这两项会受到一定限制。

有两点使用前要知道：

MCP 只操作当前聚焦的页面，而且只在一个浏览器标签页里生效。如果浏览器为了省内存把这个标签页冻结或卸载，MCP 就无法执行任务，需要重新回到这个标签页，等它重新连接后再试。在 Chrome 里可以把 Penpot 站点加入"始终保持这些网站处于活动状态"的列表，减少这种情况。
AI 可以直接修改设计文件。所以建议先从只读操作开始，确认它理解得没问题，再小步尝试修改。

连接远程 MCP 服务器

对大多数人来说，官方托管的远程 MCP 服务器是最省事的方式，不需要在本机运行任何服务。按官方帮助文档，大致流程是：

在 Penpot 里进入 Your account → Integrations → MCP Server，启用 MCP 服务器；
生成 MCP 密钥。这个密钥只显示一次，请立即妥善保存。每个用户只能有一个密钥，重新生成后旧的就失效了；
复制页面给出的服务器地址，地址里会以 userToken 参数带上你的密钥；
把服务器添加到你的 AI 客户端。官方推荐用 add-mcp 工具，在装有 Node.js 的电脑上执行下面这条命令，然后按交互提示选择要接入的客户端：

npx -y add-mcp -g -n penpot <你的 MCP 服务器地址>

在 Penpot 里打开一个设计文件，通过菜单 File → MCP Server → Connect 把插件连接到当前文件。

五步完成后，AI 客户端里应该就能看到 Penpot 提供的工具了。也可以不用 add-mcp，按各客户端自己的方式添加远程 MCP 服务器。

密钥相当于你账号的访问凭证，不要写进公开仓库，也不要发到聊天群里。

第一批提示词怎么写

官方建议连接成功后先用只读的提示词，确认 AI 能看到什么：

"列出这个文件里的所有页面。"
"显示这个页面上的所有组件。"
"分析这个设计的结构并总结一下。"
"列出颜色样式，说明它们分别用在哪里。"

熟悉之后，再试一些轻量的修改操作，比如"根据这个页面的主色创建一组颜色令牌"，或者"把这个页面的图层按统一规则重命名，执行前先说明你要改什么"。

官方还提醒，复杂任务的效果很依赖模型本身，建议使用前沿模型；需要理解图片时，模型必须具备视觉能力。

自己部署 Penpot

如果团队需要把设计数据放在自己的服务器上，Penpot 支持用 Docker、Kubernetes 或 Elestio 等方式自托管。最常见的是 Docker Compose：按官方自托管文档下载 docker-compose.yaml 文件，然后在文件所在目录启动：

docker compose -p penpot -f docker-compose.yaml up -d

启动后在浏览器打开 http://localhost:9001 即可访问。想固定使用某个版本，可以通过 PENPOT_VERSION 环境变量指定，避免每次拉取到不同的版本。

不想自己维护的话，直接用官方云端版本 design.penpot.app 就行。需要跨团队管理的组织，还可以看看付费的 Penpot Enterprise，它提供集中管理团队和权限的 Admin Console，并支持通过 SSO 接入企业身份系统，云端和自托管环境都可以用。

适合谁用

希望设计稿能被开发者和 AI 直接读懂，减少"对着截图猜代码"的前端团队；
有数据合规要求、需要把设计工具部署在内网的团队；
正在搭建设计系统，想用设计令牌统一设计和代码的团队；
想尝试让 AI 编程工具参与设计流程的个人开发者。

如果你用 Codex 做设计稿到代码的转换，也可以参考 Codex 接入 Figma，从设计稿到代码，再把页面同步回设计文件，对比两种方案的思路。

在 AIGoCode 上接入 Codex 等 AI 编程工具后，再按上面的步骤连上 Penpot MCP，就可以让 AI 直接从设计文件开始写代码。

参考链接

Penpot GitHub：https://github.com/penpot/penpot
Penpot MCP 帮助文档：https://help.penpot.app/mcp/
Penpot 自托管文档：https://help.penpot.app/technical-guide/getting-started/