Audit Design Systems Across 4 Layers

Analyzes your entire Figma design system (or a single component) across 4 audit layers: technical (tokens, color, typography, design-code drift), UX quality (touch targets, motion and feedback), accessibility (WCAG 2.2 AA/AAA), and design intentionality (aesthetic POV, documentation). It parses every page, component set, variant, variable, and style; compares against your codebase if provided; and surfaces every gap with concrete evidence from the actual Figma data, not assumptions.

Run the skill on your Figma file (or point to a single component). It reads your Figma structure programmatically, checking tokens, variables, component variants, styles, and (if you provide a codebase path) comparing token values against tailwind.config.js or tokens.json. The skill produces two outputs: a human-readable report with maturity scoring and a prioritized action plan, plus a machine-readable JSON with structured findings, missing inventory, design-code drift, and step-by-step fixes. If a previous audit exists, it diffs against the current state to flag regressions and improvements.

Reads Figma programmatically via the Figma MCP, parsing variable collections (primitive → semantic → component token hierarchy), text styles, effect styles, component variant matrices, and naming conventions. For drift detection, requires access to tailwind.config.js or tokens.json in your codebase; compares token names and values to flag mismatches. Produces W3C Design Token JSON output. Audit snapshots versioned to audit-history/<date>.json for drift tracking.