Pencil

Pencil 是什麼？

Pencil是一個基於Agent驅動的設計畫布，建構在開放設計格式之上，直接存在於您的程式碼庫和IDE（Cursor、VS Code、Claude Code）中。它透過將像素完美的向量畫布引入開發環境，消除了傳統的設計到程式碼交接。設計檔案以版本控制的基於JSON的檔案（.pen格式）儲存在您的Git儲存庫中，允許團隊使用與程式碼相同的分支、合併和協作工作流程來管理設計。Pencil與Claude Code整合，支援基於元件的設計系統，並透過複製貼上功能實現與Figma的雙向工作流程。該平台使用Model Context Protocol（MCP）架構，允許其他工具和Agent以程式化方式讀寫設計。

主要功能

• 整合設計畫布

  像素完美的無限WebGL畫布直接嵌入到您的IDE中，消除了設計工具和程式碼編輯器之間的上下文切換。

• 基於Git的版本控制

  設計檔案以JSON格式儲存在您的程式碼儲存庫中，使用標準Git工作流程實現設計與程式碼的版本控制、分支和合併。

• 並行AI生成

  同時運行多個設計Agent來探索不同的設計方向，實現快速迭代和實驗，無需線性工作流程。

• 元件和設計系統

  利用預建的元件庫，直接從程式碼庫連接團隊現有的設計系統，確保一致性和可重用性。

• Figma整合

  透過無縫複製貼上從Figma匯入設計，向量圖、文字和樣式完整傳輸，平滑過渡到程式碼整合工作流程。

• MCP驅動的可擴展性

  透過Model Context Protocol提供完整的讀寫存取權限，允許與資料庫、API、圖表庫、Playwright/Puppeteer和自訂Agent整合。

使用案例

• 設計到程式碼加速 : 產品團隊可以在IDE內設計介面並立即生成生產就緒的程式碼，消除設計交接階段，減少設計意圖與實作之間的偏差。
• 靈感編程工作流程 : 開發者可以透過高階提示和畫布上的視覺操作來迭代UI/UX，結合Agent程式碼生成的速度和視覺設計的精確控制。
• 設計系統治理 : 組織可以透過將批准的元件庫和設計Token直接嵌入程式碼庫來強制執行設計一致性，使開發者無法在沒有明確版本控制變更的情況下偏離標準。
• 協作設計與開發 : 跨職能團隊可以透過多人功能在同一畫布上同步工作，設計師提供視覺指導，開發者並行實作功能元件。
• 快速原型製作 : 在共享畫布上快速探索多個設計方向，能夠像程式碼一樣分支設計，然後將獲勝的迭代開發為生產應用程式。

常見問題