CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

47

Quality

59%

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

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 lean, well-organized catalogue stub that points to an upstream repo, but it provides almost no executable guidance or an actual workflow for the skill's stated purpose. Everything actionable is delegated to an external README that the reader must fetch and interpret.

Suggestions

Replace the vague install instruction with concrete steps: the exact git clone command, the target skills-directory path, and a one-line verification that the skill was installed.

Add a minimal 'Generating a screen' workflow (input → component/token mapping → validate against the design system) so the file carries some of the skill's own guidance rather than only a redirect.

Drop the verbatim repetition of the frontmatter description in 'What it does' or replace it with genuinely new detail (supported input types, output structure).

DimensionReasoningScore

Conciseness

The body is short with clear sections and no padding about concepts Claude already knows, so it broadly respects the token budget. Not 5 because the 'What it does' section repeats the frontmatter description verbatim and 'Curated from Figma's MCP server guide' plus the OpenDesign catalogue explanation add little actionable value.

4 / 5

Actionability

The only concrete command is a bash block containing a bare 'open https://github.com/figma/skills', while the actual instruction — 'install the upstream bundle into your active agent's skills directory' — is left as a high-level hint with no paths, commands, or steps. Not 3 because there is no executable or complete guidance for even the setup task; not 1 because at least one concrete command and a specific repo URL are given.

2 / 5

Workflow Clarity

A rough sequence exists (inspect the upstream README → install the bundle → invoke the skill), but the steps are poorly defined — there is no actual workflow for building or updating Figma screens, no validation of a successful install, and the 'how' is deferred entirely to an external README. Not 3 because the gaps are too large for the sequence to be followed as written.

2 / 5

Progressive Disclosure

The body is well-organized into short sections and the pointer to detailed material (the upstream repo URL) is clearly signaled and only one level deep; no bundle files exist in references/, scripts/, or assets/ to organize. Not 5 because the detailed content lives behind an external GitHub URL rather than bundled, on-disk references, so navigation is not self-contained.

4 / 5

Total

12

/

20

Passed

Description

53%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 what the skill does within a well-defined Figma niche, but omits any 'when to use' trigger guidance, which limits discoverability. Keyword coverage is reasonable but lacks natural user phrasings and synonyms.

Suggestions

Append an explicit trigger clause such as 'Use when the user wants to turn app code, screenshots, or written descriptions into Figma screens or mockups using their design system.'

Broaden natural keyword coverage with synonyms users actually say: 'Figma mockup', 'wireframe', 'design from code', 'UI screens'.

Mention the concrete input formats (e.g., React/HTML components, image references) to sharpen the 'what' and distinguish it from a reverse Figma-to-code skill.

DimensionReasoningScore

Specificity

The description names the domain ("screens in Figma", "design system components", "design tokens") and two concrete actions ("Build or update screens", "Translate app pages into Figma"), but coverage is not comprehensive — it never says what inputs are handled, what component types, or what the output looks like. Not 4 because 'lists several specific actions' would require more distinct concrete actions; not 2 because it is far more concrete than 'Names the domain but actions are minimal'.

3 / 5

Completeness

The 'what' is clear — "Build or update screens in Figma from code or description using design system components" — but there is no 'Use when...' clause or equivalent explicit trigger guidance in the description, which caps completeness at 3 per the judging guidelines. Not 4 because 'when' is entirely absent rather than merely under-specified.

3 / 5

Trigger Term Quality

Relevant keywords like "Figma", "code", "design system components", "design tokens", "app pages" are present, but common user phrasings ("design to code", "Figma mockups", "wireframes", "design generation", file types) are missing from the description itself. Not 4 because the natural-phrase coverage is thin ('a few natural terms missing' would require broader coverage); not 2 because the terms present go beyond generic keywords tied to a named domain.

3 / 5

Distinctiveness Conflict Risk

The Figma-specific niche ("in Figma", "design system components", "design tokens") makes it mostly distinct with only minor overlap risk against other Figma/design-system skills (e.g., a code-generation-from-Figma counterpart skill). Not 5 because the direction-agnostic phrasing 'from code or description' could collide with a reverse code-from-Figma skill.

4 / 5

Total

13

/

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.

Validation — 15 / 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

Path

skills/figma-generate-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.