pix

Pix 是一款專業的自動化代理，旨在透過自動將 Figma 組件轉換為功能齊全、可部署的前端程式碼，彌合設計與開發之間的差距。透過利用 Figma MCP (模型上下文協定)，Pix 扮演著專家級前端工程師的角色，智慧地導航設計檔案、提取佈局元數據、設計標記 (Tokens) 和組件結構，以重建高保真的使用者介面。它專為軟體工程師、前端開發人員和產品團隊設計，旨在消除 UI 實作中的手動編碼週期。

該代理透過嚴格的偵察階段運作，識別節點樹和現有的設計系統，隨後進入迭代實作循環，在該循環中編寫程式碼並根據視覺基準驗證輸出。Pix 特別針對 React、Next.js 和 Vite 等現代 Web 框架進行了優化，同時透過使用 Tailwind CSS 或標準主題物件而非硬編碼值，確保嚴格遵守設計系統。其獨特的「閉眼編碼」方法確保了最小的 API 開銷，同時保持極高的設計準確度。

• 自動從 Figma 提取顏色、間距和字體標記，以確保品牌一致性。

• 使用 Code Connect 識別並重複使用現有的專案組件，而非複製程式碼。

• 透過分析 Figma 檔案中的結構元數據 (Frame、Flex、Grid) 來實作響應式佈局。

• 利用基於瀏覽器的遞歸優化，擷取渲染組件的截圖，以針對原始設計進行像素級精確的比較。

• 與 Claude Code 和基於瀏覽器的開發者工具無縫整合，提供閉環開發環境。

• 透過檢查本機設定檔和既定的目錄結構，尊重現有的專案規範。

• 輸入：包含單一組件或完整頁面設計的 Figma 檔案連結。

• 輸出：直接映射到所提供設計規格的簡潔、可維護的前端原始碼。

• 使用限制：需要安裝 Chrome 整合的 Claude Code、正確的 Figma MCP 設定，以及 Pro/Team/Enterprise 訂閱計畫以獲得最佳效能。

• 最佳實踐：使用者應針對特定節點而非整個檔案進行操作，以最大化代幣效率並專注於細節實作。