Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.
Passed 16 of 22 test cases with the skill, and 15 of 22 without it.
2 fixed14 passed either way5 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
Generate a disabled text input field in Figma from the React code `<Input label="Email" disabled={true} placeholder="[email protected]" />`. Should this be drawn as a group of gray rectangle and text layers?
| Checked | Without skill | With skill |
|---|---|---|
| uses the design system text input component set | Missed | Passed |
| selects the disabled variant state property for the component instance | Missed | Passed |
The instructions your model reads when the skill loads.
Curated from Figma's MCP server guide.
Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.
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-generate-design) or with
one of the trigger phrases listed in this skill's frontmatter.
test cases passed, vs 15 / 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.