Audit and Build Figma Design Systems

What problem does this solve?

Runs design system quality audits and builds components with proper variable bindings, slot-based composition, and structured descriptions so your Figma file closes the design-to-code loop instead of remaining a static reference. It detects quality issues (WCAG violations, detached instances, unbound tokens), then pauses for your decision before making any changes. Optional Phase 6 exports tokens.css and AI rules to your codebase.

How does it work?

Once installed, invoke with `/work-with-design-systems` in Claude Code, Cursor, or Codex. 1. Enter inspect mode to audit existing files. Runs six quality modules (tokens, states, accessibility, detached instances, naming, descriptions), calculates a weighted readiness score, and produces a structured report. 2. Review the report and decide what to fix. 3. Enter build mode to create or fix components, starting from scratch or syncing from your codebase. Build runs through phases: discovery (collect specs), foundations (variables and text styles), file structure, components with proper bindings and slots, QA validation. 4. Optionally run Phase 6 to export tokens.css with three-layer indirection, an audit script, and AI rules files (.claude/rules/design-system.md, .cursor/rules/design-system.mdc, or AGENTS.md section). Output: an audited or rebuilt Figma file with components ready for agents, plus optional code artifacts.

Included Skill Groups

What's the biggest win?

The design-to-code loop closes: agents reading your Figma file via MCP find clean variable names and slot-based composition, while agents writing code in the IDE read the same tokens from tokens.css and AI rules, so both sides work from identical token sources with zero fabrication.

What should I know technically?

Requires Figma MCP server (remote recommended) and the figma-use skill because Plugin API rules and script templates live there, not in this skill. Phase 6 works incrementally to avoid hitting the approximately 15 calls/min rate limit on Figma MCP. Text nodes must store lineHeight as pixels, not percentages (Critical Rule 4). Every variable requires codeSyntax.WEB set at creation so agents consuming get_design_context receive CSS token names instead of raw Figma names. Phase 6 generates audit script with separate error and warning exits. CI pipelines can enforce errors while allowing warnings.

What should I watch out for?

Phase 6 requires file write access. Not available in Claude.ai web/mobile (outputs file contents inline for manual saving). Inspect mode is read-only and safe to run anytime; build mode requires careful sequencing and validation after each step to avoid bugs. Mandatory pause between inspect and build ensures you review findings before changes. Requires Figma MCP server connected and figma-use skill installed.

Key Features