Figma Design System Builder
Build and validate a professional Figma design system from code.
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.
- 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.
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.
- 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.
Pros & cons
- 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 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.