/frontend-design

Design Philosophy: Avoiding AI Slop

This document provides detailed guidance on creating distinctive, production-grade frontend interfaces that avoid generic "AI-generated" aesthetics.

Core Principle

Choose a clear aesthetic direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Design Thinking Process

Before writing any code, understand the context and commit to a BOLD aesthetic direction:

1. Purpose

• What problem does this interface solve?
• Who uses it and in what context?
• What emotions should it evoke?

2. Aesthetic Tone

Pick a distinctive direction. Here are examples for inspiration:

3. Differentiation

What makes this interface UNFORGETTABLE? What's the one thing someone will remember?

The Five Pillars of Distinctive Design

1. Typography

Do:

• Choose fonts that are beautiful, unique, and characterful
• Pair a distinctive display font with a refined body font
• Use unexpected, personality-rich choices
• Consider the context and audience

Don't:

• Default to Arial, Inter, Roboto, or system fonts
• Use the same fonts across every project
• Ignore font pairing harmony
• Over-rely on weight for hierarchy

Distinctive Font Examples:

2. Color & Theme

Do:

• Commit to a cohesive aesthetic
• Use CSS variables for consistency
• Choose dominant colors with sharp accents
• Consider context (brand, mood, accessibility)

Don't:

• Default to purple gradients on white
• Use timid, evenly-distributed palettes
• Ignore contrast requirements
• Copy trending palettes without adaptation

Palette Strategies:

• Monochromatic: Single hue with varied saturation/lightness
• Complementary: Opposite colors for high contrast
• Analogous: Adjacent colors for harmony
• Split-Complementary: Main color + two adjacent to its complement
• Triadic: Three evenly-spaced colors

3. Motion

Do:

• Focus on high-impact moments
• Create orchestrated page load reveals with staggered animation-delay
• Use scroll-triggered animations that surprise
• Implement hover states with personality

Don't:

• Add motion for motion's sake
• Create scattered, uncoordinated micro-interactions
• Ignore reduced-motion preferences
• Use jarring or disorienting effects

Motion Hierarchy:

1. Page transitions: Most impactful, highest attention
2. Scroll reveals: Content appearing as user explores
3. Hover states: Feedback and delight
4. Micro-interactions: Subtle polish (buttons, toggles)

CSS-First Approach:

/* Staggered reveal */
.item { animation: fadeIn 0.5s ease-out forwards; opacity: 0; }
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }

/* Respect preferences */
@media (prefers-reduced-motion: reduce) {
  .item { animation: none; opacity: 1; }
}

4. Spatial Composition

Do:

• Create unexpected layouts
• Use asymmetry intentionally
• Allow elements to overlap
• Employ diagonal flow and grid-breaking elements
• Balance generous negative space OR controlled density

Don't:

• Default to symmetric card grids
• Treat every element equally
• Fear whitespace (or density, if that's your direction)
• Ignore visual rhythm

Layout Techniques:

• Broken grid: Elements that break the expected grid
• Overlap: Layered elements creating depth
• Scale contrast: Large elements next to small
• Negative space: Breathing room as a design element
• Asymmetric balance: Visual weight distributed unevenly

5. Backgrounds & Visual Details

Do:

• Create atmosphere and depth
• Use contextual effects that match the aesthetic
• Layer transparencies for dimension
• Add texture where appropriate

Don't:

• Default to solid white backgrounds
• Use generic gradient presets
• Forget about dark mode considerations
• Over-apply effects

Visual Effects Palette:

• Gradient meshes
• Noise and grain textures
• Geometric patterns
• Layered transparencies
• Dramatic shadows (soft or hard)
• Decorative borders
• Custom cursors
• Glassmorphism (used intentionally)
• Neumorphism (used sparingly)

What to Avoid: The "AI Slop" Checklist

Typography Anti-Patterns

• Inter everywhere
• Roboto as the only choice
• Arial or system fonts
• Identical font usage across projects

Color Anti-Patterns

• Purple-to-blue gradient on white
• Generic "modern" teal
• Desaturated "safe" palettes
• Unrelated accent colors

Layout Anti-Patterns

• 3-column card grids
• Identical padding everywhere
• Symmetric hero sections
• Predictable section patterns

Effect Anti-Patterns

• Subtle gray shadows on everything
• Generic rounded corners (8px everywhere)
• Smooth but meaningless transitions
• Glass effects without purpose

Implementation Complexity Matching

Critical: Match implementation complexity to aesthetic vision.

Maximalist Designs

• Elaborate code with extensive animations
• Multiple layered effects
• Complex state management for interactions
• Rich color variations

Minimalist Designs

• Restraint and precision
• Careful attention to spacing
• Perfect typography
• Subtle, meaningful details
• "Less" requires more care, not less code

Quality Checklist

Before considering a design complete:

• Typography is distinctive and intentional
• Colors support the aesthetic direction
• Motion is orchestrated, not scattered
• Layout has visual interest and hierarchy
• Details add atmosphere without clutter
• Accessibility is preserved (contrast, motion preferences)
• The design is memorable - someone would recognize it

Remember

"Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision."

No two designs should look the same. Vary themes, fonts, aesthetics. The goal is intentional, memorable, production-grade interfaces.