Audit and Remediate Design Systems in Figma

Audits your Figma design system programmatically across tokens, components, accessibility, and UX consistency, then applies fixes directly in Figma after your approval. It reads every page, variable, token, component variant, and style; compares design against code when a codebase is provided; flags gaps with evidence; and exports production-ready code artifacts (tokens, types, Storybook stories, documentation). The skill removes guesswork from design system governance by surfacing concrete issues with concrete fixes, not vague recommendations.

1. Select your mode: Hardcore (full system audit), Soft (single component deep-dive), or Spec (validate against your custom requirements). 2. Provide your Figma file URL and (optional) your codebase path for drift detection. 3. The skill runs a 5-phase workflow: audit your Figma structure programmatically, produce a dual human report + machine JSON, wait for your approval on fixes, execute changes in Figma, export production code (tokens.json in W3C format, TypeScript types, Storybook stories, and HANDOFF.md documentation). Output: prioritized action plan, remediated Figma file, and drop-in code artifacts ready for your project.

Every design system gap surfaces with evidence and a fix, then gets applied directly to Figma and code, eliminating the back-and-forth between design and engineering.

Requires Claude Code (CLI or desktop app) because the skill executes as a Claude Code skill using the Figma MCP. Analyzes Figma's native variable scopes, text styles, effect styles, and component variant matrices without external dependencies. For drift detection, reads tailwind.config.js and tokens.json if a codebase path is provided, then compares Figma token values against code. Exports follow W3C Design Token format (Style Dictionary compatible) and generate Storybook stories in TypeScript with full variant coverage. All audit snapshots versioned to audit-history/ for regression tracking across runs.

The skill requires Figma plugin support in Claude Code (installed via /plugin → figma) and edit access to your Figma file. Pixel fidelity on exports is ~97–99% due to renderer limitations (font anti-aliasing, corner smoothing). The v3 lossless extraction layer for round-trip Claude Design support is still in progress (Phases A–D complete by May 2026; Phase E queued for Sep 2026). Soft and Spec modes analyze a single component at a time, not the full system.