Skip to main content
affpapa.org
RU EN
skill CX Codex GP ChatGPT official · OpenAI

figma-generate-library · openai — Codex skill: design system sync with code

Skill to build a professional design system in Figma from your codebase. Creates variables, components with variants, typography styles and theming in the correct order — from tokens to finished components.

Install into Codex · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add openai/plugins --skill figma-generate-library -a codex
Open on GitHub

What figma-generate-library does

The skill manages a multi-phase workflow: first it analyzes your code and current Figma state, then creates foundations (variables, collections, modes), builds file structure, and assembles components in dependency order.

Unlike manual work, the skill proceeds step-by-step with checklists and validation after each phase. It requires loading alongside the figma-use skill, which handles Plugin API syntax — figma-generate-library itself teaches the sequence for building systems. Important: this is not a one-shot operation but a staged process with 20–100+ API calls, each needing completion and verification before the next phase starts.

The skill follows real-world design system architecture (Material 3, Polaris, Figma UI3), sets scopes for all variables, assigns code syntax, and wires component property bindings. Works only if your Figma file is open in context and your codebase is readable.

What it helps with

  • sync components with design system from code
  • create variables and theme modes (light and dark)
  • build component library with variants and property bindings
  • set up design foundations: tokens, colors, typography
  • align Figma structure with codebase architecture

Example prompts for the agent

  • Build a design system in Figma from our Design Tokens file and React components
  • Update our Figma library: add variables for light and dark theme, then build buttons and inputs with variants
  • Help me close the gap between Figma and code: button is in Figma but the disabled state is only in code — keep them in sync

How to install figma-generate-library

1Skills CLI (Vercel)

npx skills add openai/plugins --skill figma-generate-library -a codex

2Manually: put the files in place

.agents/skills/figma-generate-library/SKILL.md

For all projects use ~/.agents/skills/

From the same set201

The whole set →
supabase official supabase Guides the agent through database configuration and strict RLS policies in Supabase. CX Codex GP ChatGPT 8installs remotion-render official Remotion Exports videos and static stills from Remotion projects using CLI commands. CX Codex GP ChatGPT 3installs figma-create-new-file official Figma Creates blank Figma, FigJam, or Slides files inside draft folders. It resolves planKey and editor types before invoking Figma MCP tools. CX Codex GP ChatGPT 6installs swiftui-performance-audit official OpenAI Pinpoints SwiftUI runtime issues like frame drops, unresponsive taps, and excessive view body computations. Works code-first and guides Instruments profiling. CX Codex GP ChatGPT 109installs swiftui-liquid-glass official OpenAI This skill helps build and review SwiftUI Liquid Glass interfaces for iOS 26+. Use it when adopting the API or checking fallbacks, interaction, and design fit. CX Codex GP ChatGPT 121installs swiftui-ui-patterns official OpenAI This skill helps build and refactor SwiftUI interfaces, from navigation and state to layouts and controls. Use it for new screens or changes to an existing project. CX Codex GP ChatGPT 114installs swiftui-view-refactor official OpenAI Refactors SwiftUI view files into clean, testable structures with dedicated subview types and proper Observation ownership. CX Codex GP ChatGPT 113installs ios-memgraph-leaks official OpenAI Captures and inspects iOS leaks from a simulator process or .memgraph. Useful for tracing retained objects and checking a fix with before-and-after evidence. CX Codex GP ChatGPT 1,054installs

Other versions of figma-generate-library

figma-generate-library official openai A skill to sync your Figma design system with your codebase. Build or update variables, components, themes, and documentation in the right order—phases matter, and skipping steps breaks the system. Claude Code CX Codex Cursor +1 2,700installs

Similar

markdown-html-orchestrator Alireza Rezvani Routes long Markdown documents, code reviews, and slide decks to the right converter, which writes a standalone HTML file. Use it when a document needs a browser-ready format. Claude Code 46installs design-system Alireza Rezvani Captures brand identity via a 10-question wizard and validates WCAG 2.2 AA contrast. It derives 12 CSS tokens in HSL for markdown-html converters. Claude Code 33installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. Claude Code 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. Claude Code 850,344installs

Questions about figma-generate-library

How do I install figma-generate-library in Codex?

Run npx skills add openai/plugins --skill figma-generate-library -a codex, then find the skill in .agents/skills/figma-generate-library/SKILL.md in your project root.

What does figma-generate-library do?

Manages step-by-step design system construction in Figma from your codebase: extracts tokens and components, creates variables and collections, builds file structure, and adds components with variants and variable bindings.

Do I need to load figma-use with figma-generate-library?

Yes, both skills must load together: figma-generate-library teaches the sequence for building systems, and figma-use provides the Plugin API syntax for actual calls.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor