Figma Implement Design
Point this skill at a Figma file, frame, or component and it produces pixel-perfect, production-ready code — HTML/CSS, React, Vue, or Tailwind — that faithfully reproduces the design. It reads layout, spacing, typography, colors, and assets directly from the Figma file via MCP, then generates clean, semantic markup with responsive considerations. Use it when you have a finalized design and need to ship code that matches exactly.
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-implement-design/SKILL.md(rename the downloaded file toSKILL.md). The shared.agents/skills/figma-implement-design/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-implement-design/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-implement-design/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 access to Figma files, frames, components, and design tokens
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.