设计稿管理程序 -Penpot 介绍 | 安装

Penpot 介绍：

Penpot 是一款面向设计师和开发者的开源 UI/UX 设计协作平台。简单理解，它有点像开源版 Figma，可以在浏览器里完成界面设计、原型制作、团队协作和设计交付等工作。

和传统设计工具不同，Penpot 从一开始就更强调设计与开发协作。它基于 Web 使用，设计过程中会尽量贴近 SVG、CSS、HTML 这些开放标准，开发者在检查设计稿时，可以更直接地看到可用于开发的样式和代码信息。官方也明确把它定位为连接设计与代码工作流的开源设计工具。

除了常规的 UI 设计和团队协作，Penpot 还有一个很值得关注的方向：AI 工作流。官方已经提供了 Penpot MCP Server，可以让 Codex、Cursor、Claude Code、VS Code 等支持 MCP 的 AI 工具连接到 Penpot，让 AI Agent 直接参与设计流程。

通过 MCP，AI 不只是“看设计稿”，还可以读取和操作 Penpot 文件结构，比如页面、图层、组件、样式、Design Tokens 等。也就是说，后续可以让 AI 帮忙生成页面、整理图层、创建组件、调整样式，甚至根据已有设计系统生成新的界面。

简单来说，Penpot 不只是一个开源设计工具，它更像是一个可以自建、可协作、还能接入 AI Agent 的设计工作台。

能力方向Penpot 可以做什么UI 设计绘制页面、线框图、移动端界面和 Web 界面原型协作制作交互原型，支持团队在线协作和设计交付设计系统管理组件、样式、Design Tokens 和共享库自托管部署可以部署到自己的服务器、NAS 或本地环境开放标准基于 SVG、CSS、HTML 等 Web 标准，减少私有格式锁定MCP / AI 工作流让 Codex、Cursor、Claude Code 等 AI Agent 读取和操作设计文件

官网docker部署指南：如何用 Docker 部署 Penpot：技术性、逐步指南

GitHub：GitHub - penpot/penpot: Penpot: The open-source design platform for Product teams that need scalable collaboration. · GitHub

Docker部署步骤：

1、安装Docker以及Docker Compose

2、创建目录

mkdir -p /usr/penpot & cd /usr/penpot

3、下载docker-compose.yaml文件

wget https://f.guiji20.top/res/penpot/docker-compose.yaml

4、根据需要修改compose的配置

1. `PENPOT_PUBLIC_URI: http://localhost:9001` → 改成新服务器 IP 或域名。
2. `/soft/penpot/data:/opt/data/assets` → 前端、后端两处都改，提前创建目录。
3. `networks: penpot: 1panel-network` → 新服务器没这个网络就改或创建。
4. `9001:8080`、`1080:1080` → 确认端口没被占用。
5. `PENPOT_SECRET_KEY: change-this-insecure-key` → 必须换成随机密钥。
6. `PENPOT_DATABASE_USERNAME: penpot` → 改成自己的用户名。
7. `PENPOT_DATABASE_PASSWORD: penpot` → 改成强密码。
8. `POSTGRES_USER=penpot`、`POSTGRES_PASSWORD=penpot` → 跟上面保持一致。
9. `pg_isready -U penpot` → 用户名改了这里也要改。
10. `PENPOT_SMTP_*` → 默认指向 mailcatch，要用真实邮箱就改。
11. `PENPOT_FLAGS` → 内含 `disable-email-verification`、`disable-secure-session-cookies`，公网必须去掉。
12. `PENPOT_TELEMETRY_ENABLED: "true"` → 不想发数据改 `"false"`。
13. `image: ...${PENPOT_VERSION:-2.18}` → 升级改这里或设环境变量。
14. `PENPOT_HTTP_SERVER_MAX_BODY_SIZE: 367001600` → 要传大文件就调大。
15. Traefik 注释 → 公网 HTTPS 才启用，内网不用管。
16. `# PENPOT_DISABLE_IPV6_LISTEN: "true"` → 新服务器 IPv6 被禁就取消注释。
17. 迁旧数据 → 数据库用户名/密码/SECRET_KEY 必须沿用旧值。
18. 迁旧资源 → 拷 `/soft/penpot/data` 整个目录。
19. 版本一致 → 新旧服务器 Penpot 版本最好相同。
20. 部署前 → 建目录、查网络、查端口、查 IPv6，再 `docker compose up -d`。

5、使用指定版本运行penpot容器（若无需指定版本的话，去掉PENPOT_VERSION）

PENPOT_VERSION=2.18.0 docker compose -p penpot -f docker-compose.yaml up -d

一切皆留「轨迹」

设计稿管理程序 -Penpot 介绍 | 安装 | 部署