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
Evaluation results
100%
Pricing Card Component
Design token integration
No hardcoded hex colours
100%
100%
No hardcoded px font sizes
100%
100%
No hardcoded px spacing
100%
100%
Tailwind classes absent
100%
100%
Colour token usage
100%
100%
Typography token usage
100%
100%
Spacing token usage
100%
100%
No inline styles for static values
100%
100%
CSS module or token import
100%
100%
Design system preferred over Figma literals
100%
100%
95%
3%User Profile Header Component
Component reuse and documentation
Uses existing Button
100%
100%
Uses existing Avatar
100%
100%
Uses existing Badge
100%
100%
TypeScript props interface
100%
100%
JSDoc on export
100%
100%
Correct directory placement
100%
100%
No duplicate button logic
100%
100%
Deviation documented
0%
37%
Design system tokens used
100%
100%
Component naming convention
100%
100%
100%
Navigation Bar Implementation
URL parsing and asset handling
fileKey extraction
100%
100%
nodeId extraction
100%
100%
Localhost URLs used directly
100%
100%
No icon package imports
100%
100%
No placeholder elements
100%
100%
Parsing handles node-id format
100%
100%
All three URLs parsed
100%
100%
Component uses provided assets
100%
100%
- Repository
- figma/mcp-server-guide
- Commit
f046182
- Evaluated
- Agent
- Claude Code
- Model
- Claude Sonnet 4.6
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.