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`.
81
73%
Does it follow best practices?
Impact
92%
1.00xAverage score across 3 eval scenarios
Advisory
Suggest reviewing before use
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/.curated/figma-implement-design/SKILL.mdQuality
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 defines its purpose (Figma-to-code translation), includes comprehensive trigger terms users would naturally use, and explicitly addresses both what the skill does and when to use it. The disambiguation from the related 'figma-use' skill is a notable strength that reduces conflict risk. The description is concise yet thorough.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists concrete actions: 'Translates Figma designs into production-ready application code with 1:1 visual fidelity' and specifies implementing UI code, generating code, implementing components, and building components matching Figma specs. | 3 / 3 |
Completeness | Clearly answers both 'what' (translates Figma designs into production-ready code with 1:1 fidelity) and 'when' (explicit 'Use when...' clause listing multiple trigger scenarios). Also includes a disambiguation note for a related skill. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms users would say: 'implement design', 'generate code', 'implement component', 'Figma URLs', 'Figma specs', 'Figma files', 'build components'. Also distinguishes from a related skill ('figma-use') to reduce confusion. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with a clear niche (Figma-to-code translation) and explicitly disambiguates from the related 'figma-use' skill for canvas writes, reducing conflict risk significantly. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
47%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, clearly sequenced workflow for Figma-to-code implementation with good boundary definitions and fallback handling. However, it is significantly too verbose — roughly half the content restates obvious concepts or provides motivational filler that wastes tokens. The most critical step (actual code translation) lacks concrete executable examples, relying instead on abstract principles.
Suggestions
Cut the 'Understanding Design Implementation' section entirely and trim 'Best Practices' to 2-3 bullet points — these add no actionable information Claude doesn't already know.
Add a concrete code example in Step 5 showing how to translate Figma MCP output (e.g., Tailwind classes) into a project's design system tokens, rather than listing abstract principles.
Move 'Common Issues and Solutions' and 'Implementation Rules' into a separate reference file (e.g., REFERENCE.md) and link to it, keeping SKILL.md as a lean workflow overview.
Remove explanatory phrases like 'This screenshot serves as the source of truth for visual validation' and 'This provides the structured data including' — Claude can infer tool output purposes from context.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is excessively verbose at ~200+ lines. It explains concepts Claude already knows (what design tokens are, what pixel-perfect means, what WCAG is), includes an unnecessary 'Understanding Design Implementation' section that adds zero actionable value, and pads with best practices and common issues that largely restate earlier content. The 'For designers/developers/teams' paragraph is pure filler. | 1 / 3 |
Actionability | The workflow steps reference specific MCP tool calls with concrete syntax (e.g., `get_design_context(fileKey=..., nodeId=...)`), and the examples walk through realistic scenarios. However, there is no actual executable code for the translation step (Step 5) — the most critical part is described abstractly with 'key principles' rather than concrete code patterns. The validation checklist is a list of checkboxes without executable verification steps. | 2 / 3 |
Workflow Clarity | The 7-step workflow is clearly sequenced with explicit ordering ('Follow these steps in order. Do not skip steps.'). It includes a fallback/recovery path for truncated responses (fetch metadata then individual children), a validation checklist at Step 7, and the examples reinforce the step sequence. The workflow handles the main failure modes with documented solutions. | 3 / 3 |
Progressive Disclosure | The skill correctly references sibling skills (figma-use, figma-generate-design, etc.) with clear boundary conditions, and links to external Figma documentation. However, the content itself is monolithic — the common issues, best practices, examples, and implementation rules sections could be split into separate reference files. The inline content is too long for a SKILL.md overview. | 2 / 3 |
Total | 8 / 12 Passed |
Validation
100%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
e6afb0d
- 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.