Visual design·
Share
Design System Audit
Conduct a comprehensive audit of a design system for consistency and improvements.
Use Case
Auditing design systems for consistency, quality, and improvement opportunities.
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
- 1Gather your design system materials: Screenshots of components, design tokens documentation, component library code, or Figma files
- 2Add context before the prompt: "Our design system uses [Material Design/Tailwind/custom]. We have [X] components. Main frameworks: [React/Vue/etc]."
- 3If you have Figma files: Use Figma MCP with Claude or upload screenshots to AI tools that support image analysis. Say "Audit this design system"
- 4If you have code: Paste your component library structure or design tokens code. Say "Audit this design system implementation"
- 5Paste the prompt into your preferred AI tool, like Claude (with Figma MCP) or ChatGPT (with image uploads)
- 6Review the audit section by section. Ask follow-ups: "Prioritize the top 5 gaps" or "Focus on accessibility issues" or "Compare token usage across components"
- 7Export the audit report to a document or project management tool for action items
Pro 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
Tags
design-systemauditconsistencycomponentsquality
Related Patterns
Related Prompts
Branding
Logo System Spec Writer
Turn a chosen logo direction into production-ready logo system specs: lockups, spacing, sizing, color, and usage rules.
logo-designbrand-guidelinesdesign-system
Visual design
UI Component Specification
Generate a detailed UI component specification with states, variants, and interaction patterns.
uicomponentsspecification
Visual design
Visual Hierarchy Design
Design effective visual hierarchy for layouts to guide user attention and improve readability.
visual-hierarchygraphic-designlayout
Visual design
Design System Component Visual Spec Writer
Developer-friendly visual specs: anatomy, tokenized properties per variant/state, spacing, responsive behavior, and accessibility for one component cluster.
visual-designdesign-systemcomponents