Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →zzafergok/figma-implement-skill
Translate Figma designs into production-ready code with 1:1 visual fidelity using the Figma MCP workflow.
Passed 20 of 22 test cases with the skill, and 11 of 22 without it.
and 7 more in the full report
9 fixed12 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
One of 9 test cases the skill fixed. Same model, same prompt, with and without the skill.
During visual QA of an implemented UI component, a developer notices that section margins look slightly off compared to the target design. What artifact generated during step 2 of the workflow should be used for side-by-side visual comparison?
| Checked | Without skill | With skill |
|---|---|---|
| Directs comparing the rendered component against the screenshot obtained from get_screenshot. | Missed | Passed |
The instructions your model reads when the skill loads.
A guide to converting Figma designs into pixel-perfect code using the Figma MCP Server.
Requirement: The Figma MCP Server connection must be active.
https://figma.com/design/ :fileKey/:fileName?node-id=1-2
fileKey: The segment after /design/ in the URL
nodeId: The value of the node-id parameter (1-2)
Example:
https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15
→ fileKey: kL9xQn2VwM8pYrTb4ZcHjF
→ nodeId: 42-15
get_design_context(fileKey=":fileKey", nodeId="1-2")
test cases passed, vs 11 / 22 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.