What does this skill do, and when should you 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.
- A design team needs to translate an existing codebase’s tokens into a Figma library.
- A product team needs a new component system with light and dark modes.
- A maintainer needs to reconcile differences between code and an existing Figma file.
- A design-system team needs to build and review components individually with screenshots and approval checkpoints.
How do you install this skill?
- 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.
- Network access
- Local filesystem
- MCP Server
FigmaFigma MCP
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.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/openai/skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/.curated/figma-generate-library" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Build a design system from the current codebase and Figma file, including tokens, documentation pages, and components.
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.
What are this skill's strengths and limitations?
- 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.
- 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 does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Figma Design System Builder this page ✓ OpenAI · Official | 49 · Use with care | ★ 28k | 4mo ago | — |
| Figma Design System Screen Builder ✓ OpenAI · Official | 46 · Use with care | ★ 28k | 4mo ago | — |
| AnyDesign | 58 · Recommended | ★ 219 | 1mo ago | MIT |
| Figma Plugin API Operator ✓ OpenAI · Official | 47 · Use with care | ★ 28k | 4mo ago | — |
| Figma Code Connect Mapper ✓ OpenAI · Official | 54 · Use with care | ★ 28k | 4mo ago | — |
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.
How did FollowSkills review this skill?
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.
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.
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.
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.
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.
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.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →