figma-design-to-code

TemPad Dev Figma 設計轉代碼技能是 Figma 視覺設計與您的程式碼庫之間的權威橋樑。專為前端工程師與 UI 開發人員設計，它利用 TemPad Dev MCP 伺服器直接從您的 Figma 選取範圍或特定 nodeId 中提取精確的設計證據，包括佈局結構、CSS、設計標記（tokens）與資源。此代理程式可將設計數據自動轉換為特定框架的代碼，確保視覺精確度並遵守您專案既有的樣式模式，如 Tailwind CSS 或自定義組件庫。

• 即時設計提取：利用 get_code 與 get_structure 工具直接從 Figma 畫布取得標記、樣式、間距、排版與色彩細節。
• 專案意識生成：讀取本地設定檔（如 AGENTS.md）、設計系統文件與現有原始組件，確保輸出符合您專案的檔案慣例、導入路徑與組件界限。
• 智慧標記處理：將 Figma 變數與設計標記動態映射到您專案的 CSS 變數或標記系統，維持設計到開發過程中的一致性。
• 資源管理：提取並處理 SVG 與圖片資源，支援主題感知著色與資源管道。
• 設定靈活性：支援自定義 CSS 單位（rem/px）、根字體大小與縮放因子，以滿足特定的響應式與無障礙需求。

使用說明與限制：

• 必要條件：必須啟用並連接 TemPad Dev MCP。若伺服器無法存取，技能將暫停並要求重新連接。
• 證據階層：技能優先將本地專案證據（如 AGENTS.md、現有組件）視為實作真理，其次是來自 TemPad Dev 的設計證據，最後才是使用者對於缺失商業邏輯或產品決策的意圖。
• 範疇限制：本工具僅限於 UI 轉換，不進行設計檢視、產品創意發想或泛用代碼審查。除非有明確證據，否則不會主動猜測隱藏狀態（如懸停、禁用、載入狀態）或複雜的非視覺商業邏輯。
• 工作流建議：首先閱讀專案指令檔與設計系統文件以建立約束。在實作前，執行 get_code 進行頂層提取以取得設計快照。若對於組件邊界或可重用組件存在模糊空間，請在進行前先參閱現有程式碼庫模式。
• 精確第一：切勿發明設計中未證實的視覺細節或行為。若無法完全驗證請求的輸出，代理程式將會警告使用者或暫停，而非輸出錯誤或推測性的代碼。