implement-design
Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.
91
88%
Does it follow best practices?
Impact
98%
1.01xAverage score across 3 eval scenarios
Advisory
Suggest reviewing before use
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 an excellent skill description that hits all the key criteria. It provides specific capabilities, comprehensive trigger terms that users would naturally say, explicit 'Use when...' guidance, and clear distinctiveness through Figma-specific terminology. The inclusion of the MCP server requirement adds helpful context for skill selection.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists concrete actions: 'Translates Figma designs into production-ready code with 1:1 visual fidelity' and mentions implementing UI, generating code, and building components. Uses third person voice correctly. | 3 / 3 |
Completeness | Clearly answers both what ('Translates Figma designs into production-ready code') and when (explicit 'Use when...' clause with multiple trigger scenarios). Also includes helpful context about requiring Figma MCP server connection. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms users would say: 'implement design', 'generate code', 'implement component', 'build Figma design', 'Figma URLs', 'Figma specs'. These are realistic phrases users would naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with clear niche around Figma-specific design-to-code workflow. The Figma-specific terminology and MCP server requirement make it unlikely to conflict with generic code generation or design skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
77%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured, highly actionable skill with clear workflows and validation steps for Figma-to-code implementation. Its main weakness is verbosity - several sections explain concepts or benefits that don't add operational value for Claude, and the monolithic structure could benefit from splitting into overview + reference files.
Suggestions
Remove the 'Understanding Design Implementation' section entirely - it explains benefits rather than providing actionable guidance
Trim the Overview section to 1-2 sentences; the prerequisites and workflow speak for themselves
Consider moving 'Common Issues and Solutions' and 'Best Practices' to a separate REFERENCE.md file, keeping only the core 7-step workflow in SKILL.md
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill contains some unnecessary explanatory content (e.g., 'Understanding Design Implementation' section explaining benefits to designers/developers/teams, verbose overview). The workflow steps are reasonably efficient but could be tightened - phrases like 'Follow these steps in order. Do not skip steps.' and explanatory paragraphs add tokens without adding value for Claude. | 2 / 3 |
Actionability | Provides concrete, executable MCP tool calls with exact syntax, clear URL parsing examples with specific extraction patterns, and detailed step-by-step workflows. The examples show complete input/output scenarios with real-looking file keys and node IDs. | 3 / 3 |
Workflow Clarity | Excellent multi-step workflow with clear sequencing (Steps 1-7), explicit validation checkpoint in Step 7 with a checklist, and troubleshooting section for error recovery. The 'Common Issues and Solutions' section provides feedback loops for when things go wrong. | 3 / 3 |
Progressive Disclosure | Content is well-structured with clear sections, but the skill is quite long (~250 lines) and could benefit from splitting detailed content (e.g., Common Issues, Best Practices, Examples) into separate reference files. External links are provided but internal content organization could be improved. | 2 / 3 |
Total | 10 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
metadata_version | 'metadata.version' is missing | Warning |
Total | 10 / 11 Passed | |
- Repository
- figma/mcp-server-guide
- Commit
f046182
- 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.