What is the figma-generate-library skill?
The figma-generate-library skill builds or updates a design system in Figma from a codebase. It sets the order of work in five phases, discovery, foundations, file structure, components and QA, and pauses for your approval between them. It is meant to run alongside the figma-use skill.
SKILL.md opens with a warning: building a design system is never a one shot task. The skill expects 20 to 100 or more use_figma calls and splits them into phases, each ending with a point where you approve before the agent continues.
It teaches what to build and in what order. Its companion, the figma-use skill, teaches how to call the Figma Plugin API, and SKILL.md says both should be loaded together.
What changes in your agent's output
- Variables come before components, because components bind to variables. No token means no component.
- Primitive variables hold raw values, and semantic variables alias them and switch by mode, such as Light and Dark.
- Every variable gets explicit scopes and a code syntax such as var(--color-bg-primary), so Dev Mode and round trips work.
- Components arrive one at a time with variants, properties and a screenshot for you to check.
The five phases
- Phase 0, discovery: analyze the code, inspect the Figma file, search subscribed libraries and lock the v1 scope.
- Phase 1, foundations: variable collections, primitives, semantic variables, scopes, code syntax, effect styles and text styles.
- Phase 2, file structure: a page skeleton plus foundations pages such as color swatches and type specimens.
- Phase 3, components: a dedicated page for each, built with auto layout and variable bindings.
- Phase 4, integration and QA: Code Connect mappings, accessibility, naming and unresolved binding audits.
Who the figma-generate-library skill is for
Best for
- Teams whose design tokens and components exist in code but not in Figma.
- Design system owners who want a repeatable build order and approval points.
- Updating an existing library, since the skill also reconciles gaps between code and Figma.
Not for
- A quick one shot generation. SKILL.md says that approach produces broken or incomplete results.
- Mapping components to code files only. Related: figma-mcp.
- Designing a visual identity from nothing. It builds from an existing codebase, Related: design-systems-mcp.
Use it with UiChemy
A well organized Figma library makes a better source file. Once your pages use variables and components, UiChemy Figma to WordPress can convert the design into editable WordPress pages. Click Get Started on uichemy.com. Related: tailwind-design-system.
How to install Figma Generate Library Skill: Build a Design System from Code
$skill-installer figma-generate-libraryRun the skill installer
The repository README says curated skills install by name with the skill-installer inside Codex. Run
$skill-installer figma-generate-library.Restart your agent
The README says to restart Codex after installing so it picks up new skills.
Install figma-use too
SKILL.md says the figma-use skill must also be loaded for every use_figma call. Load it alongside this skill.
Install by hand instead
Run
git clone https://github.com/openai/skills.gitand copy the skills/.curated/figma-generate-library folder to where your agent loads skills.
Check that it loaded
Ask the agent to build a design system in Figma from your codebase. It should start with discovery, read your code and the Figma file, and present a plan for approval before it creates anything.
Key features
- Phased workflowFive phases run in order: discovery, foundations, file structure, components, then integration and QA. SKILL.md says skipping or reordering phases causes structural failures that are expensive to undo.
- User checkpointsApproval is required after discovery, foundations, file structure, each component and final QA. SKILL.md says a vague yes does not count as approval for a later phase.
- Reuse decision matrixThe agent searches the design system first, then decides to reuse, rebuild or wrap a library component. The priority order is local existing, subscribed library import, then create new.
- Token architectureUnder 50 tokens use one collection with Light and Dark modes. From 50 to 200 use primitives, color, spacing and typography collections. Beyond 200 use several semantic collections with 4 to 8 modes.
- Scopes and code syntaxScopes are never left as ALL_SCOPES. Background, text, border, spacing and radius variables each get a matching scope, and web code syntax uses the var() wrapper.
- Component rulesOne page per component by default, variants named like Size=Medium, Style=Primary, INSTANCE_SWAP for icons, and a split into sub components when a variant matrix passes 30 combinations.
- State ledgerA JSON ledger tracks run ID, phase, step and created node IDs, written to disk so a long run can resume after context is truncated. Nodes are tagged with shared plugin data.
- Strictly sequential callsSKILL.md says never to parallelize use_figma calls, never to guess node IDs, and to run get_metadata after each create and get_screenshot after each component.
- Bundled scripts and referencesThe folder ships helper scripts such as createVariableCollection.js and createComponentWithVariants.js, plus reference files on naming, tokens, discovery and error recovery.
Frequently asked questions
What is the figma-generate-library skill?
It is a skill in the openai/skills catalog for building or updating a design system in Figma from a codebase. It defines the order of work, from token discovery through components and QA, and requires your approval at each checkpoint before the agent continues.
How do I install figma-generate-library?
The README says curated skills install by name inside Codex, so run $skill-installer figma-generate-library and restart Codex. You can also clone the repository and copy the skills/.curated/figma-generate-library folder to wherever your agent loads skills from.
Why does it need the figma-use skill?
figma-generate-library covers what to build and in what order, while figma-use covers how to call the Plugin API correctly, such as return patterns, page resets and font loading. SKILL.md says figma-use must be loaded for every use_figma call.
How many steps does a design system build take?
SKILL.md says to expect 20 to 100 or more use_figma calls across several phases, with checkpoints between them. It warns that trying to create everything in one call produces broken, incomplete or unrecoverable results.
Can it resume after a long session?
Yes. SKILL.md has the agent write a state ledger to a JSON file and re-read it each turn. A resume step also scans pages, components, variables and styles by name to rebuild the map of IDs, then continues from the last completed step.
Does it set up Code Connect?
Code Connect appears as an optional lightweight mapping while building each component, and as a finalizing step in the last phase. The skill folder includes a code-connect-setup reference file, Related: figma-mcp.
Does it work for light and dark themes?
Yes. The description lists theming with light and dark modes. The standard pattern uses a Primitives collection with one mode and a Color collection with Light and Dark modes whose semantic variables alias the primitives.
What license does the skill use?
GitHub shows no license for the repository itself. The README says each skill's license sits in a LICENSE.txt file inside that skill's folder, so read the file in the skill folder before you redistribute it.