CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

figma-implement-design

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Use when the user provides Figma URLs or node IDs and asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection. Do NOT use for general Figma data fetching, variable exploration, or MCP troubleshooting (use figma instead).

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

70%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-sequenced, actionable workflow with strong validation and error-recovery guidance, but the single 250-line monolithic file and some redundant Best Practices prose leave room for tighter conciseness and genuine progressive disclosure.

Suggestions

Remove or merge the 'Best Practices' section, since 'Always Start with Context', 'Reuse Over Recreation', and 'Design System First' already duplicate Steps 2, 5, and 6.

Move the two worked Examples and the Common Issues troubleshooting into separate reference files (e.g. references/examples.md, references/troubleshooting.md) and link to them one level deep, reducing the main SKILL.md to a lean overview.

Delete the 'Understanding Design Implementation' section — its 'For designers / developers / teams' framing is motivational prose that does not guide execution.

DimensionReasoningScore

Conciseness

Mostly task-focused and efficient, but the 'Best Practices' section restates guidance already covered in Steps 5–6 and the 'Understanding Design Implementation' closing prose ('For designers... For developers... For teams...') is padding that could be trimmed.

3 / 5

Actionability

Provides concrete MCP tool invocations (get_design_context, get_screenshot, get_metadata) with real fileKey/nodeId examples plus two fully worked examples and a validation checklist; the 'translate to project conventions' step stays somewhat abstract, leaving a minor gap.

4 / 5

Workflow Clarity

Steps 0–7 are explicitly ordered ('Do not skip steps'), Step 7 provides an explicit validation checklist, and the truncation recovery path (get_metadata → fetch child nodes) plus the Common Issues section supply clear feedback loops for error recovery.

5 / 5

Progressive Disclosure

No bundle files exist and the ~250-line skill keeps everything inline; section headers give reasonable structure, but the worked examples and Common Issues content that could live in separate reference files are all inlined with no one-level-deep references to split the load.

3 / 5

Total

15

/

20

Passed

Description

92%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, well-targeted description that concretely states capabilities, gives explicit trigger conditions, and clearly delineates its scope from the related figma skill. Minor trigger-synonym coverage is the only gap.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'Translate Figma nodes into production-ready code', 'design context, screenshots, assets, and project-convention translation' — giving comprehensive coverage of what the skill does.

5 / 5

Completeness

Explicitly answers both 'what' (translate Figma nodes to production-ready code with 1:1 fidelity) and 'when' ('Use when the user provides Figma URLs or node IDs and asks to implement designs or components that must match Figma specs'), with concrete trigger phrases.

5 / 5

Trigger Term Quality

Natural triggers like 'Figma URLs', 'node IDs', 'implement designs or components', and 'match Figma specs' are present, but a few common variants (e.g. 'Figma link', 'Figma file/design') are missing.

4 / 5

Distinctiveness Conflict Risk

Carves a clear niche (Figma design implementation via MCP) and explicitly disambiguates from the sibling 'figma' skill with a 'Do NOT use for... (use figma instead)' boundary, minimizing conflict risk.

5 / 5

Total

19

/

20

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

tech-leads-club/agent-skills

Path

packages/skills-catalog/skills/(design)/figma-implement-design/SKILL.md

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.