figma-implement-design

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

1.00x

Quality

67%

Does it follow best practices?

Impact

92%

1.00x

Average score across 3 eval scenarios

Securityby

Advisory

Suggest reviewing before use

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/.curated/figma-implement-design/SKILL.md

Quality

Discovery

100%

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

This is a strong skill description that clearly communicates what the skill does (translates Figma designs to production code), when to use it (with explicit trigger terms and scenarios), and how it differs from a related skill (figma-use for canvas writes). It uses third person voice, is concise, and provides excellent trigger term coverage.

Dimension	Reasoning	Score
Specificity	Lists concrete actions: 'Translates Figma designs into production-ready application code with 1:1 visual fidelity' and specifies the domain clearly. It also distinguishes itself from a related skill ('figma-use') for canvas writes.	3 / 3
Completeness	Clearly answers both 'what' (translates Figma designs into production-ready code with 1:1 fidelity) and 'when' (explicit 'Use when...' clause with multiple trigger scenarios). Also includes a disambiguation note for a related skill.	3 / 3
Trigger Term Quality	Includes strong natural trigger terms users would say: 'implement design', 'generate code', 'implement component', 'Figma URLs', 'Figma specs', 'build components matching Figma'. These cover a good range of natural phrasings.	3 / 3
Distinctiveness Conflict Risk	Clearly scoped to Figma-to-code translation, with explicit disambiguation from the 'figma-use' skill for canvas writes. The trigger terms are specific to Figma design implementation, making conflicts with other skills unlikely.	3 / 3
	Total	12 / 12 Passed

Implementation

35%

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

The skill provides a well-structured workflow with clear step sequencing and good MCP tool usage examples, but is undermined by significant verbosity — particularly the 'Understanding Design Implementation' section, redundant best practices, and explanatory prose that doesn't add actionable value. The core translation step (Figma output → project code) lacks concrete code examples, making the most important part of the skill the least actionable.

Suggestions

Remove the 'Understanding Design Implementation' section entirely and trim the overview to 1-2 sentences — these add no actionable value for Claude.

Add a concrete before/after code example in Step 5 showing Figma MCP output (React + Tailwind) being translated to a project's conventions (e.g., styled-components or CSS modules).

Add an explicit feedback loop to Step 7: 'If validation fails → identify discrepancy → fix → re-validate against screenshot' rather than just a checklist.

Move 'Common Issues and Solutions', 'Implementation Rules', and 'Best Practices' to a separate reference file to keep SKILL.md focused on the core workflow.

Dimension	Reasoning	Score
Conciseness	Significantly verbose with sections that explain things Claude already knows ('Understanding Design Implementation' is pure filler, 'Best Practices' restates workflow steps, the overview paragraph is unnecessary). The 'For designers/developers/teams' section and extensive prose around simple concepts waste tokens. The skill could be cut by 40-50% without losing actionable content.	1 / 3
Actionability	Provides concrete MCP tool calls (get_design_context, get_screenshot, get_metadata) with parameter examples, and the two worked examples are helpful. However, there's no actual executable code for the translation step (Step 5) — the core task of converting Figma output to project code is described abstractly with 'key principles' rather than concrete code examples showing before/after transformation.	2 / 3
Workflow Clarity	The 7-step workflow is clearly sequenced and includes a validation checklist in Step 7. However, there's no feedback loop for validation failures — if the checklist items don't pass, there's no explicit 'fix and re-validate' cycle. The truncation fallback in Step 2 is good, but the core validation step lacks error recovery guidance.	2 / 3
Progressive Disclosure	The skill boundaries section effectively points to related skills with clear links. However, the main content is monolithic — the 'Common Issues and Solutions', 'Best Practices', and 'Implementation Rules' sections could be in separate reference files. The 'Additional Resources' links to external docs are appropriate but the inline content is too long for a single SKILL.md.	2 / 3
	Total	7 / 12 Passed

Validation

100%

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 — 11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository: openai/skills
Commit: 4c4058e

Reviewed: 2 days 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.