Inspect, Build, and Sync Figma Design Systems

Provides read-only audits and build capabilities for Figma design systems in a single skill with two modes. Inspect mode scores components across six weighted dimensions (token compliance, interactive states, WCAG compliance, detached instances, naming, descriptions) and always pauses before any changes. Build mode orchestrates a six-phase workflow to create or extend components, add slots, bind variables, write descriptions, validate, and optionally generate code exports. The skill eliminates the gap between design-to-code by keeping Figma structure and exported tokens, scripts, and rules synchronized.

Invoke with a request like 'audit my design system' or 'build a design system for fintech'. The skill auto-detects mode: inspect runs read-only audits and stops with a report; build proceeds through six phases with mandatory pauses between each for your review and confirmation. Within each phase, the skill validates changes before continuing. For code export, the skill reads your Figma variables via the Figma MCP and generates tokens.css, an audit script, and AI rules for your project root.

Requires figma-use skill and Figma MCP server (remote recommended). LineHeight variables must store pixel values, not percentages. Every variable requires explicit scopes (not ALL_SCOPES) and codeSyntax.WEB set for CSS token name delivery to agents. Descriptions use plain text formatting (no markdown) to match Figma MCP delivery. Phase 6 requires file write access; in Claude.ai web outputs file contents inline for manual saving.