What problem does it solve? Translating a codebase's design tokens and components into a structured Figma design system is slow and error-prone when done manually, and one-shot automated attempts produce broken or inconsistent results. This Skill orchestrates a phased, checkpoint-driven workflow that creates variables, component libraries, theming modes, and documentation in Figma that match the code. ## Core Features & Use Cases - Token and Variable Creation: Builds primitive and semantic variable collections with Light/Dark modes, scopes, aliases, and code syntax matching the codebase's CSS variables. - Component Library Construction: Creates components one at a time with auto-layout, variant matrices, component properties (TEXT, BOOLEAN, INSTANCE_SWAP), and full variable bindings. - Theming and Documentation: Sets up file structure with cover pages, foundations documentation, color swatches, and type specimens, plus Code Connect mappings to code components. - Use Case: A team wants their React component library mirrored in Figma with matching tokens and dark mode. The Skill analyzes the codebase, locks scope with the user, then builds tokens, pages, and components across validated phases. ## Quick Start Ask the AI to build a Figma design system from your codebase using the figma-generate-library skill, starting with a discovery phase and plan approval.
