Design & Frontend ✓ OpenAI · Official figmadesign-systemsdesign-tokenscomponent-librarythemingmcp

Figma Design System Builder

Build and validate a professional Figma design system from code.

FollowSkills review · FSRS-2.0
Not recommended
49/ 100 5-point scale 2.5 / 5
Trust18 / 25 · 3.6/5

The evidence shows discovery-first execution, explicit user approval checkpoints, strict sequencing, returned node IDs, and a prohibition on unconfirmed destructive cleanup; there is no evidence of credential theft, covert exfiltration, or malware. Points are deducted because the skill performs extensive external writes to Figma, rollback is limited to cleanup and state tracking, and remote MCP data flow, permission boundaries, and recovery responsibilities are not fully disclosed.

Reliability6 / 20 · 1.5/5

The evidence shows a structured phased workflow, state ledger, idempotency checks, validation steps, and an error-recovery reference. Points are deducted because the main document requires return and forbids closePlugin, while the component reference still uses IIFEs, closePlugin, and closePluginWithFailure; the main document says getPluginData is unsupported, while reference code uses setPluginData. The helper scripts and key dependency contents are not supplied, so static review cannot reproduce critical paths and the score remains at or below 10.

Adaptability8 / 15 · 2.7/5

The evidence defines the audience, use cases, inputs, workflow, and boundaries against prematurely building components reasonably clearly. Points are deducted because figma-use must also be loaded and core functionality depends on the Figma MCP; Chinese-language interaction is not addressed, and reachability of https://mcp.figma.com/mcp from mainland China is unverified.

Convention7 / 15 · 2.3/5

The evidence provides phase-based information architecture, reference documents, script listings, naming rules, limitations, examples, and dependency notes. Points are deducted because license metadata is unknown, and no versioning policy, changelog, or clearly assigned maintenance responsibility is shown; maintainers.yml pointing to mcp_server is insufficient evidence of governance or an update path.

Effectiveness6 / 15 · 2.0/5

The evidence covers tokens, components, variants, documentation, Code Connect, and QA, with checkpoints intended to support a complete design-system build. Points are deducted because no committed test suite, CI execution evidence, or representative verified outputs are supplied, and some examples contain API conflicts; under static calibration, the task design is plausible but direct usability is unverified, so the score remains at or below 7.

Verifiability4 / 10 · 2.0/5

The evidence includes a detailed workflow, code snippets, parameter descriptions, and error-code tables, giving it some auditability. Points are deducted because the actual helper scripts are not provided and there is no real CI, test coverage, third-party execution evidence, or independent corroboration; conclusions rely mainly on author documentation, so the score remains at or below 5.

Evidence confidence:Low Reviewed Jul 20, 2026 Reviewed revision 49f948faa925
Before you use it
  • Core functionality depends on the remote Figma MCP; verify mainland-China reachability, organization permissions, data residency, and whether sensitive code is sent to an external service before deployment.
  • Resolve the Plugin API contradictions between the main document and references, especially return versus closePlugin and getPluginData versus setPluginData.
  • Provide the actual helper scripts, test suite, CI results, version and changelog information, and explicit license and maintenance ownership.
  • Before cleanup or large-scale writes, provide a verifiable backup, change preview, and recovery procedure.
Review evidence [1][2][3][4][5][6][7][8]
See the full review method →

What it does & when to use it

This skill guides an agent through building a design system from a codebase and an existing Figma file. It covers discovery, design tokens, file structure, component creation, and final quality assurance in a fixed sequence. The workflow typically spans 20–100+ use_figma calls with user checkpoints between phases and components. It must be loaded together with the figma-use skill, which provides Plugin API calling rules.

It reads tokens, components, and naming conventions from a codebase; inspects Figma pages, variables, components, and styles; and searches subscribed libraries with search_design_system. It then creates variable collections and modes, primitive and semantic tokens, styles, documentation pages, and components. Components are built one at a time, bound to variables, expanded into variants and properties, and validated with get_metadata and get_screenshot. The workflow also maintains state through shared plugin data or names, writes a ledger under /tmp, and performs Code Connect, accessibility, naming, and unresolved-binding audits.

  1. A design team needs to translate an existing codebase’s tokens into a Figma library.
  2. A product team needs a new component system with light and dark modes.
  3. A maintainer needs to reconcile differences between code and an existing Figma file.
  4. A design-system team needs to build and review components individually with screenshots and approval checkpoints.

Pros & cons

Pros
  • Defines a concrete four-phase workflow with exit criteria.
  • Prioritizes tokens before components, variable bindings, deterministic naming, and state tracking.
  • Includes reuse search, variant limits, screenshot validation, and final audits.
  • Provides reusable Figma Plugin API helper scripts.
