C✳CODEZ.WIN
🌐 繁體中文

Skill 多語言閱讀指南

figma-code-connect-components用途、用法與原始來源

使用 Code Connect 映射工具將 Figma 設計元件連接到程式碼元件。當使用者說「程式碼連線」、「將此元件連接到程式碼」、「對應此元件」、「將元件連結到程式碼」、「建立程式碼連線對應」或希望在 Figma 設計與程式碼實作之間建立對應關係時，可以使用此功能。對於畫布寫入操作，可透過以下方式進行：use_figma， 使用figma-use。

原文擷取時間:

來源儲存庫
openai/skills
SKILL.md
skills/.curated/figma-code-connect-components/SKILL.md
儲存庫 Star
28,420
儲存庫最近更新
2026-10-29
能力分類
設計
最近採集時間

授權：未標明

原始 SKILL.md

流程片段用來協助閱讀上游說明。本頁沒有執行第三方 Skill，不屬於實測評測。

下面的用途與操作片段來自上游文件，由本站整理並翻譯，和另行標示的 Codez 編輯分析分開呈現。

這個 Skill 能做什麼

使用 Code Connect 映射工具將 Figma 設計元件連接到程式碼元件。當使用者說「程式碼連線」、「將此元件連接到程式碼」、「對應此元件」、「將元件連結到程式碼」、「建立程式碼連線對應」或希望在 Figma 設計與程式碼實作之間建立對應關係時，可以使用此功能。對於畫布寫入操作，可透過以下方式進行：use_figma， 使用figma-use。

如何使用：上游操作流程

所需工作流程

請按以下步驟操作，不要跳過任何步驟。

原文片段 · L29 ↗

概述

這項技能可以幫助您使用 Figma 的 Code Connect 功能將 Figma 設計元件與其對應的程式碼實作連接起來。它會分析 Figma 設計結構，在您的程式碼庫中搜尋匹配的元件，並建立保持設計與程式碼一致性的映射關係。

原文片段 · L8 ↗

步1取得 Code Connect 建議

稱呼get_code_connect_suggestions一次識別所有未映射的組件。此工具會自動執行以下操作：從 Figma 場景圖中擷取元件資訊；識別所選區域中已發佈的元件；檢查現有的 Code Connect 對應並篩選掉已連接的元件。

原文片段 · L33 ↗
原文片段 · ↗
get_code_connect_suggestions(fileKey=":fileKey", nodeId="1:2")

環境與相依需求

先決條件

Figma MCP 伺服器必須已連線且可存取；使用者必須提供帶有節點 ID 的 Figma URL：https://figma.com/design/:fileKey/:fileName?node-id=1-2

原文片段 · L19 ↗

限制與結果檢查

本次未從該檔案選出獨立的限制片段，不代表適用於所有輸入或環境。請閱讀完整原文，並自行驗證實際結果。

開始使用前

  1. 先核對支援的 Agent 宿主和儲存庫安裝說明。保留完整 Skill 目錄及其引用的腳本、資源和文件，只複製 SKILL.md 可能遺漏相依需求。
  2. 向 Agent 提供實際輸入、預期輸出和驗收標準。呼叫方式與可用工具取決於宿主環境，本站不假定存在通用的安裝指令。
  3. 先在暫存專案或輸入副本上試用。涉及修改檔案、遠端服務或計費資源的操作，應逐項核對後再授權。
  4. 依照原文檢查項目和自己的需求驗證輸出。成功觸發或儲存庫 Star 較高，都不能證明結果正確。

Skill 檔案與目錄格式規範 ↗

繼續閱讀原始文件

翻譯與介紹範圍

本頁從固定版本的上游 SKILL.md 整理用途與操作片段，譯文使用輔助翻譯。它不是完整手冊，也不代表經過相容性實測；使用前請核對原文及其引用檔案。

介紹依據下方列出的固定版本；目前儲存庫動態和目錄擷取時間分開呈現。

固定版本來源
閱讀原文 ↗
原文擷取時間
來源提交版本
49f948faa9258a0c61caceaf225e179651397431
原文 SHA-256
0f19edad8aed28063a3517c419fbcbef5421d024f189fd02a17fae25093ec69d
返回完整 Skill 目錄