figma-generate-library

Orchestrate multi-phase Figma design-system workflows from token discovery through QA.

Updated Apr 17, 2026
One-click install
npx skills add https://github.com/Lutimi/claude2figma --skill figma-generate-library-lutimi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/Lutimi/claude2figma/tree/main/.cursor/skills/figma-generate-library
Command: npx skills add https://github.com/Lutimi/claude2figma --skill figma-generate-library-lutimi

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Coordinate end-to-end design-system work in Figma starting from codebase tokens, enabling safe, repeatable, and resumable workflows across token creation, component libraries, theming, and documentation.

Core Features & Use Cases

  • Orchestrates multi-phase design-system workflows across tokens, components, theming, and foundations.
  • Enforces phase gates, idempotency, and resumable state management via a plugin-data ledger and a persisted run-state file.
  • Integrates with Code Connect and MCP tooling to map code components to Figma assets, perform validation, QA, and final wiring.
  • Supports safe cleanup of abandoned runs and robust recovery after failures.

Quick Start

Begin by loading the figma-generate-library skill and running Phase 0 discovery to map tokens, pages, and libraries, then proceed through the phased workflow with explicit 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 component library from codebase tokens?▼

To generate a Figma component library from codebase tokens, you orchestrate an end-to-end design-system workflow. This coordinates token, style, and component creation with code-aware orchestration across multiple phases. It enforces sequencing, idempotency, and resumable state management for reproducible builds.

How does resumable state management work for Figma design-system workflows?▼

Resumable state management works by using a plugin-led ledger and persisted run-state files to track progress. This ensures reproducible builds and safe recovery after failures by enforcing phase gates and idempotency across the design-system workflow.

What is the best way to map Code Connect components to Figma assets?▼

The best way to map Code Connect components to Figma assets is through an orchestrated design-system workflow. It integrates with Code Connect and MCP tooling to perform validation, QA, and final wiring, ensuring code components accurately map to Figma assets.

Can I recover an abandoned design-system generation run in Figma safely?▼

Yes, you can recover abandoned design-system generation runs in Figma safely. The workflow supports robust recovery after failures and safe cleanup of abandoned runs by utilizing a plugin-data ledger and a persisted run-state file for safe restoration.

Does this design-system workflow support phased execution with checkpoints?▼

Yes, this design-system workflow supports phased execution with explicit checkpoints. It operates across Phase 0 discovery through Phase 4 QA, enforcing sequencing and phase gates to ensure safe, repeatable, and resumable token and component creation.

Why does my Figma design-system build fail to maintain consistency across runs?▼

Your Figma design-system build fails to maintain consistency if it lacks idempotency and a state file. This workflow enforces idempotency and uses a plugin-data ledger to ensure reproducible builds, preventing inconsistent state across multiple execution runs.