code-connect-components
✓使用 Code Connect 將 Figma 設計組件連接到代碼組件。當用戶說“代碼連接”、“將此組件連接到代碼”、“將 Figma 連接到代碼”、“映射此組件”、“將組件鏈接到代碼”、“創建代碼連接映射”、“添加代碼連接”、“將設計連接到代碼”或想要在 Figma 設計和代碼實現之間建立映射時使用。需要 Figma MCP 服務器連接。
SKILL.md
This skill helps you connect Figma design components to their corresponding code implementations using Figma's Code Connect feature. It analyzes the Figma design structure, searches your codebase for matching components, and establishes mappings that maintain design-code consistency.
When the user provides a Figma URL with file key and node ID, first run getmetadata to fetch the node structure and identify all Figma components.
IMPORTANT: When extracting the node ID from a Figma URL, convert the format:
使用 Code Connect 將 Figma 設計組件連接到代碼組件。當用戶說“代碼連接”、“將此組件連接到代碼”、“將 Figma 連接到代碼”、“映射此組件”、“將組件鏈接到代碼”、“創建代碼連接映射”、“添加代碼連接”、“將設計連接到代碼”或想要在 Figma 設計和代碼實現之間建立映射時使用。需要 Figma MCP 服務器連接。 來源：figma/mcp-server-guide。
可引用資訊
為搜尋與 AI 引用準備的穩定欄位與指令。
- 安裝指令
npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components- 分類
- *創意媒體
- 認證
- ✓
- 收錄時間
- 2026-02-01
- 更新時間
- 2026-02-18
快速解答
什麼是 code-connect-components？
使用 Code Connect 將 Figma 設計組件連接到代碼組件。當用戶說“代碼連接”、“將此組件連接到代碼”、“將 Figma 連接到代碼”、“映射此組件”、“將組件鏈接到代碼”、“創建代碼連接映射”、“添加代碼連接”、“將設計連接到代碼”或想要在 Figma 設計和代碼實現之間建立映射時使用。需要 Figma MCP 服務器連接。 來源：figma/mcp-server-guide。
如何安裝 code-connect-components？
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code 或 Cursor 中使用
這個 Skill 的原始碼在哪？
https://github.com/figma/mcp-server-guide