Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'code this up from Figma', 'design to code', or a figma.com design URL provided alongside a codebase. Encodes the workflow for reading a node out of Figma with get_design_context and adapting its reference output to the target project — reusing existing components, tokens, and conventions, an
.claude/skills/devin-axis-figma-design-to-code/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-05 | ✗→✓ | ▲ Improved | 13% | 0% |
| case-06 | ✗→✓ | ▲ Improved | 104% | 0% |
| case-15 | ✗→✓ | ▲ Improved | -36% | 0% |
| case-16 | ✗→✓ | ▲ Improved | -37% | 0% |
| case-20 | ✗→✓ | ▲ Improved | -35% | 0% |
Use this skill to turn a Figma design into code in a target codebase. This is the read-FROM-Figma direction: pull design context out of Figma with get_design_context, then adapt it into the project's real stack. For the reverse direction — building or updating a design in Figma from code — use figma-generate-design instead.
This skill owns the workflow for design-to-code. Parameter mechanics (nodeId / fileKey / branchKey extraction, URL parsing, format/query options, response shape) live on the get_design_context tool description itself — follow them there.
get_design_context on the target node before writing any code. It is your primary tool — a single call returns reference code, a screenshot, and contextual hints.get_metadata or get_screenshot as a substitute. Use them only to orient (e.g. picking a node) or to validate, not in place of get_design_context.Apply the hints in this order — earlier sources override later ones:
get_design_context error, STOP and read the message before retrying.node-id (a file-only URL), ask the user for a node-specific URL — You MUST NOT guess or pass an empty nodeId.get_design_context can still provide context.| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 25,937 | 16,277 | -37% | 1 | 1 | 0% | 4,139 | 1,050 | -75% | 0 | 0 | — |
case-02 | fail→fail | 16,834 | 16,556 | -2% | 1 | 1 | 0% | 2,296 | 1,118 | -51% | 0 | 0 | — |
case-18 | fail→fail | 16,933 | 10,450 | -38% | 1 | 1 | 0% | 1,925 | 1,630 | -15% | 0 | 0 | — |
case-03 | fail→fail | 18,377 | 17,295 | -6% | 1 | 1 | 0% | 2,705 | 1,179 | -56% | 0 | 0 | — |
case-04 | pass→pass | 12,041 | 9,842 | -18% | 1 | 1 | 0% | 1,103 | 1,610 | +46% | 0 | 0 | — |
case-05 | fail→pass | 12,372 | 8,400 | -32% | 1 | 1 | 0% | 1,091 | 1,234 | +13% | 0 | 0 | — |
case-06 | fail→pass | 10,606 | 10,401 | -2% | 1 | 1 | 0% | 828 | 1,686 | +104% | 0 | 0 | — |
case-07 | pass→pass | 10,997 | 8,845 | -20% | 1 | 1 | 0% | 980 | 1,503 | +53% | 0 | 0 | — |
case-08 | pass→fail | 10,946 | 9,137 | -17% | 1 | 1 | 0% | 928 | 1,352 | +46% | 0 | 0 | — |
case-09 | pass→pass | 19,886 | 8,555 | -57% | 1 | 1 | 0% | 2,781 | 1,273 | -54% | 0 | 0 | — |
case-10 | pass→pass | 14,494 | 10,153 | -30% | 1 | 1 | 0% | 1,621 | 1,613 | -0% | 0 | 0 | — |
case-11 | pass→pass | 14,353 | 8,525 | -41% | 1 | 1 | 0% | 1,538 | 1,245 | -19% | 0 | 0 | — |
case-12 | pass→pass | 8,766 | 8,250 | -6% | 1 | 1 | 0% | 589 | 1,182 | +101% | 0 | 0 | — |
case-13 | pass→pass | 20,132 | 11,279 | -44% | 1 | 1 | 0% | 2,571 | 1,584 | -38% | 0 | 0 | — |
case-14 | pass→pass | 10,894 | 8,385 | -23% | 1 | 1 | 0% | 966 | 1,271 | +32% | 0 | 0 | — |
case-15 | fail→pass | 23,419 | 12,686 | -46% | 1 | 1 | 0% | 3,068 | 1,970 | -36% | 0 | 0 | — |
case-16 | fail→pass | 16,364 | 7,818 | -52% | 1 | 1 | 0% | 1,874 | 1,174 | -37% | 0 | 0 | — |
case-17 | pass→pass | 11,667 | 9,825 | -16% | 1 | 1 | 0% | 1,078 | 1,494 | +39% | 0 | 0 | — |
case-19 | pass→pass | 11,880 | 7,764 | -35% | 1 | 1 | 0% | 1,046 | 1,148 | +10% | 0 | 0 | — |
case-20 | fail→pass | 16,546 | 8,040 | -51% | 1 | 1 | 0% | 1,724 | 1,120 | -35% | 0 | 0 | — |
case-21 | pass→pass | 22,920 | 20,380 | -11% | 1 | 1 | 0% | 3,224 | 3,779 | +17% | 0 | 0 | — |
case-22 | pass→pass | 12,686 | 11,051 | -13% | 1 | 1 | 0% | 1,382 | 1,659 | +20% | 0 | 0 | — |
case-23 | fail→fail | 36,882 | 15,989 | -57% | 1 | 1 | 0% | 7,422 | 1,142 | -85% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted, and 19 counted toward the lift figure. The other 4 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +17 percentage points is the difference between those two pass rates over the 19 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.