figma-generate-library

Orchestrate multi-phase Figma design-system creation from a codebase with phase checkpoints.

2|1|Updated Apr 2, 2026
One-click install
npx skills add https://github.com/Sacred-G/oh-my-claw --skill figma-generate-library-sacred-g
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/Sacred-G/oh-my-claw/tree/main/secure-openclaw/skills-main/skills/.curated/figma-generate-library
Command: npx skills add https://github.com/Sacred-G/oh-my-claw --skill figma-generate-library-sacred-g

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Design teams often struggle to translate code-backed tokens into a scalable, cohesive Figma design system. This skill automates end-to-end design-system creation by aligning tokens, components, and foundations with the codebase, reducing drift and manual work.

Core Features & Use Cases

  • Orchestrates multi-phase workflows across 20–100+ use_figma calls to implement design systems that match code.
  • Enforces token-before-component discipline, idempotent creation, explicit phase checkpoints, and a persistent state ledger for resumability.
  • Supports discovery, foundations, components, integration QA, and user checkpoints to drive safe, repeatable builds.
  • Use case: rapidly bootstrap a new design system from a codebase with live design-token syncing and automatic docs.

Quick Start

Load the skill with your codebase context and run Phase 0 planning, then execute Phases 0–4 using the built-in checkpoints to create tokens, pages, components, and QA artifacts.

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 a codebase?▼

To generate a Figma design system from a codebase, you orchestrate end-to-end workflows spanning discovery, foundations, components, and QA phases that align tokens and components with existing code.

How does token-before-component discipline improve Figma design system creation?▼

Token-before-component discipline in Figma design system creation enforces foundational token alignment before component implementation, reducing design drift and ensuring components strictly match codebase variables.

Can I resume a Figma design system build if the automation process is interrupted?▼

Yes, you can resume a Figma design system build after an interruption because the automation persists a state ledger and handles recovery scenarios, allowing workflows to continue from explicit phase checkpoints.

What is the best way to sync Figma tokens with a codebase automatically?▼

The best way to sync Figma tokens with a codebase automatically is using orchestrated sequential Figma calls that validate token alignment at phase checkpoints, ensuring reliable and reproducible design-token syncing.

Does Figma design system automation work for large component libraries?▼

Figma design system automation supports large component libraries by orchestrating multi-phase workflows across 20 to over 100 sequential Figma calls, ensuring reproducible builds even at scale.

Why should I use phase checkpoints when building Figma components from code?▼

You should use phase checkpoints when building Figma components from code to prompt for user approval at key stages, validating each step to ensure safe, repeatable, and drift-free design system builds.