·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