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.
What it does
Translate Figma designs into production-ready code with 1:1 fidelity
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 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.
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.