Design Audit Command

Command: /design:audit

Analyze and audit existing frontend design without making changes. Identifies generic "AI slop" patterns, calculates AI Slop Score, and provides actionable recommendations. Use this to understand design issues before deciding whether to apply fixes.

When to Use

Use /design:audit for:

• Analyzing existing design without changes
• Getting AI Slop Score and recommendations
• Understanding design problems before fixing
• Design review and critique
• Before/after comparison preparation

Use /design:enhance for:

• Full design enhancement with implementation
• Automatic fixes applied immediately
• Complete typography, color, animation overhaul
• Production-ready design improvements

How It Works

Analysis-Only Workflow (No Implementation):

1. Design Audit: Calculate AI Slop Score (0-100)
2. Pattern Detection: Identify generic patterns
3. Recommendations: Suggest specific improvements
4. Report Generation: Detailed findings and action plan

No Changes Made - This command is read-only and safe to run on production code

Usage

Basic Audit

/design:audit "src/components/LandingPage.tsx"
/design:audit "dashboard design"
/design:audit "current website"

Specific Component Audit

/design:audit "navigation menu"
/design:audit "product card design"
/design:audit "login form"

Full Application Audit

/design:audit "entire React app"
/design:audit "marketing website"
/design:audit "admin dashboard"

Output Format

Terminal (15-20 lines):

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DESIGN AUDIT RESULTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

AI Slop Score: 75/100 (High - Needs Improvement)

Generic Patterns Detected:
1. Typography: Inter font (30 points) - Very common AI default
2. Colors: Purple gradient (25 points) - Overused AI aesthetic
3. Background: Plain white (20 points) - No visual depth
4. Animations: None (0 points) - Static interface
5. Layout: Standard grid (0 points) - Acceptable

Top 3 Recommendations:
1. Replace Inter with distinctive pairing (e.g., Playfair Display + Source Sans)
2. Use intentional color scheme (ocean, sunset, forest, not purple)
3. Add layered backgrounds with gradients, textures, or patterns

Full Report: .claude/reports/design-audit-[timestamp].md
Time: 1m 15s

File Report (Comprehensive): Saved to .claude/reports/design-audit-[timestamp].md:

• AI Slop Score breakdown by category
• All generic patterns detected with severity
• Detailed recommendations with code examples
• Before/after mockups (if applicable)
• Action plan prioritized by impact

AI Slop Score Breakdown

Score Components (0-100, lower is better):

Category	Points	Generic Pattern	Distinctive Alternative
Typography	30	Inter, Roboto, Arial	Playfair Display, Space Grotesk, JetBrains Mono
Colors	25	Purple gradients	Ocean (cyan+teal), Sunset (orange+pink), Forest (green+brown)
Background	20	Plain white/solid	Layered gradients, textures, patterns, noise
Animations	15	None or generic	Page load sequences, purposeful micro-interactions
Layout	10	Standard grid	Asymmetric, broken grid, overlapping elements

Scoring:

• 0-30: Distinctive (Excellent)
• 31-50: Above Average (Good)
• 51-70: Average (Needs Work)
• 71-100: Generic AI Slop (Poor)

Audit Report Structure

Section 1: Executive Summary

• AI Slop Score and grade
• Overall assessment
• Priority level (Low/Medium/High/Critical)

Section 2: Typography Analysis

• Font families detected
• Font weight usage
• Type scale analysis
• Recommendations with examples

Section 3: Color Analysis

• Color palette extraction
• Contrast ratio checks (WCAG AA/AAA)
• Generic pattern detection
• Intentional palette suggestions

Section 4: Background Analysis

• Background treatment evaluation
• Depth and layering assessment
• Texture and pattern usage
• Enhancement recommendations

Section 5: Animation Analysis

• Animation inventory
• Motion purpose evaluation
• Accessibility compliance
• Purposeful animation suggestions

Section 6: Layout Analysis

• Grid structure evaluation
• Visual hierarchy assessment
• Innovation score
• Layout enhancement ideas

Section 7: Action Plan

Prioritized recommendations:

1. Quick Wins (1-2 hours)
2. Medium Impact (3-5 hours)
3. Major Overhaul (1-2 days)

Examples

Example 1: Landing Page Audit

/design:audit "marketing landing page"

Output:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DESIGN AUDIT RESULTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

AI Slop Score: 85/100 (Very High - Critical Issues)

