C✳CODEZ.WIN
🌐 繁體中文

Skill 多語言閱讀指南

figma-generate-design用途、用法與原始來源

當任務涉及將應用程式頁面、視圖或多部分佈局轉換為 Figma 時，請將此技能與 Figma 使用結合使用。觸發器包括：「寫入 Figma」、「從程式碼建立 Figma」、「將頁面推送到 Figma」、「將此轉換為 Figma」。app/page並在 Figma 中構建”、“創建屏幕”、“在 Figma 中構建落地頁”、“更新 Figma 屏幕以匹配代碼”。當用戶想要根據代碼或描述在 Figma 中構建或更新完整的頁面、屏幕或視圖時，這是首選的工作流程技能。它通過 search_design_system 發現設計系統組件、變量和樣式，它通過 search_design_system 發現設計系統組件、變量和樣式，它通過 search_design_system 發現設計系統組件，

原文擷取時間:

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

授權：未標明

原始 SKILL.md

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

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

這個 Skill 能做什麼

當任務涉及將應用程式頁面、視圖或多部分佈局轉換為 Figma 時，請將此技能與 Figma 使用結合使用。觸發器包括：「寫入 Figma」、「從程式碼建立 Figma」、「將頁面推送到 Figma」、「將此轉換為 Figma」。app/page並在 Figma 中構建”、“創建屏幕”、“在 Figma 中構建落地頁”、“更新 Figma 屏幕以匹配代碼”。當用戶想要根據代碼或描述在 Figma 中構建或更新完整的頁面、屏幕或視圖時，這是首選的工作流程技能。它通過 search_design_system 發現設計系統組件、變量和樣式，它通過 search_design_system 發現設計系統組件、變量和樣式，它通過 search_design_system 發現設計系統組件，

如何使用：上游操作流程

使用 generate_figma_design 的平行工作流程（僅限 Web 應用）

當從可在瀏覽器中渲染的 Web 應用程式建置畫面時，並行運行兩種方法可獲得最佳效果：首先使用此技能的工作流程（use_figma + 設計系統元件）建立螢幕，然後執行generate_figma_design截取正在運行的 Web 應用程式的像素級完美螢幕截圖。兩個操作完成後：更新 use_figma 輸出，使其與從中截取的像素級完美佈局相符。generate_figma_design截圖。截圖提供了精確的間距、尺寸和視覺效果，而 use_figma 輸出則包含了與設計系統關聯的正確組件實例。

原文片段 · L30 ↗

所需工作流程

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

原文片段 · L44 ↗

步1了解螢幕

在開始使用 Figma 之前，請先了解你要建立的內容：如果是從程式碼構建，請閱讀相關的來源文件，了解頁面結構、各個部分以及使用的元件。確定螢幕的主要部分（例如，頁首、首頁橫幅、內容面板、價格表、常見問題摺疊面板、頁尾）。對於每個部分，列出涉及的 UI 元件（按鈕、輸入框、卡片、導覽列、折疊面板等）。

原文片段 · L48 ↗
原文片段 · js ↗
const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
  const mc = inst.mainComponent;
  const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
  const key = cs ? cs.key : mc?.key;
  const name = cs ? cs.name : mc?.name;
  if (key && !uniqueSets.has(key)) {
    uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
  }
});
return [...uniqueSets.values()];

環境與相依需求

先決條件

必須連接 Figma MCP 伺服器。目標 Figma 檔案必須具有已發佈的包含元件的設計系統（或可存取團隊庫）。

原文片段 · L21 ↗

限制與結果檢查

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

開始使用前

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

Skill 檔案與目錄格式規範 ↗

繼續閱讀原始文件

翻譯與介紹範圍

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

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

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