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.
What it does
Claude Code skill that builds a Figma design system from your codebase. Reads components and tokens through the Figma MCP, then creates real variants.
How to use this
Once it is installed, this skill picks itself up. You do not need to name it.
- Created by
- Skills and Agents Co
- Category
- Engineering
Run this on Skills and Agents
You can run the skill on Skills and Agents by creating an account. You don't need to install anything. We provide the model and tokens. Your connected tools and company brain are ready to use.
Skills give you best practices and templates to get the most out of your AI
Add this skill
Pick where you want it. Nothing to configure after.
These install links go live once the signup flow ships. We don't have a source link for this skill yet.
Not sure which? See the install guide.
Share this skill
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.
Create a free account and the platform does the rest:
- Get an email the moment this skill updates
- See every skill and agent you've installed, in one place
- Get your next recommendation based on what you actually use
No credit card. Takes about a minute.