Penpot – 開源的設計與代碼協作平台，多人實時協作

Penpot是什麼

Penpot 是開源的設計與代碼協作平台，基於 SVG、CSS、HTML 等開放標準構建，可在瀏覽器中完成 UI 設計與交互原型製作。平台支持多人實時協作、W3C Design Tokens 管理和 MCP Server 集成，讓 AI 直接讀取設計文件的真實組件、Tokens 與圖層結構而非僅截圖。通過 Inspect 模式可一鍵複製原生代碼，實現設計即代碼。

Penpot的主要功能

• UI 設計與原型製作：在瀏覽器中完成界面設計、交互原型和可視化編輯，支持多頁面管理。
• 實時協作：多人同時編輯同一設計文件，支持評論、標註和版本同步。
• Inspect 模式：選中任意元素可直接查看並複製對應的 SVG、CSS、HTML 代碼，開發者無需手動還原。
• 原生 CSS Grid 與 Flex 佈局：設計稿按真實 Web 佈局規則渲染，所見即所得，輸出代碼與視覺完全一致。
• Design Tokens 管理：業內首個完整支持 W3C Design Tokens 標準的設計工具，統一管控顏色、字號、間距等變量。
• 組件與變體系統：支持創建可複用組件及多狀態變體，構建可擴展的設計系統。
• MCP Server 集成：內置 MCP 服務，AI Agent 可直接讀取設計文件的結構、組件和 Tokens，實現雙向設計-代碼工作流。

微信關注回覆 “開源”，加入AI開源項目交流羣

如何使用Penpot

• 方式一：SaaS 在線使用
  • 註冊賬號：訪問 design.penpot.app，用郵箱註冊免費賬號。
  • 創建項目：登錄後新建團隊或項目，進入設計畫布開始創作。
  • 設計界面：利用左側工具欄繪製形狀、文本和組件，右側面板調整屬性與佈局。
  • 管理 Tokens：在 Tokens 面板中定義顏色、字體、間距等設計變量，並綁定到元素。
  • 開啓協作：邀請團隊成員加入項目，多人實時編輯同一文件。
  • 導出代碼：選中元素打開 Inspect 面板，一鍵複製 SVG、CSS 或 HTML 代碼供開發使用。
• 方式二：Docker 自託管
  • 下載配置：在服務器上執行 curl 獲取官方 docker-compose.yaml 文件。
  • 啓動服務：運行 docker compose up -d 部署 Penpot 服務。
  • 訪問配置：通過瀏覽器訪問服務器 IP 的 9001 端口，按嚮導完成初始化設置。
  • 註冊管理員：首次訪問創建管理員賬號，即可在內網環境中獨立使用全部功能。

Penpot的核心優勢

• 設計即代碼：從創作之初就用 Web 標準表達設計，Inspect 直接輸出可用代碼，消除設計與開發之間的翻譯損耗。
• 完全開源與自託管：MPL-2.0 協議，支持私有化部署，滿足金融、政府、醫療等敏感行業的合規與數據主權需求。
• AI 原生可讀：通過 MCP Server，AI Agent 直接讀取設計結構而非截圖，實現精準生成、自動調整和雙向同步。
• 無供應商鎖定：基於 SVG/CSS/HTML/JSON 開放標準，文件格式通用，隨時可遷移至其他工具。
• Design Tokens 行業標準：原生支持 W3C 標準，設計變量一處修改全局聯動，構建可規模化維護的設計系統。

Penpot的項目地址

• 項目官網：https://penpot.app/
• GitHub倉庫：https://github.com/penpot/penpot

Penpot的同類競品對比

Penpot的應用場景

• 企業級設計系統建設：通過 Design Tokens 和組件庫構建跨產品、跨平台的一致性設計規範。
• 金融與政務 UI 開發：私有化部署滿足數據安全合規要求，設計稿不出內網。
• AI 驅動的前端開發：結合 MCP 讓 AI 讀取設計稿直接生成代碼，縮短從設計到上線的週期。
• 開源社區與教育機構：零成本使用全功能設計工具，支持教學、開源項目協作和技能培養。
• 設計-開發無縫協作：設計師在 Penpot 中創作，開發者通過 Inspect 直接獲取可用代碼，減少溝通成本。