Audit Design Systems End to End

Gives your design system a complete technical and UX audit in one conversation. 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 artifacts.

Choose your mode based on scope. Hardcore Mode audits your entire Figma system across four layers (technical, UX, accessibility, design intentionality), produces a maturity score and action plan, and applies fixes after approval. Soft Mode does an 8-point deep-dive on a single component, checking variant completeness, token bindings, states, and interaction quality. Spec Mode validates a component against your custom requirements. After you approve fixes, the skill applies changes in Figma, saves audit snapshots for drift detection, then exports tokens (W3C format, Style Dictionary compatible), TypeScript types, Storybook stories with realistic data, and a system handbook. Output: design-system/ directory with tokens.json, component.stories.tsx, component.types.ts, and HANDOFF.md ready to drop into your codebase.

Requires Claude Code (desktop or web) with Figma MCP plugin installed. Reads Figma structure via use_figma tool calls. If codebase path provided, parses tailwind.config.js, tokens.json, and Storybook stories to detect design-code drift. Generates W3C Design Token format (Style Dictionary compatible), CSS custom properties with light/dark mode support, and TypeScript with full JSDoc. All exports follow production standards: realistic data, every variant named, every prop documented.