CtrlK
BlogDocsLog inGet started
Tessl Logo

figma-design-to-code

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.

69

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

The canonical home for this skill is figma-design-to-code in figma/mcp-server-guide

SKILL.md
Quality
Evals
Security

Quality

Content

85%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a well-sequenced, self-contained workflow with concrete rules, an explicit priority order, and genuine error-recovery feedback loops, and it correctly delegates parameter mechanics instead of duplicating them. It loses points only on mild emphasis redundancy and the lack of a worked example of a get_design_context call or its adapted output.

Suggestions

Trim the duplicated mandate structure — state each rule once instead of a 'You MUST X' sentence followed by a restating elaboration (e.g., merge the two sentences in steps 1–3).

Add one short worked example: a minimal get_design_context call on a node URL and a snippet of its return being adapted to a project component, covering the most common path end-to-end.

Move the skillNames logging-parameter paragraph into a brief note at the end (or the workflow's step 1) — it is invocation bookkeeping, not workflow guidance, and interrupts the direction/scope framing.

DimensionReasoningScore

Conciseness

Quote: 'It is your primary tool — a single call returns reference code, a screenshot, and contextual hints' — information Claude cannot know elsewhere, so most tokens earn their place; but repeated emphasis ('You MUST' appears ~12 times, 'must NOT be skipped' style framing, 'This is a logging parameter used to track skill usage — it does not affect execution') is minor padding that could be trimmed, matching anchor 4. Not 5 because the duplicated mandate structure restates each rule twice (the MUST sentence plus the elaboration); not 3 because there is no over-explanation of concepts Claude already knows.

4 / 5

Actionability

Quote: 'never hand-write or inline <svg>/<path>', 'a fixed-size container (icons are usually square, e.g. size-[24px], overflow-clip) with BOTH width and height set', 'expires in ~7 days — download-and-commit the exact asset bytes' — concrete, executable guidance with specific class names and a 5-level hint priority; as an instruction-only skill the absence of code is not penalized, but a couple of gaps remain (no example get_design_context call or adapted-output pattern; 'wire a dynamic content image to the project's data source' is high-level), matching anchor 4. Not 5 because the common cases (a sample call and one adapted component example) are not shown; not 3 because the guidance is directly executable, not pseudocode.

4 / 5

Workflow Clarity

Quote: a numbered 5-step Workflow ('Call get_design_context first' → 'Treat the output as a reference' → 'Reuse what the project already has' → 'Honor the response hints by priority' → 'Reproduce images and icons faithfully') plus an explicit Error Recovery section ('STOP and read the message before retrying', 'retry against a smaller node', 'ask the user for a node-specific URL'), matching anchor 5's clear sequence with feedback loops for error recovery. Not 4 because error-recovery checkpoints are explicit and the hint priority order is unambiguous; no destructive/batch operations exist, so the validation cap does not apply.

5 / 5

Progressive Disclosure

The ~55-line body is well-organized into Direction and Scope, Workflow, and Error Recovery, needs no bundle files (none exist), and its single reference — 'use [figma-generate-design](../figma-generate-design/SKILL.md) instead' — is one level deep and clearly signaled for direction disambiguation; parameter mechanics are correctly delegated to the tool description ('live on the get_design_context tool description itself — follow them there'), matching the simple-skill exception (well-organized sections, no external references needed) at anchor 5.

5 / 5

Total

18

/

20

Passed

Description

85%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description excels at triggering: exhaustive natural phrasings, explicit when-conditions, and a clearly bounded Figma design-to-code niche. Its weaknesses are second-person voice (penalized per rubric) and a vague, meta-level capability statement that never says what the skill concretely does (pull design context, adapt it to the project's stack).

Suggestions

Convert to third person per the rubric: replace 'you MUST invoke this skill' with 'Invoke this skill before calling get_design_context'.

State concrete capabilities instead of the meta 'provides critical instructions and steps' — e.g., 'Pulls design context from Figma via get_design_context, adapts the returned reference code to the target stack, and reuses existing project components and tokens'.

Trim redundancy ('must NOT be skipped', 'critical') — the MANDATORY framing repeats the same instruction three times without adding information.

DimensionReasoningScore

Specificity

The description names the domain ('implement Figma designs in code') but the capability statement is generic — 'provides critical instructions and steps to the agent' — with no concrete actions like fetching design context or adapting to a project stack, matching anchor 3 ('names domain and 1-2 concrete actions'); the rubric's second-person voice penalty ('you MUST invoke this skill', 'you MUST trigger') reduces it to 2. Not 1 because the domain and invocation actions are clearly stated, unlike 'Helps with documents'.

2 / 5

Completeness

Quote: 'This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code' (explicit what) and 'You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code' (explicit when with concrete trigger phrases), matching anchor 5. Not 4 because the 'when' clause is fully explicit with enumerated example prompts rather than merely adequate.

5 / 5

Trigger Term Quality

Quote: 'implement, build, port, or code up a Figma design as code' plus example prompts 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code' — comprehensive natural phrasings, synonyms, and variations users would actually say, matching anchor 5. Not 4 because the example-prompt list explicitly covers multiple synonymous phrasings beyond a single keyword set.

5 / 5

Distinctiveness Conflict Risk

Quote: 'implement, build, port, or code up a Figma design as code' and 'must NOT be skipped' before calling `get_design_context` — a clear niche (Figma design-to-code direction) with distinct triggers tied to a named tool, matching anchor 5's minimal conflict risk. Not 4 because nothing in the description overlaps with generic design or document skills; every trigger is Figma-specific.

5 / 5

Total

17

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 suspicious

Warning

Total

15

/

16

Passed

Repository
openai/plugins
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.