本文由 Penpot 贊助 想像一下，除了設計本身之外，您的 Penpot 檔案還包含完整的圖示集，其中使用了一些但不是全部圖示。如果你要求 Claude 或 Gemini 等人工智慧僅導出正在使用的圖標，它將無法做到這一點。它無法與 Penpot 檔案互動。 然而，Penpot MCP 伺服器可以。它可以在設定的規則和權限下執行一系列精心挑選的操作，特別是因為 Penpot 擁有廣泛的 API，而且因為它是開源的，所以更是如此。 AI 的工作只是理解您的意圖，選擇 MCP 伺服器要執行的正確操作（在本例中為匯出），並傳遞任何參數（即正在使用的圖示）。然後，MCP 伺服器將其轉換為結構化 API 請求並執行。 將 AI 視為餐廳中接受訂單的服務器，將 MCP 伺服器視為菜單和廚師，將 API 請求視為（希望如此）熱盤子上的熱披薩派，可能會有所幫助。 究竟為什麼選擇 MCP 伺服器？好吧，Penpot 無法理解您的意圖，因為它不是 LLM，也不允許第三方 LLM 與您的 Penpot 文件交互，以確保您的 Penpot 資料的安全和隱私。儘管 Penpot MCP 伺服器確實充當安全橋樑，但使用 Penpot 檔案和資料作為上下文將 AI 意圖轉換為 API 請求。 更好的是，由於 Penpot 採用設計表達為程式碼的方法，因此可以以程式設計方式在粒度層級上建立、編輯和分析設計。與其他 MCP 伺服器提供的服務相比，它更具上下文、更具體，因此更強大，並且比我認為沒有人真正想要的低於標準的「描述 → 生成」AI 工作流程更周到。 Penpot 的 AI 白皮書將此描述為糟糕的方法，將「轉換為代碼」方法描述為醜陋的方法，而 MCP 伺服器則更加精緻和適應性更強。 特點和技術細節 在我們繼續討論用例之前，這裡有一些功能和技術細節，進一步解釋了 Penpot MCP 伺服器的工作原理：
符合MCP標準； 與 Penpot API 整合以取得即時設計資料； 包括Python SDK、REST API、插件系統和CLI工具； 可與任何支援 MCP 的 AI 助手（VS Code 中的 Claude、Cursor 中的 Claude、Claude Desktop 等）配合使用； 支援與AI模型共享設計上下文，讓他們看到並理解組件； 使用自然語言促進與 Penpot 的溝通。
那麼，MCP 伺服器可以讓我們在 Penpot 中做什麼？現有的實驗已經有了哪些成果？我們來看一下。 Penpot MCP 伺服器用例 如果您只是想跳到 Penpot MCP 伺服器的功能，Penpot 在 Google Drive 中保存了一些 MCP 演示，非常值得觀看。 Penpot 執行長 Pablo Ruiz-Múzquiz 提到影片 03、04、06、08 和 12 是他們的最愛。 總結 MCP 伺服器的更快方法是觀看 Penpot Fest 2025 的揭幕儀式。 除此之外，讓我們來看看 Penpot 在公開展示中展示的一些更精緻的範例。 從設計到程式碼再返回（以及更多） 從我之前所說的 Penpot 設計如何表達為程式碼開始，這意味著 MCP 伺服器可以使用 AI 將設計轉換為程式碼，也可以將程式碼轉換為設計，設計轉換為文檔，文件轉換為設計系統元素，基於所述設計系統再次設計為程式碼，然後基於所述設計系統的全新元件。 這聽起來很超現實，但下面的演示展示了這種可轉換性，它不是來自模糊的指令，而是來自先前的設計選擇，無論它們是如何表達的（設計、程式碼或文件）。沒有任何意外——這些只是你根據先前的決定所做的決定，並且迅速執行。 在演示中，Penpot 的設計師 Juan de la Cruz García 輕鬆地將一些簡單的組件轉換為文件、設計系統元素、程式碼、新組件，甚至像 Play-Doh 一樣完整的 Storybook 項目： 按程式碼設計、設計/程式碼驗證和簡單操作 在下面的類似演示中，Oraios AI 聯合創始人 Dominik Jain 在更新前端樣式之前根據設計創建了一個 Node.js Web 應用程序，將名稱和標識符保存到內存中以確保設計到代碼的順利轉換，然後再檢查一致性，添加了在 Penpot 中選定的形狀旁邊發表評論，然後用調整後的組件替換 Penpot 中的塗鴉。這裡發生了很多事情，但您可以準確地看到 Dominik 在 Claude Desktop 中輸入的內容以及 Claude 的回應，而且非常可靠： 順便說一下，之前的演示在 VS Code 中使用了 Claude，所以我應該注意 Penpot MCP 伺服器與 LLM 無關。您的技術堆疊完全取決於您。 IvanTheGeek 設法使用 JetBrains Rider IDE 和 Junie AI 設定他們的 MCP 伺服器。 更多用例 將 Penpot 板轉換為可用於生產的語義 HTML 和模組化 CSS，同時利用任何 Penpot 設計標記（請記住，Penpot 設計已經表達為程式碼，因此這不是憑空猜測）： 產生互動式 Web 原型而不更改現有 HTML： 如前所述，利用現有設計和/或設計系統元素將塗鴉轉換為組件： 從 Penpot 檔案建立設計系統文件： 以下是 Penpot 和社區的更多用例：
先進的出口， 使用自然語言搜尋設計元素， 使用自然語言從外部 API 提取數據， 輕鬆將 Penpot 連接到其他外部工具， 將重複任務儲存到記憶體中並執行它們， 視覺回歸測試， 設計一致性和冗餘檢查， 可訪問性和可用性分析和回饋， 設計系統合規性檢查， 指南合規性檢查（品牌、內容等）， 透過設計分析監控採用和使用情況， 自動保持文件與設計同步， 設計文件組織（例如，標記/分類）。
從本質上講，由於您選擇的 LLM/LLM 用戶端的效率和易用性，Penpot MCP 伺服器引領了無限數量的工作流程，但又不會將您的資料暴露給它。 您將使用 MCP 伺服器做什麼？ Penpot MCP 伺服器甚至還沒有處於測試階段，但這是一個您可以參與的活躍實驗。 Penpot 用戶已經開始探索 MCP 伺服器的用例，但 Penpot 希望看到更多。為了確保下一代設計工具滿足設計師、開發人員和產品團隊的整體需求，必須集體協作來建構它們，特別是在人工智慧方面。 注意：Penpot 正在尋找渴望探索、實驗並幫助完善 Penpot 的 MCP 伺服器的 Beta 測試人員。如需加入，請寫信至 support@penpot.app，主題為「MCP beta 測試志工」。 您是否認為 Penpot MCP 伺服器可以做一些當前工具做得不夠好、不夠快或根本無法做到的事情？ 您可以在這裡學習如何設定 Penpot MCP 伺服器並立即開始修補，或者如果您的大腦已經充滿了想法，Penpot 希望您加入討論，分享您的回饋，並討論您的用例。或者，下面的評論部分也是一個不錯的起點！
