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
Analyze raw usability testing data—transcripts, session notes, task completion rates, and participant feedback—to surface recurring patterns and user behaviors. Claude identifies the highest-impact issues, extracts testable insights about user mental models, and generates prioritized recommendations ranked by severity, frequency, and business impact. This cuts manual synthesis time from hours to minutes while maintaining analytical rigor.
by calesthio
You can conduct comprehensive microcopy audits across your entire product, categorizing copy by type and user journey stage. Claude helps you identify clarity gaps, consistency issues, and conversion blockers, then generates tested alternatives with clear rationale. You'll produce copy guidelines, A/B test frameworks, and localization-ready copy that drives measurable improvements in user completion rates and confidence.
by calesthio
Design production-ready UI components that serve as foundations for scalable design systems. You define clear component APIs, TypeScript/JSDoc prop interfaces, comprehensive variant systems (states, sizes, themes, interactions), and full accessibility markup including ARIA labels and semantic HTML. Claude generates complete Storybook stories and documentation to enable seamless developer handoff and cross-team component consumption.
by az9713
This skill helps you craft error messages and notifications that prioritize clarity and actionability over cleverness. You'll generate empathetic microcopy for error states, in-app notifications, empty states, and edge cases—then test variations against different user personas to minimize cognitive load and maximize task completion rates. It bridges UX research insights with production-ready copy that reduces support tickets and builds user trust.
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 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 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
You'll conduct structured culture audits that go beyond surface-level observations to identify root causes of dysfunction in design teams. Using organizational psychology research, you can analyze team feedback patterns, map collaboration barriers across disciplines, and design targeted interventions that address psychological safety gaps, siloed workflows, and retention risks. Claude helps you transform culture diagnostics into measurable improvement plans tied to specific team performance outcomes.
by calesthio