open-pencil/open-pencil

解決的問題

OpenPencil 為 Figma 等封閉式設計平台提供了一個開源且可程式化的替代方案。它透過允許使用者原生讀取和寫入 .fig 檔案、透過 CLI 或 API 編寫所有操作，並將設計資料保留在本地，解決了專有檔案格式與受限程式存取的問題。

如何運作

這是一個使用 Vue 3 前端與 Skia 為基礎的渲染引擎所建構的設計編輯器。使用 Yoga WASM 來實現 Flex 與 Grid 排版，並透過 Yjs 與 WebRTC 實現無伺服器、點對點的即時協作。專案包含一個無頭 CLI 用於檢視與修改檔案、一個用於 AI 代理整合的 MCP 伺服器，以及一個供開發者建立自訂編輯介面的 Vue SDK。

適用對象

• 設計師：希望使用支援 Figma 檔案且資料本地化的開源編輯器的人。
• 開發者：需要程式化操作設計檔案、檢查佈局，或將設計轉換為程式碼（JSX/Tailwind）的人。
• AI 工程師：需要使用 Model Context Protocol (MCP) 建立或修改 UI 設計的代理開發者。

主要特色

• Figma 相容性：原生支援開啟與匯出 .fig 檔案。
• AI 驅動設計：內建聊天助理與 MCP 伺服器，提供超過 100 個工具，讓 AI 代理可建立與修改節點。
• 可程式化工具包：包含支援 XPath 查詢的無頭 CLI、Figma 插件 API 的 eval 模式，以及 Vue SDK。
• 設計轉程式碼：可將選取內容匯出為 JSX/Tailwind，也可將 HTML/CSS 導入為可編輯的設計圖層。
• 無伺服器協作：無需帳號或中央伺服器，透過 P2P WebRTC 實現即時共同編輯。