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.

49

Quality

53%

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

35%

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

This is a thin catalogue stub that advertises an upstream skill rather than providing actionable guidance. It is reasonably organized and concise but lacks executable instructions, a real workflow, and local reference material.

Suggestions

Replace the URL pointer with concrete, executable steps for the core task (e.g., how to fetch a Figma frame via the MCP server and emit component code), or vendor the upstream reference files into ./references/ and link to them.

Add a concrete install command instead of "inspect the upstream README for exact paths", and include a validation step confirming the skill is available before invocation.

Remove the duplicated "What it does" section that restates the frontmatter description to recover tokens.

DimensionReasoningScore

Conciseness

The body is short and avoids explaining concepts Claude already knows, but it repeats the frontmatter description verbatim in "What it does" and spends tokens on catalogue metadata, so it could be tightened.

2 / 3

Actionability

The body offers no executable guidance for the actual task; the only command is `open https://github.com/figma/skills`, and it describes/advertises rather than instructs, matching the level-1 anchor.

1 / 3

Workflow Clarity

A minimal install-then-invoke sequence is present, but the install step is vague ("inspect the upstream README for exact paths") with no validation or checkpoints, fitting the level-2 anchor.

2 / 3

Progressive Disclosure

Sections are clearly organized, but the real instructions are deferred to an external upstream URL rather than provided as well-signaled local bundle references, and no bundle files exist to navigate to.

2 / 3

Total

7

/

12

Passed

Description

72%

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 is specific and distinctive with a clear Figma-to-code niche, but it lacks an explicit "Use when..." trigger clause, capping completeness. It is concise and avoids vague fluff.

Suggestions

Add an explicit trigger clause such as "Use when the user asks to convert or implement a Figma design, frame, or mockup into frontend code" to lift completeness to 3.

List a second concrete action (e.g., "extract design tokens and component styles") to move specificity from a single action to multiple specific actions.

DimensionReasoningScore

Specificity

"Translate Figma designs into production-ready code with 1:1 visual fidelity" names the domain and one concrete action, but does not list multiple distinct actions, so it stops short of the level-3 anchor.

2 / 3

Completeness

The "what" is explicit, but the when is only weakly implied by "Useful for handing off Figma frames straight to a frontend agent" rather than an explicit "Use when..." clause, so it is capped at 2 per the guidelines.

2 / 3

Trigger Term Quality

"Figma designs", "Figma frames", "production-ready code", and "1:1 visual fidelity" are natural terms a user would say when requesting this skill, giving good coverage.

3 / 3

Distinctiveness Conflict Risk

Figma-to-code translation is a clear, narrow niche with distinct triggers that is unlikely to conflict with other skills.

3 / 3

Total

10

/

12

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.