Figma Generate Library
Reads your existing codebase — component files, design tokens, theme configs — and generates or updates a matching Figma component library. Keeps your Figma file in sync with what's actually shipped: creates components with proper variants, applies your real token values, and structures the library for designer consumption. Use it to bootstrap a Figma library from an existing codebase or to keep an existing library current after code changes.
First-party, by Skills and Agents Co
June 22, 2026
MCP-powered — requires setup
This skill uses external tools via the Model Context Protocol. You'll need to configure the following MCPs before installing.
Setup steps
- Set up each required MCP using the configs below
- Download the skill file below
- Open the skill manager in Claude — in the desktop app underCode → Customize, or on claude.ai underCustomize → Skills
- Click Create a new skill (use + on claude.ai) and upload the downloaded file
- Start a new session — your MCPs and skill will both be active
- Use a trigger phrase to activate
The MCP setup steps above are written for Claude. If your platform also supports MCP, configure the same servers using its own MCP settings. The skill file works either way.
- Download the skill file below
- In ChatGPT, create a Project and attach the file (or paste its contents into the project instructions). For a reusable setup, build a Custom GPT via Explore GPTs → Create and add the file there
- Start a chat in that Project or GPT, then say a trigger phrase to activate it
The MCP setup steps above are written for Claude. If your platform also supports MCP, configure the same servers using its own MCP settings. The skill file works either way.
- Download the skill file below
- Place it at
.cursor/skills/figma-generate-library/SKILL.md(rename the downloaded file toSKILL.md). The shared.agents/skills/figma-generate-library/SKILL.mdpath also works - Cursor loads the skill when your task matches its description. Say a trigger phrase to activate it
The MCP setup steps above are written for Claude. If your platform also supports MCP, configure the same servers using its own MCP settings. The skill file works either way.
- Download the skill file below
- Place it at
.github/skills/figma-generate-library/SKILL.mdin your repository (rename the downloaded file toSKILL.md) - Copilot loads the skill when it is relevant to your task. Say a trigger phrase to activate it
The MCP setup steps above are written for Claude. If your platform also supports MCP, configure the same servers using its own MCP settings. The skill file works either way.
- Download the skill file below
- Place it at
.agents/skills/figma-generate-library/SKILL.mdin your repository (rename the downloaded file toSKILL.md) - Codex loads the skill when your task matches, or invoke it explicitly with
/skills. Say a trigger phrase to activate it
A Gem can't connect to an MCP, so it can't run this skill. This skill needs Figma MCP.
Use the instead.
Required MCPs
Read and write access to Figma files for creating and updating components and styles
View config snippet
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
}
}
}Your skill is downloading.
Get an email when we ship new skills and updates.
You're on the list. We'll email you when new skills drop.