figma-generate-library

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

Updated Apr 17, 2026

Search Tags:#automation #figma #tokens #design-systems #component-libraries #code-connect

Ready to run

npx skills add https://github.com/Lutimi/claude2figma --skill figma-generate-library-lutimi

💬 Prompt for ChatGPT / Claude Chat▼

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.