Skip to main content
openai-figma-generate-designby OpenAIOfficialDesignGitHub stars: 27.9k

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-design

Run 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
Repo stars by day
DateRepo stars
5 Oct 202627,882
4 Oct 202627,871
3 Oct 202627,854
2 Oct 202627,848
1 Oct 202627,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