Audit Design Systems End to End

What problem does this solve?

Gives your design system a complete technical and UX audit in one conversation without back-and-forth. It connects to your Figma file, surfaces every gap with evidence, and after your approval, applies fixes directly into Figma then exports production-ready code. The skill runs a strict 4-layer audit (technical quality, UX quality, accessibility, design intentionality) and flags every inconsistency, hardcoded value, missing variant, accessibility failure, or interaction gap with concrete remediation steps.

How does it work?

Once set up, you choose your mode: 1. Hardcore Mode reads every page, component, and token in your Figma file, scores system maturity and UX quality, and produces a prioritized action plan. 2. Soft Mode does an 8-point deep-dive on a single component, checking variant completeness, token bindings, accessibility, and interaction consistency. 3. Spec Mode audits a component against your custom requirements (e.g., 'I need loading state on all sizes', 'All colors must use semantic tokens'). After you approve fixes, the skill applies changes directly in Figma, then exports tokens, TypeScript types, Storybook stories, and a system handbook. Output: a fully mapped design system (tokens.json, component.stories.tsx, HANDOFF.md) ready for your codebase.

Included Skill Groups

What's the biggest win?

Every component and token gap surfaces with evidence and a fix, so your Figma and codebase stay in sync and your system feels intentional instead of assembled.

What should I know technically?

Requires Claude Code (desktop or web app) with Figma MCP plugin installed. Reads Figma structure via `use_figma` tool calls, and if codebase path is provided, parses tailwind.config.js, tokens.json, and Storybook stories for design-code drift detection. Generates W3C Design Token format (Style Dictionary compatible) and TypeScript types with full JSDoc. All exports follow production code-craft standards: realistic placeholder data, every variant is a named story, and every prop carries explanation.

What should I watch out for?

Requires Figma file edit access (read-write). The skill uses a Figma MCP plugin, so Claude Code environment is required. On large systems (100+ components), full audits can run 10-15 minutes. Dark mode values require a separate mode setup in Figma; the skill currently handles light mode primary. Pixel-perfect rendering of complex designs exports at 97-99% fidelity due to font anti-aliasing and continuous corner smoothing differences between Figma and web renderers.

Key Features