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.
Install with Tessl CLI
npx tessl i github:figma/mcp-server-guide --skill implement-design90
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillAgent success when using this skill
Validation for skill structure
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 (Figma-to-code translation with visual fidelity), 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 when the skill can be used.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists concrete actions: 'Translates Figma designs into production-ready code with 1:1 visual fidelity' and mentions specific outcomes like implementing UI and building components. Uses third person voice correctly. | 3 / 3 |
Completeness | Clearly answers both what ('Translates Figma designs into production-ready code with 1:1 visual fidelity') and when (explicit 'Use when...' clause with multiple trigger scenarios). Also includes a helpful prerequisite about 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-to-code translation. The specific mention of 'Figma' throughout, Figma URLs, and MCP server requirement makes 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 excellent workflow clarity and validation checkpoints. The main weaknesses are moderate verbosity (explanatory sections that don't add value for Claude) and the monolithic structure that could benefit from splitting some content into referenced files. The concrete MCP tool examples and validation checklist are particular strengths.
Suggestions
Remove the 'Understanding Design Implementation' section entirely - it explains benefits to humans rather than providing actionable guidance for Claude
Trim the Overview section to 1-2 sentences; the prerequisites and workflow speak for themselves
Consider moving 'Common Issues and Solutions' to a separate TROUBLESHOOTING.md file and referencing it
| 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. | 2 / 3 |
Actionability | Provides concrete, executable MCP tool calls with exact syntax, clear URL parsing examples, and specific validation checklists. The examples show complete workflows with actual file keys and node IDs. | 3 / 3 |
Workflow Clarity | Excellent multi-step workflow with explicit sequencing ('Follow these steps in order. Do not skip steps'), validation checkpoint in Step 7 with a checklist, and clear error recovery paths (e.g., truncated response handling, common issues section). | 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 examples or the troubleshooting section into separate files. External links are provided but internal file references for advanced content are missing. | 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 | |
- 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.