What problem does it solve?
This Skill orchestrates a comprehensive, multi-phase workflow to build and maintain a Figma-based design system from code tokens and design guidelines, enabling consistent token binding, component creation, and documentation within a single, reusable unit.
Core Features & Use Cases
- End-to-end design system construction: Phase 0 discovery, Phase 1 token architecture, Phase 2 foundations, Phase 3 component creation, and Phase 4 QA, all orchestrated with strict sequencing.
- Idempotent state management: Robust tagging and state ledger to resume work after interruptions without duplicating assets.
- Code Connect integration and naming discipline: Establishes code bindings, token aliases, and 1:1 mappings to code components for seamless handoff.
- Foundations-first documentation: Auto-generation of tokens, color swatches, typography, spacing, shadows, and radii for designers and engineers.
- Flexible, extensible workflow: Supports adding or adjusting phases, integrating external design libraries, and expanding with new token models.
Quick Start
Start the 4-phase workflow from Phase 0 (discovery) to scaffold tokens, pages, and components in your Figma file, then proceed through Phases 1–4 with human checkpoints as needed.
