What problem does it solve?
This skill automates end-to-end design-system development by bridging code tokens with Figma tokens, enabling teams to keep design and code in sync across tokens, components, and documentation.
Core Features & Use Cases
- Build or update a professional design system in Figma from a codebase. This skill orchestrates multi-phase workflows across 20–100+ use_figma calls, enforcing quality patterns and mandatory user checkpoints between phases.
- Integrates token discovery, foundations setup (tokens, scales, styles), page/file structure, component creation with variant matrices, documentation, accessibility checks, and Code Connect mappings, all while maintaining an explicit phase sequence and idempotent state ledger.
- Requires loading the figma-use skill alongside this one, and emphasizes deterministic, non-parallel use_figma calls, phase-by-phase approvals, and robust state management for resumability.
Quick Start
Initialize the workflow by running discovery, lock scope, and then proceed through Phases 1–4 with user checkpoints.