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.

74

Quality

92%

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

85%

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

This is a strong, highly actionable orchestration skill: concrete API patterns, a rigorous phased workflow with validation checkpoints, and excellent progressive disclosure via a reference table pointing to real bundle files. The main weakness is conciseness — substantial rule overlap between the Critical Rules and Anti-Patterns sections inflates the body without adding new guidance.

Suggestions

Deduplicate the rules shared between Section 3 (Critical Rules) and Section 9 (Per-Phase Anti-Patterns) — parallelizing use_figma calls, hallucinating node IDs, building on unvalidated work, and variant-per-icon all appear in both — by stating each rule once and cross-referencing it from the anti-patterns list.

Compress the Section 1 communication contract from prose bullets into a compact format template (checklist header, 'Working on Phase N.X' line, summary fields) to cut tokens while preserving the contract.

Trim the inline Section 7 naming examples and Section 8 token-architecture table to one-line pointers to naming-conventions.md and token-creation.md, since those references already hold the full detail.

DimensionReasoningScore

Conciseness

The body is detailed and assumes Claude's competence (it never explains what Figma or design systems are), but it carries real redundancy — parallelizing use_figma calls, hallucinating node IDs, building on unvalidated work, and variant-per-icon each appear in both Section 3 (Critical Rules) and Section 9 (Anti-Patterns) — so it is mostly efficient but could be tightened, matching the score-2 anchor rather than the lean score-3 anchor.

2 / 3

Actionability

Concrete and executable throughout: exact scope values ('FRAME_FILL, SHAPE_FILL'), the var() code-syntax rule ('var(--color-bg-primary)'), alias objects ('{ type: "VARIABLE_ALIAS", id: primitiveVar.id }'), a state-ledger JSON schema, a disk path ('/tmp/dsb-state-{RUN_ID}.json'), and pointers to 9 real helper scripts — matching the score-3 anchor for fully executable, copy-paste-ready guidance.

3 / 3

Workflow Clarity

Phases 0–4 are ordered with per-phase exit criteria, mandatory checklists ('Phase N Checklist'), explicit validation checkpoints ('get_metadata after every create, get_screenshot after each component'), and an error-recovery reference — matching the score-3 anchor for a clear sequence with explicit validation and feedback loops.

3 / 3

Progressive Disclosure

The body is an overview that signals one-level-deep references via the Section 10 table (Doc | Phase | Required/Optional | Load when) and Section 11 script table; all 7 referenced docs and 9 scripts are real files, content is appropriately split, and navigation is easy — matching the score-3 anchor judged against the actual bundle structure.

3 / 3

Total

11

/

12

Passed

Description

100%

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 comprehensive and well-structured: it names concrete actions, gives explicit natural-language triggers for both multi-component builds and single-component requests, and clearly distinguishes itself from the companion figma-use skill. It uses third person throughout with no first/second-person voice. Minor verbosity in the explanatory clauses does not undermine the strong trigger and specificity coverage.

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, or reconcile gaps between code and Figma' — matching the score-3 anchor for several specific actions rather than a single domain mention.

3 / 3

Completeness

Explicitly states what ('Build or update a professional-grade design system in Figma from a codebase') and when ('Use when the user wants to... Also use when the user asks to create or generate any component in Figma'), satisfying the score-3 anchor for both an explicit 'what' and an explicit 'Use when' trigger.

3 / 3

Trigger Term Quality

Natural phrasing a user would actually say ('create variables/tokens', 'build component libraries', 'create or generate any component in Figma — even a single one') gives good coverage of common variations, matching the score-3 anchor.

3 / 3

Distinctiveness Conflict Risk

The Figma-design-system-from-codebase niche is clearly delimited, and the explicit WHAT-vs-HOW split ('it complements the `figma-use` skill which teaches HOW to call the Plugin API') makes conflict with sibling skills unlikely, matching the score-3 anchor.

3 / 3

Total

12

/

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

relative_links

Relative link issues: 1 suspicious

Warning

Total

15

/

16

Passed

Repository
openai/plugins
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.