Figma Generate Design skill: what it does and how to install it
Builds or updates full Figma screens from application code or descriptions using published design-system components, variables and styles.
Summary generated from the skill's documentation.
Install
$ npx skills add openai/skills --skill figma-generate-designRun it in a terminal. If your agent is already running, start a new session so it picks the skill up.
About this skill
What it does. Translates application pages into Figma by first inspecting the source and design system, then creating a wrapper and assembling sections with reusable components, variables and styles. It works incrementally with use_figma, overriding component text and validating each section with screenshots.
When to use it. For creating or updating complete Figma screens from code or a description. Use other Figma skills for generating code, creating reusable components or writing Code Connect mappings.
History
Repo stars
27.9kAbout +1.3k since 9 Jul 2026
Before 1 Oct 2026 the curve is estimated from public event data.
Stars are counted for the whole repository, which holds 43 skills.
Show as a table
| Date | Repo stars |
|---|---|
| 5 Oct 2026 | 27,882 |
| 4 Oct 2026 | 27,871 |
| 3 Oct 2026 | 27,854 |
| 2 Oct 2026 | 27,848 |
| 1 Oct 2026 | 27,835 |
| 24 Sept 2026 (estimated) | 27,815 |
| 17 Sept 2026 (estimated) | 27,800 |
| 10 Sept 2026 (estimated) | 27,305 |
| 3 Sept 2026 (estimated) | 26,631 |
| 27 Aug 2026 (estimated) | 26,631 |
| 20 Aug 2026 (estimated) | 26,627 |
| 13 Aug 2026 (estimated) | 26,612 |
| 6 Aug 2026 (estimated) | 26,607 |
| 30 Jul 2026 (estimated) | 26,598 |
| 23 Jul 2026 (estimated) | 26,593 |
| 16 Jul 2026 (estimated) | 26,578 |
| 9 Jul 2026 (estimated) | 26,578 |
Installs
2.7k
Tracking since . A chart appears once there are 7 days of data.
Installs via skills.sh
Similar skills
- Figma Generate LibraryBuilds or updates a design system in Figma from a codebase: variables, tokens and component libraries with variants.
- Figma Generate LibraryBuilds and updates Figma design systems from codebases, covering tokens, themes, component libraries and documented foundations.
- FigmaUses the Figma MCP server to fetch design context, screenshots, variables and assets, and to turn Figma nodes into code.