Limitations
  • Requires the figma-use skill, Figma MCP, and a Figma environment.
  • The process is deliberately heavyweight and requires repeated calls and human checkpoints.
  • The source provides no test suite, platform coverage, or execution results.
  • The repository metadata lists the license as unknown, and the skill’s LICENSE.txt content is not provided.

How to install

The skill is located at skills/.curated/figma-generate-library in the repository. The README documents this installation command for curated skills: $skill-installer figma-generate-library. Restart Codex after installation. The source does not document other installation targets or package-manager commands.

How to use

Load figma-generate-library together with figma-use, then provide a request such as “Build a design system from the current codebase and Figma file, including tokens, documentation pages, and components.” Complete discovery and scope approval first, then follow Foundations, File Structure, Components, and Integration + QA in order. Wait for explicit approval after each phase and component. Pass skillNames: "figma-generate-library" to every use_figma call made for this skill, and run those calls strictly sequentially.

Compared to similar skills

The skill explicitly complements figma-use: this skill provides design-system domain knowledge and workflow orchestration, while figma-use provides Plugin API syntax and calling rules.

FAQ

Can it create the entire design system in one call?
No. It requires 20–100+ calls, validation, and user checkpoints across phases and components.
Does it require Figma MCP?
Yes. The SKILL.md directly requires use_figma and search_design_system, so a corresponding Figma MCP environment is needed.
Is it ready immediately after installation?
The README says to restart Codex after installing the skill.
Does it provide all Figma API instructions by itself?
No. It supplies design-system workflow guidance; figma-use supplies the Plugin API calling rules.

More skills from this repository

All from openai/skills

Productivity & Collaboration ✓ OpenAI · Official

Goal Definition Assistant

Turn vague intentions into measurable, verifiable goals with clear scope and stopping conditions.

Dev & Engineering ✓ OpenAI · Official

Codex CLI Builder

Turn APIs, scripts, and existing tools into durable, composable command-line interfaces.

Design & Frontend ✓ OpenAI · Official

Codex Image Studio

Generate and edit production-ready raster assets for projects.

Dev & Engineering ✓ OpenAI · Official

OpenAI Developer Docs Assistant

Current, official guidance for building with OpenAI products, APIs, and Codex.

Dev & Engineering ✓ OpenAI · Official

Skill Creator Guide

A practical guide to designing, writing, validating, and iterating reusable Codex skills.

Dev & Engineering ✓ OpenAI · Official

ASP.NET Core Engineering Guide

Guides developers through building, reviewing, and upgrading ASP.NET Core apps.

Dev & Engineering ✓ OpenAI · Official

ChatGPT Apps Builder

Build documented ChatGPT apps that pair an MCP server with a widget UI.

Design & Frontend ✓ OpenAI · Official

Figma Code Connect Mapper

Link Figma components to their code implementations for traceable design-code consistency.

Design & Frontend ✓ OpenAI · Official

Figma Blank File Creator

Create a blank Figma Design or FigJam file in the selected drafts folder.

Design & Frontend ✓ OpenAI · Official

Figma Design Implementer

Turn Figma specifications into production-ready frontend code with verifiable visual fidelity.

Dev & Engineering ✓ OpenAI · Official

Playwright Browser Automation Skill

Drive a real browser from the terminal for web interaction, extraction, and UI debugging.

Automation & Ops ✓ OpenAI · Official

Security Best Practices Review

Security review and secure-by-default guidance for Python, JavaScript/TypeScript, and Go projects.

Design & Frontend ✓ OpenAI · Official

Hatch Pet Animation Workshop

Turn character or brand cues into validated, packageable Codex animated pets.

Productivity & Collaboration ✓ OpenAI · Official

Linear Workflow Manager

Manage Linear tickets, projects, and team workflows directly through Codex.

Automation & Ops ✓ OpenAI · Official

Repository Threat Modeler

Builds evidence-grounded, actionable AppSec threat models for code repositories.

Automation & Ops ✓ OpenAI · Official

Sentry Production Error Explorer

Inspect Sentry issues, events, and basic production health through the Sentry CLI.

Design & Frontend ✓ OpenAI · Official

Figma Design System Rules Builder

Generates project-specific rules for consistent Figma-to-code implementation.

Writing & Content ✓ OpenAI · Official

Audio Transcribe

Turn audio or video speech into text with optional speaker labels.

Design & Frontend ✓ OpenAI · Official

Figma Design-to-Code Assistant

Fetch Figma design context and turn selected nodes into production code.

Data & Analysis ✓ OpenAI · Official

Jupyter Notebook Workflow Assistant

Create, refactor, and validate reproducible Jupyter notebooks with templates and a scaffold script.

Related skills