Penpot 自託管怎麼選：開源設計工具的 Docker、協作和開發交付思路

penpot/penpot 是一個開源設計工具，定位接近 Figma，但更強調開源、自託管、設計和程式碼協作。它適合想把設計資產、元件和交付流程掌握在自己手裡的團隊。

專案地址：

https://github.com/penpot/penpot

官網：

https://penpot.app

Penpot 適合誰

Penpot 適合這些場景：

1. 團隊希望使用開源設計工具。
2. 公司不希望設計檔案完全放在第三方 SaaS。
3. 設計和前端之間需要 Inspect Mode、設計系統和元件交付。
4. 想基於 design tokens、components、variants 建立長期設計規範。

如果只是個人臨時畫圖，直接用線上版會更省事。自託管更適合團隊長期使用。

自託管入口

README 沒有把完整 Docker Compose 貼在首頁，而是指向官方 self-host 文件：

1

https://penpot.app/self-host

實際部署時建議按官方文件走 Docker 或 Kubernetes，而不是從網上複製舊 compose。Penpot 這類協作工具通常不只是一個容器，還會涉及資料庫、物件儲存、後台任務和郵件服務。

一個穩妥的自託管流程是：

1
2
3
4
5

# 1. 先閱讀官方 self-host 文件
# 2. 準備域名、HTTPS、持久化目錄和資料庫
# 3. 使用官方推薦的 Docker / Kubernetes 方式啟動
# 4. 建立管理員帳號
# 5. 匯入或建立團隊空間

開發交付怎麼用

Penpot 對開發者比較有用的是 Inspect Mode。設計師完成頁面後，開發可以查看：

1. 尺寸和間距。
2. 顏色和字體。
3. 元件結構。
4. 設計 token。
5. 可複用元件和 variants。

這比截圖標註更穩定，也更適合多人協作。

建議的團隊流程

可以按這個方式落地：

1. 設計師在 Penpot 建立 design system。
2. 元件命名盡量和前端元件庫一致。
3. 顏色、字號、間距用 token 管理。
4. 開發透過 Inspect Mode 查樣式，不再靠口頭描述。
5. 大版本前匯出或備份設計檔案。

注意點

Penpot 是協作系統，不是單檔案工具。自託管時要考慮升級、備份、權限、郵件、HTTPS 和儲存。建議先用測試環境跑一遍完整流程，再遷移團隊正式設計資產。