Name: figma-generate-design
Rating: 72 (1 reviews)
Author: figma

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.

Quality

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

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.

The body is highly actionable with a well-sequenced, validated workflow and good progressive disclosure to real reference files. Its main weakness is redundancy: the Best Practices section repeats guidance already embedded in the workflow steps.

Suggestions

Cut or fold the 'Best Practices' section into the corresponding workflow steps — most bullets ('Always search before building', 'Search broadly one intent per query', 'Componentize by default', 'Work section by section', 'Validate visually') restate rules already stated inline.

Move the longer discovery scripts (2b variable enumeration, 2c style enumeration) into a reference file and link to them, keeping only the canonical example inline to reduce SKILL.md length.

Tighten the 'Parallel Workflow with generate_figma_design' preamble by leading with the one-line rule and the image-transfer mandate, then the steps.

Dimension	Reasoning	Score
Conciseness	Most content is specialized Figma Plugin API knowledge Claude would not reliably know, but the 'Best Practices' section largely restates rules already given in the workflow steps ('Always search before building', 'Search broadly one intent per query', 'Componentize by default', 'Work section by section'), and the parallel-workflow preamble could be tightened.	3 / 5
Actionability	Provides copy-paste-ready executable code for the common cases — component key resolution, variable/style binding and import, setProperties text overrides, SVG icon import, image-hash transfer, and existing-button variant swaps — covering the realistic scenarios.	5 / 5
Workflow Clarity	A clear 6-step sequence with explicit validation checkpoints (get_screenshot per section, font-family assertion), hard-gate 'Forbidden' shortcuts gating mutation, and a STOP/inspect/fix/retry error-recovery feedback loop for the batch, section-by-section canvas operations.	5 / 5
Progressive Disclosure	Well-signaled one-level-deep references to real local files (references/componentization.md, references/discover-product-font.md) and a labeled 'Reference Docs' index to figma-use references; minor gaps where some inline discovery scripts could live in references.	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.

The description is concrete, trigger-rich, and answers both what and when explicitly, with concrete natural-language triggers a user would say. Its only weakness is mild overlap with the sibling figma-* skills it references.

Dimension	Reasoning	Score
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.	5 / 5
Completeness	Explicitly answers both what (discover + import + assemble design-system views from code) and when (an explicit 'Use this skill alongside figma-use when...' clause, a Triggers list, and a 'preferred workflow skill whenever...' statement) with concrete trigger phrases.	5 / 5
Trigger Term Quality	Provides a broad 'Triggers:' list of natural user phrasings ('write to Figma', 'push page to Figma', 'build a landing page in Figma', 'convert this modal/dialog/drawer/panel to Figma') plus synonyms and deliverable types a user would actually say.	5 / 5
Distinctiveness Conflict Risk	Clear niche (composed multi-section Figma views from code) with mostly-distinct triggers; minor overlap risk with sibling skills it names (figma-use, figma-code-connect) rather than a fully isolated niche.	4 / 5
	Total	19 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
relative_links	Relative link issues: 16 suspicious	Warning

	Total	15 / 16 Passed

Repository: figma/mcp-server-guide
Path: skills/figma-generate-design/SKILL.md
Commit: 72fcf1f

Reviewed: 3 days ago

Table of Contents

Discovery Implementation Validation

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.