C✳CODEZ.WIN
🌐 繁體中文

Skill 多語言閱讀指南

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

將 Figma 設計稿轉換為可用於生產環境的應用程式程式碼1:1視覺保真度。用於從 Figma 檔案實作 UI 程式碼,或當使用者提及「實作設計」、「產生程式碼」、「實作元件」、提供 Figma URL 或要求建置符合 Figma 規格的元件。對於透過 Figma 畫布寫入的內容,請使用此功能。use_figma, 使用figma-use。

原文擷取時間:

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

授權:授權檔案待核驗

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

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

這個 Skill 能做什麼

將 Figma 設計稿轉換為可用於生產環境的應用程式程式碼1:1視覺保真度。用於從 Figma 檔案實作 UI 程式碼,或當使用者提及「實作設計」、「產生程式碼」、「實作元件」、提供 Figma URL 或要求建置符合 Figma 規格的元件。對於透過 Figma 畫布寫入的內容,請使用此功能。use_figma, 使用figma-use。

如何使用:上游操作流程

所需工作流程

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

原文片段 · L29 ↗

概述

這項技能提供了一個結構化的工作流程,可以將 Figma 設計稿以像素級精度轉換為可用於生產環境的程式碼。它確保與 Figma MCP 伺服器的一致集成,以及設計令牌的正確使用。1:1與設計在視覺上保持一致。

原文片段 · L8 ↗

步2取得設計上下文

跑步get_design_context透過擷取的檔案鍵和節點 ID,可以提供結構化數據,包括:佈局屬性(自動佈局、約束、尺寸)、顏色值和設計標記。

原文片段 · L60 ↗
原文片段 · ↗
get_design_context(fileKey=":fileKey", nodeId="1-2")

環境與相依需求

先決條件

Figma MCP 伺服器必須已連線且可存取。使用者必須提供格式為以下格式的 Figma URL:https://figma.com/design/:fileKey/:fileName?node-id=1-2

原文片段 · L20 ↗

限制與結果檢查

代碼品質

避免硬編碼值-提取為常數或設計標記。保持組件的可組合性和可重複使用性。

原文片段 · L156 ↗

開始使用前

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

Skill 檔案與目錄格式規範 ↗

繼續閱讀原始文件

翻譯與介紹範圍

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

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

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