implement-design

作者： figma

將Figma設計轉換為可直接上線的程式碼，達到像素級視覺還原。需連接Figma MCP伺服器，並提供包含檔案金鑰與節點ID的Figma URL，以提取設計上下文、截圖與素材。七步驟結構化流程：解析URL、取得設計上下文、擷取視覺參考、下載素材、轉換至專案慣例、達成1:1對齊，並對照Figma進行驗證。優先重用設計系統而非重複建立；將Figma代幣對應至專案設計...

npx skills add https://github.com/figma/mcp-server-guide --skill implement-design

下載 ZIP GitHub

來自 figma 的更多技能

video-interaction-mapper

此技能應在使用者要求分析UI螢幕錄影並將互動狀態映射到Figma時使用。觸發條件為「將影片…」等請求。

figma-code-connect

建立並維護 Figma Code Connect 範本檔案，將 Figma 元件對應至程式碼片段。當使用者提及 Code Connect、Figma 元件…時使用。

create-design-system-rules

自訂設計系統規則，確保專案中Figma轉程式碼實作的一致性。產生專案特定的元件組織、樣式、設計代碼與資產處理慣例，引導AI代理產出一致的程式碼。支援三種規則檔案格式：Claude Code適用的CLAUDE.md、Codex CLI適用的AGENTS.md，以及Cursor適用的.cursor/rules/figma-design-system.mdc。需連接Figma MCP伺服器並進行程式碼庫分析，以在規則制定前發現既有模式...

figma-implement-motion

將 Figma 的動態與動畫轉換為可直接用於生產環境的應用程式碼。在實作 Figma 設計中的動畫/動態時使用——使用者提及…

SwiftUI ↔ Figma 翻譯。每當使用者提及 Swift、SwiftUI、iOS、iPhone 或 iPad 時使用——無論是從 Figma 設計轉換為……

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

此技能幫助代理在簡報（Slides）情境中使用 Figma 的 use_figma MCP 工具。可與提供基礎使用情境的 figma-use 技能搭配使用…

figma-use-figjam

此技能協助代理人在 FigJam 環境中使用 Figma 的 use_figma MCP 工具。可與提供基礎使用情境的 figma-use 搭配使用…