penpot/penpot

Penpot: The open-source design tool for design and code collaboration

這是什麼

Penpot 是一套面向產品團隊的開源設計平台，主軸不是只做畫面稿，而是把設計、程式碼與協作放在同一條工作流裡。README 強調它可在瀏覽器使用，也能自架到自己的伺服器，因此團隊可以掌握設計基礎設施、合規與治理需求；同時它以 SVG、CSS、HTML、JSON 等開放標準描述設計，讓開發者更容易理解設計輸出。它的定位更接近「可程式化的全端設計平台」：即時協作、Inspect mode、Design Tokens、外掛、API、webhooks 與 MCP server 都是為了讓設計系統能和產品開發流程銜接，而不是停留在交付截圖或標註。

為什麼上榜

這次 penpot/penpot 在日榜拿到 420 顆今日新增星數，總星數已超過 5.1 萬，熱度反映出市場對「可自架、開源、避免 vendor lock-in」設計工具的需求仍然強。它的亮點在於把傳統設計工具常見的協作能力，和開發者關心的可讀程式碼、API、Design Tokens、MCP 工作流放在一起談；尤其 README 直接把 AI workflows 與 MCP server 納入敘事，顯示 Penpot 不只想替代封閉式設計軟體，也想成為設計與程式碼之間的可自動化介面。對需要治理、資安或內部流程整合的組織來說，這個差異比單純「免費」更關鍵。

適合誰，可以拿來做什麼

Penpot 適合正在建立或擴張產品設計系統的團隊，尤其是設計師與工程師需要長期協作、並希望設計輸出能更貼近實作的情境。README 提到它支援即時協作，也能獨立使用；設計師可用它製作 UI、原型、元件與變體，工程師則可透過 Inspect mode 取得 SVG、CSS、HTML，或用 API、webhooks、外掛把它接進既有開發工具鏈。若組織有自架需求，Penpot 也明確提供 Docker、Kubernetes、Elestio 等安裝路線的文件入口。它比較不只是個人畫圖工具，而是適合把設計系統、開發流程與治理要求放在一起管理的團隊平台。

上手

README 的上手路線很直接：可以使用官方 SaaS，也可以依需求自架；具體安裝步驟沒有直接寫在 README，而是導向官方 self-host 文件，並列出 Docker、Kubernetes、Elestio 與其他部署方式。若只是想試用，可從官方設計入口開始；若要部署，應先閱讀官方技術文件與 getting started 指南。

SaaS: https://design.penpot.app
Self-host: https://penpot.app/self-host
Technical guide: https://help.penpot.app/technical-guide/

README 重點摘要

• Penpot 主打完整掌握設計基礎設施：可瀏覽器使用，也可部署到自己的伺服器，適合有合規與治理需求的團隊。
• 它以開放標準運作，設計內容可對應到 SVG、CSS、HTML、JSON，並透過 Inspect mode 讓開發者取得可用的程式碼資訊。
• 內建 Design Tokens、Components、Variants，目標是讓設計系統成為設計與開發之間的單一事實來源。
• 外掛系統、API、webhooks 與 MCP server 讓工作區可程式化，可支援自動化、AI-driven workflows 與既有工具整合。
• README 提供社群、貢獻指南、文件、課程與架構資源；授權為 MPL-2.0。