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
92%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Advisory
Suggest reviewing before use
Quality
Discovery
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.
This is a strong skill description that excels across all dimensions. It provides explicit trigger phrases, clearly defines both what the skill does and when to use it, and occupies a distinct niche (code-to-Figma translation using design system components). The only minor concern is the use of second-person 'Use this skill' at the start, but the description otherwise follows third-person voice for capability statements.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple concrete actions: discovers design system components/variables/styles from Code Connect files, imports them, assembles views section-by-section using design system tokens. Also specifies the types of outputs (full page, modal, dialog, drawer, sidebar, panel). | 3 / 3 |
Completeness | Clearly answers both 'what' (discovers design system components, imports them, assembles views section-by-section using design tokens) and 'when' (explicit trigger phrases and a clear 'Use this skill... when' clause specifying the conditions for selection). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger phrases users would say: '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', plus mentions of specific UI elements like modal, dialog, drawer, sidebar, panel. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive — targets a very specific niche of translating code/descriptions into Figma designs using design system tokens. The mention of companion skill 'figma-use' and specific workflow (Code Connect files, library search, section-by-section assembly) makes it clearly distinguishable from generic design or code skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
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 high-quality, complex workflow skill that excels at actionability and workflow clarity. It provides executable code for every step, enforces a strict ordering with hard gates, and includes thorough validation checkpoints. The main weakness is moderate verbosity — some patterns are repeated across sections and the parallel workflow explanation could be more concise — but the length is largely justified by the genuine complexity of the multi-step design system discovery and screen composition process.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is quite long (~400+ lines) and contains some redundancy (e.g., the parallel workflow explanation is repeated in multiple places, and some patterns like 'skip invisible instance children' appear repeatedly). However, most content is genuinely instructive and specific to this complex workflow, and it avoids explaining basic concepts Claude would know. It could be tightened by extracting repeated code patterns and consolidating the parallel workflow discussion. | 2 / 3 |
Actionability | Excellent actionability throughout — every step includes executable JavaScript code snippets with real Figma Plugin API calls, concrete examples of component discovery, variable binding, style application, and image transfer. The code is copy-paste ready with clear placeholders for user-specific values. | 3 / 3 |
Workflow Clarity | The workflow is exceptionally well-sequenced with 6 clearly numbered steps, hard gates that explicitly forbid skipping ahead, validation checkpoints after each section (get_screenshot), and error recovery with feedback loops. The checklist-style sub-steps (2a-i, 2a-ii, 2a-iii) with explicit skip conditions are particularly strong. Destructive operations are guarded by the atomic script model. | 3 / 3 |
Progressive Disclosure | The skill provides a clear overview workflow in the main file and appropriately references 5 detailed pattern files (component-patterns.md, variable-patterns.md, text-style-patterns.md, effect-style-patterns.md, gotchas.md) plus related skills (figma-use, figma-code-connect). References are one level deep, clearly signaled with markdown links, and organized by topic. The main file is self-contained enough to follow without loading references for basic usage. | 3 / 3 |
Total | 11 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
- Repository
- figma/mcp-server-guide
- Commit
a742f0a
- 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.