Inspect, Build, and Sync Figma Design Systems

Inspects and builds Figma design systems end-to-end in two modes. Inspect mode audits components for token compliance, interactive states, WCAG accessibility, detached instances, naming quality, and description completeness, then pauses for your decision before proceeding. Build mode creates tokens with proper variable collections, constructs components with variable bindings and slots, writes structured descriptions, validates, and optionally generates tokens.css, audit scripts, and AI rules for your codebase. The skill bridges the design-to-code gap by keeping Figma structure and code exports in sync.

You invoke the skill with a request like 'audit my design system' or 'create a design system for fintech'. The skill detects mode automatically: inspect runs read-only audits with weighted scoring and always pauses before any changes; build proceeds through six sequential phases (discovery, foundations, file structure, components with slots, validation, optional code export). Within each phase, the skill pauses for your review and confirmation. Once you approve, it applies changes and validates the result before moving forward.

Design systems in Figma stay consistent with code because the skill exports tokens, audit rules, and AI instructions that reflect the same structure the agent reads from Figma, eliminating fabrication and drift between the design tool and the IDE.

Requires the figma-use skill and Figma MCP server (remote recommended). LineHeight variables must store pixel values, not percentages, because Figma variables are unitless and interpreted as pixels when bound. Every variable must have explicit scopes (not ALL_SCOPES) and codeSyntax.WEB set, so agents receive CSS token names instead of Figma internal names. The skill treats component descriptions as plain text (no markdown) to match MCP delivery format.

Phase 6 (code export) requires file write access to your project available in Claude Code, Cursor, Codex, and similar MCP clients. When running in Claude.ai web or mobile, Phase 6 outputs files as text for you to copy manually. Inspect mode is read-only but Phase 6 can overwrite existing tokens.css if regenerated; ask the skill to append or skip if you have custom edits. The skill migration from v1.x to v2.0 changed the repo URL, so update any hardcoded links.