CtrlK
BlogDocsLog inGet started
Tessl Logo

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, or any composed multi-section view in Figma from code or a description. 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.

72

Quality

88%

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 strong, highly actionable workflow document with excellent validation gates and executable code for every phase. Its main weakness is redundancy — key rules are repeated across the opening gate, steps, and a Best Practices section that largely restates them.

Suggestions

State the flattened-rendering prohibition once (as the opening hard gate) and reference it elsewhere instead of repeating it four times.

Delete or compress the Best Practices section, which restates rules already covered in Steps 2–5 (search-first, one-intent-per-query, token preference, componentization, retry-safe phases, screenshot cadence, font assertion).

Consolidate the screenshot-cadence rule into Step 5 only and have Step 6 and Best Practices point back to it.

DimensionReasoningScore

Conciseness

Mostly operational content Claude would not know (plugin API semantics, search_design_system query rules, appendChild reparenting failures), but the flattened-rendering prohibition is stated four times (opening gate, Parallel Workflow, Step 5, image-transfer section), the screenshot-cadence rule three times, and the entire Best Practices section restates rules already given in Steps 2–5.

3 / 5

Actionability

Fully executable throughout: copy-paste-ready JS for every step (importComponentSetByKeyAsync, setBoundVariableForPaint, createNodeFromSvg with explicit width/viewBox requirements, setProperties text overrides), placeholder keys clearly marked (WRAPPER_ID_FROM_STEP_3, BUTTON_SET_KEY), and a concrete build-manually-vs-import table.

5 / 5

Workflow Clarity

Six explicitly ordered steps with hard gates and forbidden shortcuts up front, explicit validation checkpoints in Step 5 (descendant-count evidence, composition screenshot inspection checklist, mandatory font-family assertion), retry-safe phasing rationale, and a dedicated error-recovery section with a fix-then-retry feedback loop.

5 / 5

Progressive Disclosure

References are one level deep and clearly signaled with content descriptions, and both locally cited files (references/discover-product-font.md, references/componentization.md) exist. Minor gaps: long sub-sections like the icon-SVG handling and component-map examples could live in references, and the ../figma-use reference paths sit outside this bundle's structure.

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 excellent description: concrete multi-action capability statement, rich and natural trigger coverage, and explicit what/when guidance in third-person imperative voice. The only weakness is a couple of overly broad trigger phrases that could overlap with the sibling figma-use skill.

Suggestions

Qualify the broadest triggers ('create a screen', 'write to Figma') to scope them to full pages or multi-section views, sharpening the boundary with figma-use.

Tighten the description by about a third — the trigger list and the scope sentence partially repeat each other.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — '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' — covering discovery, import, and assembly comprehensively with no vague filler.

5 / 5

Completeness

Explicitly answers both: what ('Discovers... imports them and assembles views incrementally section-by-section using design system tokens') and when ('Triggers: ...' plus 'whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, or any composed multi-section view') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Comprehensive natural trigger phrases with synonyms: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'build a landing page in Figma', 'convert this modal/dialog/drawer/panel to Figma', 'update the Figma screen to match code'. These are exactly the phrasings a user would naturally say; no common variants are evidently missing.

5 / 5

Distinctiveness Conflict Risk

Clear niche — composed multi-section views built from design system instances, explicitly framed as 'alongside figma-use' — but broad triggers like 'create a screen' and 'write to Figma' carry minor overlap risk with the closely related figma-use skill; mostly distinct rather than minimal-conflict.

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: 16 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.