Name: figma-design-to-code
Rating: 67.2 (1 reviews)
Author: figma

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.

Quality

81%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Quality

Content

81%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.

A well-structured, actionable, and concise skill body with a clear workflow and explicit error-recovery feedback loops. Main improvement opportunity is splitting the detailed image/icon reproduction rules into a separate reference file to tighten the overview.

Suggestions

Move the detailed image/icon reproduction rules (section 5) into a references file (e.g. IMAGES.md) and keep a brief pointer in SKILL.md to reduce overview length.

Trim the redundant introductory paragraph about where parameter mechanics live, since it restates information available on the tool description.

Add a brief validation step confirming the generated code compiles or matches the screenshot before declaring the task complete.

Dimension	Reasoning	Score
Conciseness	Mostly lean directive prose that does not re-explain concepts Claude already knows; minor redundancy in the intro ('This skill owns the workflow... Parameter mechanics live on the tool description') could be trimmed.	4 / 5
Actionability	Gives concrete, specific guidance (numbered workflow, prioritized hint order, exact sizing rules like 'size-[24px]', 'overflow-clip', '100%'); as an instruction-only skill it is actionable without code, with only minor gaps.	4 / 5
Workflow Clarity	Clear five-step sequenced workflow plus a dedicated Error Recovery section with explicit validation/feedback loops (STOP and read the error before retrying, ask the user for a node-specific URL rather than guessing, retry against a smaller node on timeout).	5 / 5
Progressive Disclosure	Well-organized into clear sections (Direction and Scope, Workflow, Error Recovery) with a single one-level cross-skill reference to figma-generate-design; slightly above the 50-line simple-skill threshold and could split the detailed image/icon rules into a reference file.	4 / 5
	Total	17 / 20 Passed

Description

82%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.

A strong, trigger-rich description with explicit 'what' and 'when' guidance and clear distinctiveness from sibling skills. Its main weakness is the second-person voice and mild over-claiming ('MANDATORY prerequisite', 'must NOT be skipped').

Suggestions

Rewrite in third person (e.g. 'Invoked before calling get_design_context...') to avoid the second-person specificity penalty.

Trim emphatic filler ('MANDATORY prerequisite', 'must NOT be skipped') which reads as over-claiming without adding trigger value.

Add a couple more natural trigger synonyms (e.g. 'Figma to React', 'convert Figma to code') for broader keyword coverage.

Dimension	Reasoning	Score
Specificity	Names the domain and several concrete actions ('implement, build, port, or code up a Figma design as code'), but the description is written in second person ('you MUST invoke', 'You MUST trigger'), which per the rubric reduces the specificity score by one from a base of 4.	3 / 5
Completeness	Explicitly states both what (implement Figma designs as code, provides instructions and steps) and when (trigger whenever the user wants to implement/build/port/code a Figma design, plus concrete example prompts).	5 / 5
Trigger Term Quality	Provides natural example prompts users would say ('implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code') with good synonym coverage, though a few common phrasings are absent.	4 / 5
Distinctiveness Conflict Risk	Occupies a clear niche (Figma design → code) and explicitly distinguishes from the reverse direction (figma-generate-design), giving it minimal conflict risk.	5 / 5
	Total	17 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
relative_links	Relative link issues: 1 suspicious	Warning

	Total	15 / 16 Passed

Repository: figma/mcp-server-guide
Path: skills/figma-design-to-code/SKILL.md
Commit: ae7e5e5

Reviewed: ~16 hours ago

Table of Contents

Discovery Implementation Validation

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.