CtrlK
BlogDocsLog inGet started
Tessl Logo

figma-implement-design

Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.

48

Quality

52%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/figma-implement-design/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

47%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.

The body is a concise, well-organized catalogue stub that advertises discovery and points to an upstream bundle, but it provides minimal executable guidance and no concrete installation workflow.

Suggestions

Replace the `open https://github.com/figma/skills` hint with a concrete, executable installation command (e.g. a git clone into the skills directory).

Add an explicit numbered workflow for acquiring and invoking the upstream bundle with a verification step that the skill is registered.

Drop the redundant "What it does" section or repurpose it to surface genuinely new detail beyond the frontmatter description.

DimensionReasoningScore

Conciseness

The body is lean with organized sections and no padding of concepts Claude already knows, though the "What it does" section duplicates the frontmatter description, a minor instance of over-explanation.

4 / 5

Actionability

Beyond `open https://github.com/figma/skills`, guidance is high-level ("install the upstream bundle into your active agent's skills directory", "ask the agent to invoke this skill by name") with no concrete executable steps to accomplish the skill's purpose.

2 / 5

Workflow Clarity

A rough sequence is implied (advertise in Open Design → install upstream bundle → invoke), but steps are poorly defined in prose with no concrete commands and no validation checkpoints.

2 / 5

Progressive Disclosure

Sections (What it does, Source, How to use) are clearly organized and the upstream reference is signaled one level deep, though the body is a stub pointing externally rather than an overview backed by bundled reference files.

4 / 5

Total

12

/

20

Passed

Description

57%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.

The description clearly states a single concrete capability in a distinct Figma-to-code niche, but lacks explicit "Use when" trigger guidance and natural phrasings a user would actually say.

Suggestions

Add an explicit "Use when..." clause naming concrete trigger scenarios (e.g. "Use when implementing a Figma frame as frontend code or achieving 1:1 visual fidelity").

Incorporate natural trigger phrasings such as "figma to code" or "implement figma" directly into the description text.

List a couple more concrete actions (e.g. extract design tokens, map components) to broaden specificity beyond a single transform.

DimensionReasoningScore

Specificity

"Translate Figma designs into production-ready code with 1:1 visual fidelity" names the domain and one concrete action, but coverage is limited to a single transform rather than multiple specific actions.

3 / 5

Completeness

The "what" is clear ("Translate Figma designs into production-ready code..."), but the "when" is only weakly implied via "Useful for handing off..." rather than an explicit "Use when..." clause, which caps completeness at 3 per the guidelines.

3 / 5

Trigger Term Quality

Terms like "Figma designs", "production-ready code", "Figma frames", and "frontend agent" are relevant, but the natural phrasings a user would say (e.g. "figma to code", "implement figma") are absent from the description itself.

3 / 5

Distinctiveness Conflict Risk

"Translate Figma designs into production-ready code with 1:1 visual fidelity" carves a clear niche (Figma design-to-code with pixel fidelity) with distinct domain-specific triggers and minimal overlap risk.

5 / 5

Total

14

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
nexu-io/open-design
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.