AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Visual design

Design System Audit

Conduct a comprehensive audit of a design system for consistency and improvements.

Prompt

Conduct a comprehensive design system audit. Analyze:

1. Visual Consistency
   - Color palette usage
   - Typography consistency
   - Spacing and layout patterns
   - Component variations

2. Component Library
   - Component coverage
   - Missing components
   - Component quality
   - Documentation completeness

3. Design Tokens
   - Token organization
   - Token usage
   - Missing tokens
   - Naming conventions

4. Accessibility
   - WCAG compliance
   - Color contrast issues
   - Keyboard navigation
   - Screen reader support

5. Documentation
   - Documentation quality
   - Usage guidelines
   - Code examples
   - Design examples

6. Implementation
   - Code quality
   - Framework consistency
   - Performance considerations
   - Browser compatibility

7. Gaps and Opportunities
   - Missing patterns
   - Inconsistencies to fix
   - Improvement opportunities
   - Prioritized action items

Provide a structured audit report with specific findings and recommendations.

How to use

  1. 01

    Gather your design system materials: Screenshots of components, design tokens documentation, component library code, or Figma files

  2. 02

    Add context before the prompt: "Our design system uses [Material Design/Tailwind/custom]. We have [X] components. Main frameworks: [React/Vue/etc]."

  3. 03

    If you have Figma files: Use Figma MCP with Claude or upload screenshots to AI tools that support image analysis. Say "Audit this design system"

  4. 04

    If you have code: Paste your component library structure or design tokens code. Say "Audit this design system implementation"

  5. 05

    Paste the prompt into your preferred AI tool, like Claude (with Figma MCP) or ChatGPT (with image uploads)

  6. 06

    Review the audit section by section. Ask follow-ups: "Prioritize the top 5 gaps" or "Focus on accessibility issues" or "Compare token usage across components"

  7. 07

    Export the audit report to a document or project management tool for action items

Tips

  • For Figma-based systems: Use Claude with Figma MCP (see official guide) for direct design file analysis
  • Include component screenshots: Upload screenshots of your actual components for visual consistency checking
  • For code-based systems: Paste your design tokens JSON/TypeScript file for accurate token analysis
  • Request prioritized action items: Ask "Rank gaps by impact and effort" to get an actionable roadmap
  • Save audit as baseline: Use the first audit as a baseline, then re-run monthly to track improvements