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

83%

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

77%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A highly actionable, clearly sequenced workflow with strong validation and error-recovery loops; it is held back by repetition/length and a monolithic body that over-relies on external sibling-skill references rather than its own bundle.

Suggestions

De-duplicate the parallel generate_figma_design capture workflow — state it once and link from Step 1 and Step 5 instead of restating it three times.

Move the larger inline code blocks (e.g., the 2a-ii instance-walking script, the boundVariables enumeration) into a local reference file and link to them, reducing the monolithic body length.

Either vendor the ../figma-use/references/* patterns this skill depends on into local reference files, or add a short note at each external link clarifying it requires loading the figma-use skill bundle.

Dimension	Reasoning	Score
Conciseness	Most content is specialized, non-obvious Figma Plugin API knowledge Claude lacks (component-key resolution, local-only variable gotchas, image-hash transfer), but there is noticeable repetition (the parallel capture workflow stated three times, 'load figma-use' and 'never hardcode hex colors' repeated) and prose padding that could be tightened.	2 / 3
Actionability	Provides abundant copy-paste-ready executable JS — wrapper creation, Promise.all of importComponentSetByKeyAsync/importVariableByKeyAsync/importStyleByKeyAsync, setBoundVariable/setBoundVariableForPaint, setProperties overrides, createNodeFromSvg, image-hash transfer, and swapComponent for updates.	3 / 3
Workflow Clarity	A strictly ordered 6-step workflow with explicit hard gates and forbidden shortcuts, get_screenshot validation after each section, a Step 5 validation checklist, and a STOP/read/fix/retry error-recovery feedback loop.	3 / 3
Progressive Disclosure	Local references (componentization.md, discover-product-font.md) exist and are well-signaled one-level-deep in a Reference Docs section, but the ~470-line body is monolithic with inline content that could be split out and leans heavily on ../figma-use/references/* sibling-skill files that are absent from this skill's own bundle.	2 / 3
	Total	10 / 12 Passed

Description

90%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, specific description with explicit triggers and a clear niche; its only weakness is the second-person/imperative opening voice, which the rubric penalizes on specificity.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions ('Discovers design system components, variables, and styles... then imports them and assembles views incrementally section-by-section using design system tokens'), which would score 3, but the opening imperative/second-person voice ('Use this skill alongside figma-use when...') triggers the rubric's voice penalty of -1.	2 / 3
Completeness	Clearly answers both what (discover/import/assemble views from design-system tokens) and when (an explicit 'Triggers:' list plus 'preferred workflow skill whenever the user wants to build or update a full page...').	3 / 3
Trigger Term Quality	Explicit natural triggers 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') give broad coverage of common phrasings.	3 / 3
Distinctiveness Conflict Risk	A clear niche — composing Figma pages/views from design-system instances — scoped explicitly 'alongside figma-use' and distinct from component-creation and Code Connect skills, so it is unlikely to fire for the wrong skill.	3 / 3
	Total	11 / 12 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: Devin-AXIS/iPolloWork
Path: examples/plugin-packages/figma/.opencode/skills/figma-generate-design/SKILL.md
Commit: bd5caef

Reviewed: about 14 hours 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.