CtrlK
BlogDocsLog inGet started
Tessl Logo

figma-generate-design

Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.

42

Quality

43%

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-generate-design/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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

This is a thin catalogue entry that defers nearly all executable detail to an upstream README rather than providing actionable guidance in the body. Structure and disclosure are reasonable, but actionability and workflow clarity are weak because no concrete, runnable steps or validation are given.

Suggestions

Replace the 'inspect the README' instruction with concrete install steps (e.g. the exact clone/copy commands into the active agent's skills directory) so the body is runnable without external browsing.

Add a short validation checkpoint after installation (e.g. 'confirm the skill appears via the agent's skill list before invoking') to give the workflow a feedback loop.

Cut the verbatim repetition of the frontmatter description in 'What it does' or replace it with one distinguishing line to improve token efficiency.

DimensionReasoningScore

Conciseness

The body is short and mostly efficient, but the 'What it does' section repeats the frontmatter description verbatim and the prose around installing the upstream bundle could be tightened.

3 / 5

Actionability

Guidance is high-level ('Inspect the upstream README for exact paths', 'install the upstream bundle') with no concrete, runnable steps to actually execute the skill; the only command is 'open https://github.com/figma/skills'.

2 / 5

Workflow Clarity

A rough sequence exists (inspect README, install bundle, invoke by name), but steps are poorly defined and lack any validation checkpoints for confirming the bundle is correctly installed or the skill is available.

2 / 5

Progressive Disclosure

Sections are well organized and the single external reference (the upstream repo) is clearly signaled one level deep with no nested reference chains, though the body is essentially a pointer rather than self-contained guidance.

4 / 5

Total

11

/

20

Passed

Description

46%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 states concrete capabilities in a clear Figma niche but omits any explicit "Use when..." trigger guidance, leaving the when-to-use question implicit. Adding a trigger clause with natural phrasings would lift completeness and trigger_term_quality.

Suggestions

Append a 'Use when...' clause with natural trigger phrasings such as 'Use when generating Figma screens from code or a description, translating app pages, or applying design tokens in Figma'.

Surface user-natural synonyms like 'code to Figma', 'Figma from code', and 'screen generation' in the description so trigger_term_quality reflects terms users actually say.

List a few more concrete actions (e.g. 'apply design system components', 'map code components to Figma layers') to broaden coverage beyond build/translate.

DimensionReasoningScore

Specificity

Names the domain and two concrete actions ("Build or update screens in Figma", "Translate app pages into Figma using design tokens"), but coverage is narrow rather than comprehensive.

3 / 5

Completeness

The "what" is clearly stated but there is no explicit "when to use it" clause, which caps completeness at 3 per the rubric guideline.

3 / 5

Trigger Term Quality

The only natural term is "Figma"; there are no "Use when..." trigger phrases or common user phrasings (e.g. "figma from code", "screen generation") surfaced in the description itself, so most keywords users would say are absent.

2 / 5

Distinctiveness Conflict Risk

The Figma + design-tokens niche is specific and clearly distinct from other skills, with only minor overlap risk against other Figma-oriented skills.

4 / 5

Total

12

/

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.