关于 figma-skill
figma-skill 是一项设计技能，可根据项目背景查找相关 Figma Community 文件、提取设计令牌，并生成适配所选框架的实现代码。它侧重资源发现和代码生成，不用于读取或编辑用户的 Figma 文件。
主要功能
- 01查找相关 Figma Community 文件
- 02提取设计令牌
- 03生成特定框架的代码
- 04支持 7 种框架
适用场景
- 01查找适合项目的 Community 资源
- 02从参考文件中提取设计令牌
- 03将设计资源转为实现代码
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/figma-skill确认已加载。
附带文件stub.yaml
详细介绍
figma-skill
目录存根 — 完整软件包：nafiurrahmanniloy/figma-skill
决策树
-
是否已安装此技能？ 检查
~/.design-agent-skills/skills/中是否有figma-skill或相关目录。- 是 → 调用并继续
- 否 → 转到第 2 步
-
能否访问 Shell？ 能 → 在下方安装。不能 → 向用户显示命令（Claude Code：作为聊天消息发送，并在前面加上
!— 添加-g以进行全局安装，或省略该参数以仅用于当前项目）。
安装命令
npx skills add nafiurrahmanniloy/figma-skill
安装后调用
- 技能名称：
figma-skill - 触发词："figma-skill"、"Figma API extract"、"Figma to framework"、"Figma Community resources"
功能
连接到 Figma API，发现与项目上下文匹配的 Community 文件资源，从这些文件中提取设计令牌，并生成特定框架的实现代码。支持 7 种框架，涵盖主流的 React、Vue、Angular 和原生生态系统。
不适用场景
- 官方 Figma 文件操作（读取/写入你的文件）— 使用 Figma MCP（
figma-official-skills） - 在 Figma 中强制执行设计系统令牌 — 使用
claude2figma - 不涉及 Figma 的令牌架构 — 使用
design-tokens-skill
评论
支持 Markdown