Setup & Installation
npx skills add https://github.com/openai/skills --skill figma-generate-design
https://github.com/openai/skills/tree/main/skills/.curated/figma-generate-design
View on GitHubWhat This Skill Does
Translates application pages, views, and multi-section layouts into Figma by discovering and reusing published design system components, variables, and styles. Works section-by-section, binding design tokens instead of hardcoding values. Handles both creating new screens and updating existing ones.
Manually recreating screens in Figma means hunting for components, copying hex codes, and losing design system links — this skill finds and binds the actual published tokens so the output stays connected to the library.
When to use it
- Converting a React page into a Figma screen using the team's published component library
- Pushing a redesigned landing page from code into Figma for design review
- Updating an existing Figma screen to match recent code changes
- Building a pricing page in Figma by importing Button, Card, and Nav components from the design system
- Generating a full app screen in Figma with correct color variables and text styles bound to the library