Generic Patterns Detected:
1. Typography: Inter font everywhere (30 points)
   → Recommendation: Playfair Display (headings) + Source Sans 3 (body)

2. Colors: Purple (#A855F7) to blue (#3B82F6) gradient (25 points)
   → Recommendation: Ocean theme (Cyan #06B6D4 + Teal #14B8A6)

3. Background: Plain white #FFFFFF (20 points)
   → Recommendation: Layered radial gradient with geometric grid overlay

4. Animations: None detected (10 points)
   → Recommendation: Page load fade + staggered section reveals

5. Layout: Standard 12-column grid (0 points)
   → Acceptable, but could add asymmetric hero section

Design Grade: D (Poor)
Priority: HIGH - Immediate attention needed

Full Report: .claude/reports/design-audit-landing-20250115.md
Time: 1m 22s

Example 2: Dashboard Audit

/design:audit "admin dashboard"

Output:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DESIGN AUDIT RESULTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

AI Slop Score: 45/100 (Average - Room for Improvement)

Generic Patterns Detected:
1. Typography: Roboto font (15 points) - Partial credit, overused but acceptable
2. Colors: Intentional blue palette (0 points) - Good contrast, professional
3. Background: White cards on gray (5 points) - Basic but functional
4. Animations: Hover states only (10 points) - Could add micro-interactions
5. Layout: Sidebar + grid (0 points) - Standard but effective

Design Grade: B- (Above Average)
Priority: MEDIUM - Enhancement optional

Strengths:
- Good color contrast (WCAG AAA compliant)
- Consistent spacing and alignment
- Clear information hierarchy

Improvement Opportunities:
1. Consider distinctive monospace font for data tables
2. Add subtle background patterns to reduce flatness
3. Implement loading state animations for better UX

Full Report: .claude/reports/design-audit-dashboard-20250115.md
Time: 58s

Example 3: Component Audit

/design:audit "product card component"

Output:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DESIGN AUDIT RESULTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

AI Slop Score: 55/100 (Average - Needs Improvement)

Component: Product Card

Generic Patterns Detected:
1. Typography: Inter 14px/16px/20px (20 points)
   → Use varied scale: 12px/16px/24px with different weights

2. Colors: Default Tailwind blue (10 points)
   → Apply consistent brand colors with intentional palette

3. Hover Animation: Scale 1.05 (5 points)
   → Generic, consider glow effect or shadow elevation instead

Specific Recommendations:
1. Font Scale: Increase title from 20px to 28px (more dramatic)
2. Weight Contrast: Use font-weight 900 for price, 300 for description
3. Hover State: Replace scale with shadow-lg + subtle border glow
4. Card Background: Add subtle gradient or texture

Design Grade: C+ (Average)
Priority: MEDIUM

Full Report: .claude/reports/design-audit-product-card-20250115.md
Time: 42s

Comparison with /design:enhance

Feature	/design:audit	/design:enhance
Analysis	✅ Comprehensive	✅ Comprehensive
AI Slop Score	✅ Calculated	✅ Calculated
Recommendations	✅ Detailed	✅ Implemented
Code Changes	❌ None	✅ Applied
File Report	✅ Yes	✅ Yes
Safe for Production	✅ Read-only	⚠️ Makes changes
Time	1-3 min	5-15 min
Best For	Analysis first	Full enhancement

Workflow Integration

Recommended Workflow:

1. Run /design:audit first to understand issues
2. Review recommendations in report
3. Decide which improvements to apply
4. Run /design:enhance to implement changes
5. Compare before/after AI Slop Scores

Example:

# Step 1: Audit current design
/design:audit "landing page"
# AI Slop Score: 85/100 - Review recommendations

# Step 2: Apply fixes
/design:enhance "landing page"
# AI Slop Score: 25/100 - Improvement: 60 points

Pattern Learning

Audit patterns stored for optimization:

{
  "task_type": "design_audit",
  "component_type": "landing_page",
  "ai_slop_score": 85,
  "generic_patterns": ["inter_font", "purple_gradient", "plain_background"],
  "time_taken": "1m 22s"
}

Learns:

• Common generic patterns by component type
• Effective recommendations by project type
• AI Slop Score baselines for different designs

---

Version: 1.0.0 Integration: Works with frontend-design-enhancer agent (audit mode) Platform: Cross-platform (Windows, Linux, Mac) Dependencies: Read tool for file analysis