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
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%
Without context: $0.1964 · 38s · 10 turns · 59 in / 2,447 out tokens
With context: $0.3535 · 1m 11s · 14 turns · 319 in / 4,803 out tokens
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%
Without context: $0.9326 · 3m 26s · 31 turns · 31 in / 12,612 out tokens
With context: $1.0360 · 3m 10s · 40 turns · 39 in / 10,992 out tokens
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%
Without context: $0.2284 · 46s · 11 turns · 60 in / 3,072 out tokens
With context: $0.5701 · 1m 52s · 22 turns · 22 in / 7,007 out tokens
- Evaluated
- Agent
- Claude Code
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.