Frontend Design

Phase 0: Gemini Research (MANDATORY)

Before ANY frontend work, get design direction from Gemini:

gemini -p "I'm building [describe component/page]. Research:
1. Distinctive design approaches (avoid AI-slop aesthetics)
2. Real-world examples of excellent [component type]
3. Current typography/color/layout trends for this context
4. Unexpected alternatives to obvious solutions"

Why mandatory: Web grounding surfaces current trends, prevents convergence.

Design Thinking

Before coding, commit to a BOLD aesthetic direction:

1. Purpose: What problem? Who uses it?
2. Tone: Pick extreme (brutalist, luxury, playful, editorial, organic...)
3. Differentiation: What's the ONE thing someone will remember?

CRITICAL: Bold maximalism and refined minimalism both work—the key is intentionality.

Core Principles

• Typography: Distinctive fonts, not Inter/Roboto/Space Grotesk
• Color: Dominant + accent, brand-tinted neutrals, no pure grays
• Motion: One orchestrated moment > scattered micro-interactions
• Layout: Asymmetry, overlap, diagonal flow, grid-breaking
• Backgrounds: Gradients, noise, patterns—not solid colors

See: references/aesthetics-guidelines.md

Quality Bar: Stripe-Level Excellence

Reference these as quality exemplars:

• Stripe: Obsessive typography, micro-interactions, developer delight
• Linear: Keyboard-first, performance as design, smooth motion
• Vercel: Minimalist clarity, dramatic contrast, confident hierarchy

The Gasp Test: Would users gasp at how stunning this is? If no, keep iterating.

Quality Checkpoints:

• Typography that makes people stop and notice
• Layout that surprises with intentionality
• Motion that feels physically satisfying
• Details that show obsessive care
• Mobile experience that doesn't "suck"

Mobile Excellence (Separate Optimization)

Mobile is NOT just responsive—it requires separate design thinking.

Touch Libraries to Consider

• @use-gesture/react: Touch, mouse, drag, pinch gestures unified
• react-spring: Gesture-aware animations with physical springs
• swiper: Touch slider with native feel
• framer-motion: Gesture recognition + animation
• @capacitor/haptics: Haptics for Capacitor/mobile apps

Mobile-Specific Quality Checks

• Touch targets: 44x44px minimum (Apple HIG)
• Swipe gestures: Natural, discoverable, satisfying
• Haptic feedback: Confirm actions with tactile response
• Pull-to-refresh: Physical bounce, not instant
• Bottom navigation: Thumb-reachable actions
• Momentum scrolling: Physics-based scroll

See: references/mobile-excellence.md

Anti-Convergence

YOU TEND TOWARD GENERIC OUTPUTS. Before implementing, ask:

• "Have I used this font/color/layout recently?"
• "What's a distinctive alternative?"
• "Does this feel unique to THIS project?"

Vary every project: light/dark, font pairings, aesthetics, color approach.

See: references/anti-patterns.md

Advanced Techniques

When basic CSS isn't enough:

• WebGL/Three.js: Living backgrounds, gradient meshes
• GSAP/Framer Motion: Complex animation sequences
• CSS Art: Pure CSS illustrations, clip-path magic
• ASCII: Terminal/brutalist aesthetics
• Iconify: 200k+ icons when Lucide isn't enough

See: references/advanced-techniques.md

References

• references/aesthetics-guidelines.md - Typography, color, motion, spatial composition
• references/advanced-techniques.md - WebGL, animations, CSS art, icons, asset generation
• references/anti-patterns.md - AI slop to avoid, convergence traps, variation mandate