figma-implement-design

作者: figma

將 Figma 設計轉換為視覺保真度 1:1 的生產級應用程式碼。在從 Figma 檔案實作 UI 程式碼時,或當使用者提及…時使用。

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

來自 figma 的更多技能

figma-code-connect
figma
建立並維護 Figma Code Connect 範本檔案,將 Figma 元件對應至程式碼片段。當使用者提及 Code Connect、Figma 元件…時使用。
official
figma-create-design-system-rules
figma
為使用者的程式碼庫生成自訂設計系統規則。當使用者說「建立設計系統規則」、「為我的專案生成規則」、「設定設計…」時使用。
official
figma-create-new-file
figma
建立一個新的空白 Figma 檔案。當使用者想要建立新的 Figma 設計或 FigJam 檔案,或是在呼叫 use_figma 之前需要一個新檔案時使用。
official
figma-generate-design
figma
當任務涉及將應用程式頁面、檢視或多區塊佈局轉換到 Figma 時,請搭配 figma-use 使用此技能。觸發條件:'write to…
official
figma-generate-diagram
figma
MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. Routes to type-specific guidance (generic flowchart, architecture…
official
figma-generate-library
figma
從程式碼庫在 Figma 中建立或更新專業級設計系統。當使用者想要建立變數/代碼、建構元件庫、設定…時使用。
official
figma-use
figma
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first.…
official
figma-use-figjam
figma
此技能協助代理人在 FigJam 環境中使用 Figma 的 use_figma MCP 工具。可與提供基礎使用情境的 figma-use 搭配使用…
official