SS

southleft/skills-for-figma

开发工具

本页由 AI 翻译,技术细节请以原文为准。 查看原文

20 stars 1 forks 质量 63 趋势 14MIT

原生Figma MCP服务器的开源代理技能——设计令牌、组件、无障碍、幻灯片和FigJam。

概览

一系列开源代理技能集合。每个技能都教导代理(Claude、Codex、Gemini、Copilot)在Figma中执行针对性的设计系统任务——导出和导入设计令牌、分析组件集、替换WCAG和设计系统合规性、可访问性审计、构建幻灯片和FigJam内容等。 每个技能都通过Figma MCP的use_figma工具(插件API执行)运行,不需要计划门槛API——令牌读取使用插件API,因此适用于任何Figma计划。 这些技能是专注于 Figma-MCP 的一个子集,在这里重新包装并以社区友好的名称命名。完整的集合(包括基于 REST-API 的版本历史、变更日志、责任和注释技能)都存放在该仓库中。 - 一个代理主机,连接了(例如 Claude Code、Claude Desktop、Codex、Gemini)。- 官方技能,教授 use_figma 插件 API 约定。这里的每个技能都先加载。

概述(AI 翻译)

为原生Figma MCP服务器准备的开源代理技能集合。 每个技能都会教导一个代理(Claude、Codex、Gemini、Copilot)执行一个聚焦的设计系统任务 Figma — 导出和导入设计代币,分析组件集,为 WCAG 和设计系统进行 linting(填充) 合规、无障碍审计、构建幻灯片和FigJam内容等。

每个技能都通过Figma MCP的use_figma工具(插件API执行)运行,无需计划门槛 API——令牌读取使用插件API,因此适用于任何Figma计划。

这些技能是 southleft/figma-console-mcp-技能 中一个以 Figma-MCP 为重点的子集, 在这里重新打包,使用了社区友好的名称。完整合集(包括基于REST-API的版本历史, 变更日志、指责和注释技能)都存放在那个仓库里。

要求

  • 连接Figma MCP服务器的代理主机(例如Claude Code、Claude Desktop、Codex、Gemini)。
  • 官方的**figma-use**技能,教授use_figma插件API约定。这里所有技能 先装载。

安装

npx — 任何代理(Claude Code、Codex、Cursor、Gemini CLI 等)

本页由 AI 翻译,技术细节请以原文为准。

README

以下为原文 README 节选,完整内容请查看原文。

Skills for Figma

A collection of open-source agent skills for the native Figma MCP server. Each skill teaches an agent (Claude, Codex, Gemini, Copilot) to perform a focused design-systems task in Figma — exporting and importing design tokens, analyzing component sets, linting for WCAG and design-system compliance, auditing accessibility, building Slides and FigJam content, and more.

Every skill runs through the Figma MCP’s use_figma tool (Plugin API execution) and requires no plan-gated APIs — token reads use the Plugin API, so they work on any Figma plan.

These skills are a Figma-MCP-focused subset of southleft/figma-console-mcp-skills, repackaged here with community-friendly names. The full collection (including REST-API-based version history, changelog, blame, and comments skills) lives in that repository.

Requirements

  • An agent host with the Figma MCP server connected (e.g. Claude Code, Claude Desktop, Codex, Gemini).
  • The official figma-use skill, which teaches the use_figma Plugin API conventions. Every skill here loads it first.

Install

npx — any agent (Claude Code, Codex, Cursor, Gemini CLI, …)

npx skills add southleft/skills-for-figma          # install all skills
npx skills add southleft/skills-for-figma --list   # preview without installing
npx skills add southleft/skills-for-figma --skill export-tokens-figma   # just one

Powered by the skills CLI — it detects your agent and drops each skill into the right directory.

Claude Code plugin (one command)

/plugin marketplace add southleft/skills-for-figma
/plugin install skills-for-figma@skills-for-figma

Manual (any host)

git clone https://github.com/southleft/skills-for-figma.git
cd skills-for-figma
cp -R skills/* ~/.claude/skills/

For other hosts, drop the folders from skills/ into that tool’s skills directory (e.g. .codex/skills/, .gemini/skills/). Once installed, an agent auto-selects a skill from your request, or you can invoke one explicitly with /skill-name.

Skills

Tokens & variables

  • export-tokens-figma — Export Figma variables to DTCG, CSS custom properties, Tailwind, SCSS, TypeScript, JSON, Style Dictionary, or Tokens Studio, with multi-mode and alias resolution.
  • import-tokens-figma — Create and update Figma variables from DTCG token files, with multi-mode values, alias resolution, and non-destructive in-place matching.
  • setup-design-tokens-figma — Bootstrap a complete token system (a collection, its modes, and all variables with per-mode values) in one atomic operation.
  • manage-variables-figma — Create, update, rename, and delete variables, collections, and modes, including batch create/update.
在 GitHub 查看完整 README

安装

npx skills add southleft/skills-for-figma # install all skills
新手?先看 mcpskill.org 教程 →