figma

Figma 技能透過 Figma MCP 伺服器作為設計意圖與程式實作之間的橋樑，直接從設計檔案中提取精確的元數據、視覺資源與結構上下文。此技能專為需要將高保真 UI/UX 設計轉化為功能性、生產級前端組件的開發人員與工程師所設計。透過自動化提取設計標記、佈局屬性與視覺資源，確保了視覺高度一致性，同時嚴格遵守專案特定的編碼標準與內部設計系統。對於人工像素對齊容易出錯或耗時的複雜前端任務而言，這是一個不可或缺的工具。

• 自動獲取特定 Figma 框架、群組或圖層 ID 的設計上下文與節點層級。

• 產生截圖以進行視覺驗證及實作前後的行為參照。

• 直接從 Figma 負載中提取並提供圖像或 SVG 資源，確保版本對齊。

• 將 Figma 設計標記、排版與間距映射到專案現有的 CSS/Tailwind 公用程式類別與組件庫中。

• 強制執行整個代碼庫中 React 與 Tailwind 結構的一致性實作。

• 與支援 MCP 的代理工具（如 Claude Code、Cursor 或 Cline）無縫整合，實現具備上下文感知的編碼工作階段。

• 此技能需要正確配置 Figma MCP 伺服器，並設定相關的環境變數與驗證憑證。

• 務必優先使用專案特定的設計系統標記，而非從 Figma 提取的原始 Tailwind 數值，以防止設計偏離。

• 遵循推薦的三步驟工作流程：首先取得設計上下文，接著擷取視覺截圖，最後執行實作階段以確保準確性。

• 使用基於連結的提示方式，提供特定的 Figma 節點 URL，以確保代理工具鎖定正確的組件變體。

• 若特定任務需要針對獨立組件進行像素級精確實作，請確保將此技能與團隊既定的設計轉程式碼指南結合使用。

• 避免手動建立資源佔位符；請務必依賴 Figma MCP 伺服器的資源端點，以維護單一真理來源。