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.