figma-generate-library

Coordinates phased creation of tokens, components, styles, and Code Connect mappings in Figma from codebase inputs.

Updated Apr 28, 2026
One-click install
npx skills add https://github.com/89jobrien/warpx --skill figma-generate-library-89jobrien
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/89jobrien/warpx/tree/main/resources/bundled/mcp_skills/figma/figma-generate-library
Command: npx skills add https://github.com/89jobrien/warpx --skill figma-generate-library-89jobrien

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This MCP skill automates the end-to-end workflow of building a cohesive design system inside Figma by orchestrating token creation, component generation, theming, foundations documentation, and Code Connect handoff from a codebase, with strict phase-based sequencing and idempotent state.

Core Features & Use Cases

  • Orchestrates multi-phase design-system work across tokens, components, pages, and docs.
  • Builds and binds tokens to components, constructs variant matrices, enforces best practices, and wires Code Connect mappings for code handoff.
  • Use cases include creating a design system from code, reconciling code vs. design conventions, and maintaining foundations docs as tokens evolve.

Quick Start

Load the figma-generate-library skill and begin Phase 0 discovery to analyze the codebase and Figma file, then proceed through Phases 1–4 with explicit user checkpoints.

Frequently Asked Questions about figma-generate-library

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a Figma design system from an existing codebase?

To generate a Figma design system from a codebase, the skill orchestrates a phase-driven workflow that identifies tokens, creates components, constructs variant matrices, and wires Code Connect mappings directly from your code inputs for cohesive conventions.

What is the best way to automate Figma component and token creation?

Automating Figma component and token creation is best achieved through a strictly sequenced, multi-phase workflow that binds tokens to components, enforces best practices, and maintains a persistent run ledger on disk for state recovery and resumability.

Can I map Figma components to code using Code Connect automatically?

Yes, you can map Figma components to code using Code Connect automatically. The workflow coordinates sequential Code Connect mappings during end-to-end design system generation, ensuring accurate handoff from Figma foundations to your codebase.

How does token aliasing work when building Figma design systems?

Token aliasing in Figma design systems works by coordinating token creation and binding tokens to components within a phase-driven workflow, ensuring styles are correctly linked and allowing foundations documentation to evolve as tokens change.

Do I need to manually restart the Figma design system workflow if it stops?

No, you do not need to manually restart the Figma design system workflow if it stops. The process maintains a persistent run ledger on disk, providing state management, recovery, and resumability across its strictly phase-driven sequencing.