figma-generate-design
figma-generate-design is an agent skill published by openai, listed under design. It lives in the openai/skills repository, which has 28,310 GitHub stars; we last read it on 2026-09-16.
This tool connects to Figma to translate application pages, views, or multi-section layouts from code or descriptions into Figma designs. It requires no specific credentials and triggers actions like 'write to Figma' or 'create a screen'. It discovers and uses design system components, variables, and styles to build or update screens incrementally.
Install
skills is a generic installer for any repository of Claude agent skills -- it reads openai/skills’s own structure rather than assuming one, the same way this page reads the skill’s own SKILL.md rather than assuming a format.
npx skills add openai/skills
Maintenance
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.
figma-generate-design compared with similar skills
| Skill | Publisher | What it does | Repo stars | Last update |
|---|---|---|---|---|
| figma-generate-design (this page) | openai | Use this skill alongside figma-use when the task involves translating an application page, view, or multi-sec… | 28,310 | 2026-09-08 |
| figma-code-connect-components(same repository) | openai | Connects Figma design components to code components using Code Connect mapping tools. Use when user says "cod… | 28,310 | 2026-09-08 |
| figma-create-design-system-rules(same repository) | openai | Generates custom design system rules for the user's codebase. Use when user says "create design system rules"… | 28,310 | 2026-09-08 |
| figma-create-new-file(same repository) | openai | Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when y… | 28,310 | 2026-09-08 |
| setup-matt-pocock-skills | mattpocock | Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain… | 303,549 | 2026-10-22 |
| brand-guidelines | anthropic | Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having… | 183,845 | 2026-10-09 |
| frontend-design | anthropic | Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps… | 183,845 | 2026-10-09 |
Skills from the same repository first, then others for this job by repository stars. Figures are from each repository when we last read it.
Common questions about figma-generate-design
- What does figma-generate-design do?
- This tool connects to Figma to translate application pages, views, or multi-section layouts from code or descriptions into Figma designs. It requires no specific credentials and triggers actions like 'write to Figma' or 'create a screen'. It discovers and uses design system components, variables, and styles to build or update screens incrementally.
- How do I install figma-generate-design?
- Run npx skills add openai/skills. The skills installer reads the repository’s own structure, so it works for any repository of agent skills.
- Who publishes figma-generate-design?
- openai.
- Is figma-generate-design maintained, and what licence does it use?
- Its repository has 28,310 GitHub stars and its state in our directory is listed. Its last commit we recorded was on 2026-09-08. We did not find a declared licence, so check the repository before you rely on it.
More agent skills for design
- ai-product-photographyby 101-skills
- app-store-screenshotsby 101-skills
- email-designby 101-skills
- landing-page-designby 101-skills
- product-photographyby 101-skills
- social-media-carouselby 101-skills