Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot official · OpenAI

figma-generate-library · openai — Claude Code skill: design system from code

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add openai/skills --skill figma-generate-library -a claude-code
Open on GitHub

What figma-generate-library does

figma-generate-library teaches WHAT to build in Figma and IN WHAT ORDER. The skill breaks work into five phases: discovery (analyze code and file), foundations (variables and styles), structure (pages and docs), components (one at a time), and final QA. Each phase must complete and get approval before the next begins—this keeps Figma structure stable and prevents components from breaking when you add variables later.

The skill works alongside figma-use, which handles Figma Plugin API syntax. A hard rule: variables come before components, all variables have proper scopes, and each component lives on its own page. Work happens over 20–100+ use_figma calls, each one small and verifiable.

Skip phase order and the system collapses. Create components without variables, then add variables later, and you rebuild all bindings. Skip discovery and components won't match code.

What it helps with

  • Create variables and modes in Figma, synced with design tokens in code
  • Build a component library with variants and variable bindings
  • Set up light and dark themes through Figma Variables
  • Document the design system (type, color, spacing) inside Figma
  • Close gaps when Figma and code disagree

Example prompts for the agent

  • Build a design system in Figma: create variables for colors, spacing, and type, then build Button, Card, and Modal components with variants
  • Update my Figma library: sync variables from tokens.json, then rebuild the Form component with variants for all states
  • Audit the Figma design system against code: find what tokens and components exist in the codebase and in Figma, then fill the gaps

How to install figma-generate-library

1Skills CLI (Vercel)

npx skills add openai/skills --skill figma-generate-library -a claude-code

2Manually: put the files in place

~/.claude/skills/figma-generate-library/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/figma-generate-library/

From the same set20

The whole set →
pdf official openai A skill for reading, creating and reviewing PDFs where layout matters. Useful when the agent builds a document and needs to see how it renders. Claude Code CX Codex Cursor +1 13,400installs gh-fix-ci official openai Finds failing GitHub Actions checks on a pull request, inspects logs, and drafts a fix plan. The skill modifies code only after explicit approval. Claude Code CX Codex Cursor +1 11,400installs openai-docs official openai The skill finds current OpenAI guidance for API work, Codex, model selection, migrations, and prompt updates, using official documentation. Claude Code CX Codex Cursor +1 6,100installs imagegen official openai This skill creates and edits raster images such as illustrations, textures, sprites, and mockups. Use it when the output should be a bitmap asset. Claude Code CX Codex Cursor +1 5,700installs jupyter-notebook official openai Scaffolds reproducible Jupyter notebooks for experiments and tutorials using bundled templates and a helper script. It prevents manual raw JSON editing errors. Claude Code CX Codex Cursor +1 5,600installs skill-creator official openai Official guide for drafting and updating agent skills. It structures procedures, bundled scripts, and documentation while keeping token overhead low. Claude Code CX Codex Cursor +1 4,900installs gh-address-comments official openai This skill finds the open pull request for the current branch, lists review comments, and applies the fixes you select through gh. Claude Code CX Codex Cursor +1 4,800installs cloudflare-deploy official openai This skill helps choose Cloudflare services and prepare application or infrastructure deployments through Workers, Pages, and related products. Claude Code CX Codex Cursor +1 4,300installs

Other versions of figma-generate-library

figma-generate-library official Figma 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. CX Codex GP ChatGPT 32installs

Similar

mobile-ios-design Seth Hobson Guides native iOS interface work with Apple HIG and SwiftUI patterns. Use it when building views, navigation, or adaptive layouts. Claude Code CX Codex Cursor 23,659installs fluentui-blazor official github This skill guides Blazor work with Microsoft Fluent UI components, service providers, forms, dialogs, and themes. Use it while building or debugging a Fluent UI app. GitHub Copilot 9,000installs legacy-circuit-mockups official github Creates breadboard circuit mockups with HTML5 Canvas. Use it to show component placement and wiring for electronics projects. GitHub Copilot 8,900installs interface-review jakubkrehel Audits pull requests, branches, and uncommitted edits for layout, UI, accessibility, and typography regressions. Keeps focus on what changed rather than pre-existing debt. Claude Code CX Codex Cursor +1 18,100installs react-vite-dashboard official google-labs-code This skill converts Stitch designs into production React and Vite dashboards. It maps tokens from DESIGN.md and integrates async data fetching with TanStack Query. Claude Code CX Codex Cursor +1 5,400installs ux-copy official anthropics Draft or review interface text, from button labels to error messages. Useful when wording needs to fit a specific screen, user state, and tone. Claude Code CX Codex Cursor +1 4,600installs 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

Questions about figma-generate-library

How do I install figma-generate-library in Claude Code?

Run npx skills add openai/skills --skill figma-generate-library -a claude-code, then open the SKILL.md file in ~/.claude/skills/figma-generate-library/.

How is figma-generate-library different from figma-use?

figma-generate-library teaches design system architecture and phase order (variables → components → QA). figma-use is the Figma Plugin API—syntax for specific operations. Both load together.

Why can't I create everything at once?

Figma state changes step-by-step, and validation after each phase prevents failures. Build 100 components without variables, and rebuilding bindings later costs time.

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