name: m3-anti-slop-validator description: Detect and prevent generic AI aesthetics (purple gradients, flat layouts, predictable patterns) in M3 components. Validates typography, colors, and layout against expressive design standards with 0-100 quality scoring.
M3 Anti-Slop Validator
Purpose
Enforce M3 Expressive aesthetic standards by detecting and preventing generic "AI slop" patterns: purple gradients, flat layouts, timid contrasts, and cookie-cutter designs. Provides automated validation with aesthetic quality scoring (0-100) and actionable remediation steps.
When to Use
Use this skill when you need to:
- Validate component aesthetics against M3 Expressive standards before deployment
- Detect generic AI patterns (Inter fonts, purple gradients, flat backgrounds)
- Score design quality with objective 0-100 aesthetic rating
- Generate remediation reports with specific improvement recommendations
- Prevent design system drift by catching slop before it ships
- Enforce expressive standards in CI/CD pipelines
- Audit existing components for M3 compliance
Trigger scenarios:
- "Is this component too generic?"
- "Validate this design against M3 Expressive standards"
- "Why does this feel like AI-generated slop?"
- "Score this component's aesthetic quality"
Overview
This skill enforces M3 Expressive aesthetic standards by:
- Detecting Generic Fonts - Flag Inter, Roboto, Arial, system fonts (unless paired with distinctive display fonts)
- Identifying Clichéd Colors - Detect purple gradients on white, timid palettes, boring color schemes
- Spotting Flat Layouts - Find solid backgrounds, lack of depth, no layering
- Flagging Predictable Patterns - Generic component arrangements, cookie-cutter designs
- Scoring Aesthetic Quality - Overall creativity and distinctiveness rating (0-100)
Core Validation Categories
1. Generic Fonts (Critical)
Forbidden Fonts (Without Distinctive Pairing):
- ❌ Inter, Roboto, Open Sans, Arial, Helvetica, Lato
- ❌ System fonts (-apple-system, BlinkMacSystemFont, etc.)
Detection: Scans code for forbidden font families. If found alone (without distinctive display font), flags as critical violation.
Pass: Plus Jakarta Sans, Poppins, Montserrat, Sora, Crimson Pro Fail: Inter alone, Roboto alone, system fonts
2. Clichéd Colors (Critical)
Forbidden Color Patterns:
- ❌ Purple gradient on white (#7C4DFF → #9C27B0 on #FFFFFF)
- ❌ Generic Material Blue (#2196F3, #1976D2)
- ❌ Timid palettes (all colors < 20% saturation)
- ❌ Evenly distributed colors (no dominant color)
Pass: Vibrant, personalized palettes (teal/coral, magenta/cyan) Fail: Purple gradients, desaturated colors, no dominant color
3. Flat Layouts (Warning)
Forbidden Layout Patterns:
- ❌ Solid backgrounds (no gradients, no patterns)
- ❌ No elevation (all elements at same z-level)
- ❌ Uniform spacing (all gaps identical, no rhythm)
Pass: Layered gradients, elevation tokens, varied spacing Fail: Flat solids, no depth effects, mechanical spacing
4. Predictable Patterns (Warning)
Forbidden Design Patterns:
- ❌ Monotone font pairing (Roboto display + Roboto body)
- ❌ Timid weight contrasts (400 vs 500, ratio < 1.5x)
- ❌ Timid size contrasts (24px vs 16px, ratio < 2x)
- ❌ No hover states (static components)
Pass: High-contrast pairings, extreme weights (100 vs 900), spring-physics hover Fail: Same font family, timid contrasts, no interactions
Aesthetic Quality Score (0-100)
Scoring Algorithm:
- Typography (25 points): Font distinctiveness, weight contrast, size contrast
- Color (25 points): Palette vibrancy, saturation, dominance
- Layout (25 points): Depth effects, elevation, spacing rhythm
- Interaction (25 points): Hover states, animations, spring physics
Grade Scale:
- A (90-100): Exceptional - Strong M3 Expressive principles
- B (80-89): Good - Minor improvements possible
- C (70-79): Acceptable - Needs improvement
- D (60-69): Below standards - Review violations
- F (<60): Critical - Complete redesign recommended
Validation Report Format
{
"aestheticQuality": {
"total": 72,
"breakdown": {
"typography": 18,
"color": 20,
"layout": 15,
"interaction": 19
},
"grade": "C",
"recommendation": "Acceptable design. Focus on improving typography and color for more impact."
},
"violations": [
{
"category": "typography",
"pattern": "Generic font detected",
"severity": "critical",
"details": {
"fontFamily": "Inter, sans-serif",
"location": "Line 42",
"suggestion": "Replace 'Inter' with 'Plus Jakarta Sans Variable'."
}
}
],
"remediationSteps": ["1. Replace Inter with Plus Jakarta Sans Variable", "2. Use vibrant color palette: teal + coral + purple", "3. Add layered background gradients", "4. Apply elevation tokens for depth", "5. Add spring-physics hover effects"]
}
Usage
Basic Validation
# Validate aesthetic quality and detect AI slop
m3-anti-slop-validator \
--file frontend/src/components/ui/Card/Card.tsx \
--tokens design-system/tokens-expressive.json \
--report validation-report.json
Within Design Systems
// Run after M3 migrations to validate final output
const validation = await runSkill("m3-anti-slop-validator", {
code: finalCode,
tokens: tokensExpressive,
});
if (validation.aestheticQuality.total < 80) {
console.warn("⚠️ Low aesthetic quality score. Review violations.");
}
Validation Checklist
- No forbidden fonts (Inter, Roboto, Arial) without distinctive pairing
- No purple gradients on white backgrounds
- Color saturation ≥ 30% (vibrant, not timid)
- Dominant color palette (not evenly distributed)
- Layered backgrounds (gradients, patterns, not flat solids)
- Elevation tokens used for depth
- Varied spacing rhythm (not uniform)
- Weight contrast ≥ 3x (100 vs 900, not 400 vs 500)
- Size contrast ≥ 3x (57px vs 12px, not 24px vs 16px)
- Hover states with spring physics
- Aesthetic quality score ≥ 80
Troubleshooting
Issue: False Positive on Inter Font
Solution:
- Ensure distinctive display font is clearly defined in code
- Pair with Playfair Display, Crimson Pro, or similar high-contrast font
Issue: Low Color Score Despite Vibrant Palette
Solution:
- Check for dominant color (avoid evenly distributed colors)
- Ensure 40-80% saturation range
- Avoid generic Material Blue (#2196F3)
Issue: Layout Score Low Despite Using Elevation
Solution:
- Add layered backgrounds (gradients, patterns)
- Vary spacing scales (8px, 16px, 24px, 40px)
- Ensure visual hierarchy is clear
Related Skills
- m3-expressive-typography-enhancer - Enhance typography with variable fonts
- m3-atmospheric-backgrounds - Create layered atmospheric effects
- m3-spring-motion-choreography - Add spring-physics interactions
Version: 2.0.0 (Optimized) Status: Production Ready