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

83%

Does it follow best practices?

Impact

92%

1.00x

Average score across 3 eval scenarios

Securityby

Advisory

Suggest reviewing before use

Quality

Content

77%

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

A well-structured, highly actionable workflow with real tool calls, worked examples, and validation checkpoints. Its weaknesses are redundant motivational/restated sections that bloat the token budget and a monolithic layout that underuses the provided assets and forgoes reference-file splitting.

Suggestions

Remove or shrink the "Understanding Design Implementation" section and deduplicate "Best Practices" against the Required Workflow to reclaim tokens without losing operational value.

Wire the provided assets/ files into the relevant steps (e.g., reference figma.png/icon.svg in Step 4 or the examples) or move worked examples and "Common Issues and Solutions" into a one-level-deep reference file to improve progressive disclosure.

Consider extracting the long worked examples (button, dashboard) into an EXAMPLES.md referenced from the main workflow so the SKILL.md stays a lean overview.

Dimension	Reasoning	Score
Conciseness	The body is mostly operational and specific to Figma MCP tooling, but it includes unnecessary padding — the motivational "Understanding Design Implementation" section and the "Best Practices" section largely restate principles already in the Required Workflow — so it could be tightened.	2 / 3
Actionability	Provides concrete, executable tool signatures with arguments (get_design_context, get_screenshot, get_metadata), worked examples with real fileKey/nodeId values, and a concrete validation checklist — copy-paste ready guidance rather than pseudocode.	3 / 3
Workflow Clarity	A seven-step ordered workflow with an explicit "Do not skip steps" directive, a Step 7 validation checkpoint with a checklist, and a feedback loop for the truncated-response case (fall back to get_metadata then fetch child nodes individually).	3 / 3
Progressive Disclosure	The skill is a single ~255-line monolith with all detail inline; the provided assets/ bundle (figma-small.svg, figma.png, icon.svg) is not referenced anywhere in the body, and there are no one-level-deep reference files for advanced material, so content that could be split stays inline. Because it exceeds 50 lines, the small-skill exception does not apply.	2 / 3
	Total	10 / 12 Passed

Description

90%

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, third-person description that pairs a clear capability statement with explicit natural-language triggers and useful deflection to sibling skills. Its only weakness is that it names a single overarching action rather than enumerating several concrete sub-tasks.

Dimension	Reasoning	Score
Specificity	Names the domain and one concrete action — "Translates Figma designs into production-ready application code with 1:1 visual fidelity" — but does not list multiple distinct actions like the score-3 anchor; it is a single translation capability rather than several enumerated tasks.	2 / 3
Completeness	Clearly answers both what ("Translates Figma designs into production-ready application code") and when via an explicit "Use when…" trigger clause, plus a deflection redirect to figma-use for canvas writes.	3 / 3
Trigger Term Quality	Covers natural phrases users would say — "implement design", "generate code", "implement component", "provides Figma URLs", "build components matching Figma specs" — giving good coverage of likely user language.	3 / 3
Distinctiveness Conflict Risk	Occupies a clear niche (Figma design → code implementation) with distinct triggers and explicit redirects to sibling skills (figma-use, figma-generate-design, etc.), making wrong-skill invocation unlikely.	3 / 3
	Total	11 / 12 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: 4 suspicious	Warning

	Total	15 / 16 Passed

Repository: openai/skills
Path: skills/.curated/figma-implement-design/SKILL.md
Commit: 49f948f

Reviewed: 30 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.