CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

figma-generate-design

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, form, dashboard, list, table, card, header, message preview, or other composed product UI in Figma from code or a description—even when the user calls that composed UI a component. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.

Quality

90%

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

81%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 highly actionable, well-sequenced workflow skill with executable code at every step and strong validation/feedback loops. Its weaknesses are redundancy (rules repeated across Steps and Best Practices, componentization content duplicated with its reference file) and heavy reliance on sibling-skill bundles for references.

Suggestions

State the screenshot-cadence rule and the font-assertion rule once each (e.g., in Step 5) and have Steps 1/6 and Best Practices reference them by name instead of restating them.

Replace the inlined componentization rationale in Step 4 with a two-line summary pointing to references/componentization.md, which already carries the same content.

Move the long 2a-iii inventory script and the image-transfer scripts into a local reference file (e.g., references/inventory-and-transfer-scripts.md) and keep only the call signatures and key gotchas inline.

DimensionReasoningScore

Conciseness

Mostly high-value, non-obvious API gotchas, but meaningful repetition: the screenshot cadence rule is stated three times (Steps 5, 6, Best Practices), the font assertion three times (Steps 1, 5, Best Practices), the parallel image-transfer workflow twice, and the componentization rationale duplicates text that also lives in references/componentization.md. Fits 'mostly efficient but could be tightened' rather than 'minor instances of over-explanation'.

3 / 5

Actionability

Fully executable JS throughout — inventory script, wrapper sizing table, Promise.all import batching, setProperties text overrides with nested-instance example, createNodeFromSvg icon import with explicit viewBox/width requirements, image-hash transfer scripts, and concrete search_design_system call shapes covering common cases (variants, defaults, fonts, images). Copy-paste ready with clearly marked placeholder keys.

5 / 5

Workflow Clarity

Six ordered steps with an explicit 'Do not skip steps' directive, a required-invariants block, Step 5 validation (structural read-back of descendant counts and image nodes, one composition screenshot with a targeted-fix loop, font-family assertion treated as failure on mismatch), a hard deliverable gate, and error recovery branching on safeToRetryWithoutCanvasRead. Clear sequence with explicit validation and feedback loops.

5 / 5

Progressive Disclosure

Good structure: both local reference files (references/componentization.md, references/discover-product-font.md) exist, are clearly signaled with anchors, and are one level deep; a Reference Docs section indexes five figma-use references with one-line descriptions. Gaps: componentization content is duplicated between body and reference instead of delegated, several long scripts are inlined, and all but two references point into sibling skill bundles outside this skill's directory.

4 / 5

Total

17

/

20

Passed

Description

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

An exceptionally strong description: concrete capabilities, an explicit trigger phrase list, and explicit disambiguation against sibling skills. The only weakness is that the broad container-type enumeration (card, header, message preview) sits close to library-primitive territory, leaving slight conflict risk within the Figma skill family.

DimensionReasoningScore

Specificity

Lists multiple concrete actions with comprehensive coverage: 'Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.' No coverage gaps across the discover/import/assemble workflow, so it exceeds the anchor-4 'minor gaps' level.

5 / 5

Completeness

Explicitly answers both: what ('Discovers... imports them and assembles views incrementally section-by-section using design system tokens') and when (a literal 'Triggers:' phrase list plus 'whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, form, dashboard...'). Both are concrete and explicit, matching the top anchor.

5 / 5

Trigger Term Quality

Eight natural user phrases ('write to Figma', 'push page to Figma', 'build a landing page in Figma', 'convert this modal/dialog/drawer/panel to Figma') plus synonyms and both create/update directions; matches the comprehensive-coverage-with-synonyms anchor rather than the 'a few natural terms missing' anchor.

5 / 5

Distinctiveness Conflict Risk

Clear niche (composed views, not library primitives) with an explicit disambiguation clause ('even when the user calls that composed UI a component'), but trigger scope including 'card', 'header', and 'message preview' creates minor overlap risk with the closely related figma-generate-library skill in the same Figma skill family. Fits 'mostly distinct; minor overlap risk' better than 'minimal conflict risk'.

4 / 5

Total

19

/

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: 17 suspicious

Warning

Total

15

/

16

Passed

Repository

figma/mcp-server-guide

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.