Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.
Passed 11 of 21 test cases with the skill, and 9 of 21 without it.
and 1 more in the full report
4 fixed7 passed either way9 still failing2 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
Our marketing designer posted a Figma frame for a new hero section (https://www.figma.com/design/xyz/Marketing?node-id=101-200). Instead of giving me placeholder HTML, build the exact Tailwind CSS and React implementation for this frame.
| Checked | Without skill | With skill |
|---|---|---|
| The response processes the hero section Figma node link. | Missed | Passed |
| The response generates a React component styled with Tailwind CSS for the hero section. | Passed | Passed |
The instructions your model reads when the skill loads.
Curated from Figma's MCP server guide.
Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.
figmaThis catalogue entry advertises the skill in OpenDesign so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory:
# Inspect the upstream README for exact paths
open https://github.com/figma/skills
Then ask the agent to invoke this skill by name (figma-implement-design) or with
one of the trigger phrases listed in this skill's frontmatter.
test cases passed, vs 9 / 21 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.