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.

74

Quality

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

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.

The content is highly actionable with executable code, a well-gated multi-step workflow, strong validation/feedback loops, and clean one-level-deep reference structure. Its only weakness is length and some duplicated guidance that could be trimmed for token efficiency.

Suggestions

Consolidate the fileKey/create_new_file prerequisite guidance — it is repeated in Prerequisites and again in the Parallel Workflow section; state it once and cross-reference.

Trim redundant validation guidance: the per-section get_screenshot and font-assertion rules appear both inline in Steps 4–5 and again in Best Practices; keep them inline and drop the repetition.

Consider moving the long 2a-iii search_design_system pagination details and the variable/style discovery scripts into a reference file to shorten the main workflow.

DimensionReasoningScore

Conciseness

The body is substantive and code-dense rather than padded with concepts Claude already knows, but at ~480 lines it repeats some guidance (e.g., the fileKey/create_new_file dance appears in both Prerequisites and the parallel-workflow section, and per-section validation is restated in Best Practices), so it could be tightened.

2 / 3

Actionability

Provides fully executable JS code blocks (parallel Promise.all imports, findAllWithCriteria discovery, createNodeFromSvg icon import) and concrete tool calls with parameters — copy-paste ready, not pseudocode.

3 / 3

Workflow Clarity

Sequenced Steps 1–6 with explicit hard gates ('Do not skip steps', forbidden shortcuts), per-section get_screenshot validation, a mandatory font assertion, and an error-recovery STOP/fix/retry feedback loop for canvas-mutating operations.

3 / 3

Progressive Disclosure

SKILL.md is an overview that points to clearly signaled, one-level-deep references (references/discover-product-font.md, references/componentization.md — both present) and external figma-use pattern docs, keeping detailed API material out of the main file.

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 strong: it states concrete capabilities, provides explicit natural-language triggers, answers both what and when, and is clearly distinct from sibling Figma skills. Voice is correctly third person.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'Discovers design system components, variables, and styles', 'imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values' — rather than vague language.

3 / 3

Completeness

Explicitly answers both what (discover/import/assemble design system tokens) and when ('Triggers:', 'whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel').

3 / 3

Trigger Term Quality

Includes many natural trigger phrasings a user would say ('write to Figma', 'build a landing page in Figma', 'convert this modal/dialog/drawer/panel to Figma', 'create a screen'), giving broad coverage.

3 / 3

Distinctiveness Conflict Risk

Occupies a clear niche (composed Figma views from design system instances) with distinct triggers, and is differentiated from sibling skills named in the body (figma-use, figma-code-connect, figma-generate-library).

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