Design System Audit & Gap Analysis Generator
Audit design systems, identify component gaps, and generate prioritized improvement roadmaps
What You Can Do
You can conduct comprehensive design system audits by feeding Claude your component inventory, design token documentation, and usage patterns. Claude synthesizes this data to identify inconsistencies, categorize issues by severity and business impact, and generate structured improvement recommendations with clear prioritization. This transforms scattered observations into actionable governance frameworks that your engineering and product teams can execute.
Features
Identify missing components, duplicate patterns, and inconsistent naming conventions across your design system
Detect token inconsistencies, unused values, and opportunities to consolidate and normalize your token library
Create policies and contribution guidelines based on identified gaps and team structure
Categorize findings by business impact, technical debt, and resource requirements to guide allocation decisions
Generate structured audit trails and component matrices for compliance, onboarding, and future reference
Assess how design systems perform across web, mobile, and emerging platforms to surface platform-specific gaps
Calculate design system health scores and consistency percentages to track improvement over time
Produce phased improvement plans with estimated effort levels and recommended team assignments
Example Output
Input: You upload your Figma component library audit CSV with columns (Component Name, Current Status, Production Status, Token Usage, Documentation Level), along with governance notes.
Output:
DESIGN SYSTEM AUDIT REPORT
- 🔴 CRITICAL GAPS (9 findings)
- Button component: 4 undocumented variants in production
- Color tokens: 23 inconsistent hex values for "Primary Blue"
- Missing: Form validation patterns, loading states for 6 components
- 🟡 MEDIUM PRIORITY (14 findings)
- Token naming: 8 tokens use deprecated naming convention
- Documentation: 31% of components missing accessibility notes
- Governance: No contribution guidelines for new component types
- 🟢 LOW PRIORITY (6 findings)
- Naming consistency: Icon naming convention needs alignment
- Metadata: Some components missing design file links
RECOMMENDED ROADMAP
Phase 1 (Sprint 1-2): Consolidate color tokens, document Button variants
Phase 2 (Sprint 3-4): Build missing form patterns, establish contribution guidelines
Phase 3 (Sprint 5-6): Audit and document accessibility across all components
What's Included
- SKILL.md instruction file with audit methodology and analysis frameworks:
- Design System Audit Template: CSV/spreadsheet template for documenting components, tokens, status, and inconsistencies
- Governance Framework Checklist: Policies for component contribution, token usage, and documentation standards
- Component Gap Analysis Worksheet: Structured format for mapping current vs. intended component coverage
- Roadmap Prioritization Matrix: Impact/effort assessment tool for sequencing improvement work
Who It's For
- Design System Managers — Conducting health assessments and creating resource justification to leadership
- UI/UX Designers — Preparing for design system overhauls and platform expansions
- Design Operations Leads — Establishing governance policies and scaling design infrastructure
- Product Engineering Leads — Evaluating component compliance and code-design alignment
- Enterprise Design Leads — Managing design systems across multiple product lines or acquired companies
Best For
- Full design system health audits before major platform expansion or refactor
- Integrating new product lines or platforms into existing design systems
- Documenting component drift between design files and production code
- Creating component inventories for compliance, migration, or onboarding
- Establishing governance policies and contribution frameworks for design system maturity
You might also like
You can diagnose why layouts break at specific breakpoints and receive precise CSS fixes to resolve them. The skill identifies root causes of overflow problems, flex/grid misalignment, and mobile usability failures, then provides responsive design patterns to prevent similar issues from recurring across your entire project.
by calesthio
You can systematically design reusable responsive grid systems, establish spacing scales and breakpoint strategies, and document component layout behaviors for seamless developer handoff. This skill generates technical layout specifications that reduce design-to-development friction and ensure accessibility compliance from the design phase, enabling teams to build consistent, scalable web interfaces across all devices.
by calesthio
You can generate detailed interaction specifications for complex user flows and component behaviors that eliminate ambiguity in handoff. The skill produces structured documentation including state diagrams, transition tables, animation timing, keyboard navigation patterns, error handling workflows, and accessibility requirements—all formatted for both designers and developers to reference.
by calesthio
You can systematically evaluate your design system's health using structured frameworks that assess component consistency, design token usage, documentation completeness, and developer adoption. The skill generates prioritized gap analysis reports that quantify issues—like duplicate components, token sprawl, or implementation friction—and translates findings into executive-ready roadmaps with business cases for remediation. You'll move beyond subjective design assessments to data-backed improvement strategies.
by calesthio
You can generate customized interview frameworks that assess design ops candidates against specific competencies aligned with your team's maturity and challenges. The skill produces behavioral interview questions, technical scenario assessments, and scoring rubrics that help interview panels evaluate candidates objectively across process optimization, metrics thinking, tool knowledge, and organizational influence—moving beyond portfolio review to predict job-ready performance.
by calesthio
You can write clean, maintainable Tailwind CSS directly in React JSX using utility-first principles. This skill helps you compose responsive layouts, implement dark mode themes, extract reusable component patterns, convert existing CSS to Tailwind, and troubleshoot Tailwind configuration issues. It's optimized for dashboards, forms, cards, modals, and other typical application interfaces.
by calesthio
You can generate, test, and iterate on onboarding microcopy that handles the unique constraints of first-run experiences: zero product knowledge assumptions, anxiety management around data entry and permissions, and sequential task dependencies. Claude helps you stress-test copy variants against user objections, anticipate drop-off points, and create messaging that balances education, reassurance, and motivation in minimal word count.
by calesthio
You can rapidly build responsive, production-ready UI designs using Tailwind's utility-first approach. Apply low-level utility classes directly to HTML elements to create custom designs without writing CSS, implement mobile-first responsive layouts, add dark mode and theme customization, and generate optimized CSS bundles through build-time processing that includes only the classes you actually use.
by calesthio