@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'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.

View in AI SkillSafe app
2088 downloads
0 stars
0 demos
SKILL.md

Embed badges

Add these to your README to show the skill's verification status.

SkillSafe verified badge
Verified badge
[![SkillSafe verified badge](https://api.skillsafe.ai/v1/badge/@figma/figma-generate-design/verified)](https://skillsafe.ai/skill/@figma/figma-generate-design/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@figma/figma-generate-design/installs)](https://skillsafe.ai/skill/@figma/figma-generate-design/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@figma/figma-generate-design/scan)](https://skillsafe.ai/skill/@figma/figma-generate-design/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@figma/figma-generate-design/eval)](https://skillsafe.ai/skill/@figma/figma-generate-design/)