CtrlK
BlogDocsLog inGet started
Tessl Logo

figma-generate-library

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in Figma — even a single one — since components require proper variable foundations, variant states, and design token bindings to be production-quality. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.

68

Quality

83%

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

SKILL.md
Quality
Evals
Security

Quality

Content

77%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-architected, phase-sequenced workflow with strong validation checkpoints and excellent progressive disclosure into real bundle files. The main weakness is conciseness — several rule and anti-pattern sections repeat or over-explain beyond what Claude needs.

Suggestions

Trim the Section 1 communication-contract and Section 9 anti-pattern lists to the non-obvious items only; several points restate Plugin API behavior already covered by the companion skill.

Consolidate duplicated guidance (e.g. the 'no parallel use_figma calls' and 'never hallucinate IDs' rules appear in both Section 3 and Section 9) into a single authoritative list.

Move the verbose get_libraries pagination mechanics into the discovery-phase reference, keeping SKILL.md to the decision rule.

DimensionReasoningScore

Conciseness

Mostly efficient domain guidance, but the communication-contract rules, repeated anti-pattern lists, and verbose descriptions of API mechanics re-state material and could be tightened; some sections over-explain Plugin API behavior Claude can infer.

3 / 5

Actionability

Concrete scripts table, explicit tool calls (get_libraries, search_design_system), naming patterns, and a state-ledger schema give executable guidance; the actual code lives in referenced scripts rather than inline, leaving minor gaps for copy-paste use.

4 / 5

Workflow Clarity

Phases 0–4 are explicitly sequenced with per-phase checklists, exit criteria, validation steps (get_metadata/get_screenshot), and an error-recovery reference, fully matching the destructive/batch validation requirement.

5 / 5

Progressive Disclosure

SKILL.md is a clear overview with a phase-keyed reference table and scripts table; every referenced file in references/ and scripts/ resolves to a real one-level-deep bundle, giving well-signaled, navigable structure.

5 / 5

Total

17

/

20

Passed

Description

88%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 specific, trigger-rich description that clearly states both capabilities and use conditions while distinguishing its scope from the companion figma-use skill. Minor additional natural synonyms and tighter separation from the sibling skill would push it higher.

Suggestions

Add a few more natural user phrasings (e.g. 'Figma tokens', 'color styles', 'design library') to broaden trigger-term coverage.

Tighten the distinctiveness from `figma-use` by foregrounding the 'WHAT to build / WHAT ORDER' vs 'HOW to call the API' split earlier in the description.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations' — giving comprehensive coverage of the skill's capabilities.

5 / 5

Completeness

Explicitly answers both what ('Build or update a professional-grade design system in Figma from a codebase') and when ('Use when the user wants to create variables/tokens... Also use when the user asks to create or generate any component in Figma') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Strong natural terms ('design system', 'variables/tokens', 'component libraries', 'theming', 'light/dark modes') and the single-component trigger, but a few common user phrasings (e.g. 'Figma tokens', 'color styles') are not surfaced.

4 / 5

Distinctiveness Conflict Risk

Clearly niched to Figma design-system generation with distinct triggers, though it deliberately overlaps with the sibling `figma-use` skill, creating minor conflict risk that the description itself flags.

4 / 5

Total

18

/

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

relative_links

Relative link issues: 2 suspicious

Warning

Total

15

/

16

Passed

Repository
figma/mcp-server-guide
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.