·figma-design-extraction
*

figma-design-extraction

從 Figma 檔案中提取設計標記、螢幕結構和視覺參考。每當對話中出現 Figma.com URL 時,當有人提到 Figma 令牌、變數、設計系統提取或螢幕截圖時,請使用。也可在呼叫 get_variable_defs、get_design_context、get_metadata 或 get_screenshot 時使用 — 此技能定義如何有效地使用它們。觸發諸如“從Figma獲取”、“提取設計”、“Figma變數”、“來自Figma的設計令牌”、“捕獲螢幕”或任何figma.com/design連結之類的短語。即使用戶只是在沒有說明的情況下貼上 Figma 鏈接,也可以使用此技能對其進行解析並決定提取哪些內容。

10安裝·2熱度·@petbrains

安裝

$npx skills add https://github.com/petbrains/mvp-builder --skill figma-design-extraction

如何安裝 figma-design-extraction

透過命令列快速安裝 figma-design-extraction AI 技能到你的開發環境

  1. 開啟終端機: 開啟你的終端機或命令列工具(如 Terminal、iTerm、Windows Terminal 等)
  2. 執行安裝指令: 複製並執行以下指令:npx skills add https://github.com/petbrains/mvp-builder --skill figma-design-extraction
  3. 驗證安裝: 安裝完成後,技能將自動設定到你的 AI 程式設計環境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

來源:petbrains/mvp-builder。

SKILL.md

查看原文

Extract design tokens, screen structure, and visual references from Figma files.

Process: CHECK → PARSE → DISCOVER → EXTRACT → ORGANIZE

The goal is to pull structured, source-tracked design data from Figma for use in design-setup pipelines, conflict resolution, and downstream code generation. Every extracted value carries its source tag — this matters because downstream consumers (like design-setup Phase 3) need to know whether a token came from an explicit Figma Variable definition or was inferred from applied styles, since that affects conflict...

從 Figma 檔案中提取設計標記、螢幕結構和視覺參考。每當對話中出現 Figma.com URL 時,當有人提到 Figma 令牌、變數、設計系統提取或螢幕截圖時,請使用。也可在呼叫 get_variable_defs、get_design_context、get_metadata 或 get_screenshot 時使用 — 此技能定義如何有效地使用它們。觸發諸如“從Figma獲取”、“提取設計”、“Figma變數”、“來自Figma的設計令牌”、“捕獲螢幕”或任何figma.com/design連結之類的短語。即使用戶只是在沒有說明的情況下貼上 Figma 鏈接,也可以使用此技能對其進行解析並決定提取哪些內容。 來源:petbrains/mvp-builder。

可引用資訊

為搜尋與 AI 引用準備的穩定欄位與指令。

安裝指令
npx skills add https://github.com/petbrains/mvp-builder --skill figma-design-extraction
分類
*創意媒體
認證
收錄時間
2026-03-10
更新時間
2026-03-10

Browse more skills from petbrains/mvp-builder

快速解答

什麼是 figma-design-extraction?

從 Figma 檔案中提取設計標記、螢幕結構和視覺參考。每當對話中出現 Figma.com URL 時,當有人提到 Figma 令牌、變數、設計系統提取或螢幕截圖時,請使用。也可在呼叫 get_variable_defs、get_design_context、get_metadata 或 get_screenshot 時使用 — 此技能定義如何有效地使用它們。觸發諸如“從Figma獲取”、“提取設計”、“Figma變數”、“來自Figma的設計令牌”、“捕獲螢幕”或任何figma.com/design連結之類的短語。即使用戶只是在沒有說明的情況下貼上 Figma 鏈接,也可以使用此技能對其進行解析並決定提取哪些內容。 來源:petbrains/mvp-builder。

如何安裝 figma-design-extraction?

開啟你的終端機或命令列工具(如 Terminal、iTerm、Windows Terminal 等) 複製並執行以下指令:npx skills add https://github.com/petbrains/mvp-builder --skill figma-design-extraction 安裝完成後,技能將自動設定到你的 AI 程式設計環境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

這個 Skill 的原始碼在哪?

https://github.com/petbrains/mvp-builder