Design

Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics.

Context

Design request: $ARGUMENTS

Your Task

Create a beautiful, distinctive frontend that surprises and delights. Follow these principles:

1. Design Thinking (Before Coding)

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

• Purpose: What problem does this interface solve? Who uses it?
• Tone: Pick a distinctive aesthetic direction:
  • Brutally minimal
  • Maximalist chaos
  • Retro-futuristic
  • Organic/natural
  • Luxury/refined
  • Playful/toy-like
  • Editorial/magazine
  • Brutalist/raw
  • Art deco/geometric
  • Soft/pastel
  • Industrial/utilitarian
• Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

State your chosen direction before coding.

2. Typography

Choose fonts that are beautiful, unique, and interesting:

NEVER use: Inter, Roboto, Arial, Open Sans, system fonts

Consider:

• Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk
• Editorial: Playfair Display, Crimson Pro, Fraunces
• Startup: Clash Display, Satoshi, Cabinet Grotesk
• Technical: IBM Plex family, Source Sans 3
• Distinctive: Bricolage Grotesque, Obviously, Newsreader

Use extreme contrasts: weight 100/200 vs 800/900, size jumps of 3x+

3. Color & Theme

• Commit to a cohesive aesthetic
• Use CSS variables for consistency
• Dominant colors with sharp accents > timid, evenly-distributed palettes
• Draw from IDE themes, cultural aesthetics for inspiration

AVOID: Purple gradients on white backgrounds (classic AI slop)

4. Motion

• Use animations for effects and micro-interactions
• Prioritize CSS-only solutions for HTML
• Focus on high-impact moments: page load with staggered reveals
• Hover states that surprise
• Smooth, purposeful transitions

5. Spatial Composition

• Unexpected layouts
• Asymmetry
• Overlap
• Diagonal flow
• Grid-breaking elements
• Generous negative space OR controlled density

6. Backgrounds & Visual Details

Create atmosphere and depth:

• Gradient meshes
• Noise textures
• Geometric patterns
• Layered transparencies
• Dramatic shadows
• Decorative borders
• Custom cursors
• Grain overlays

Output

Generate complete, production-ready code:

• HTML/CSS/JS or React/Vue/Svelte as appropriate
• Include all necessary imports (fonts, libraries)
• Self-contained and functional
• Meticulously refined in every detail

Remember: Claude is capable of extraordinary creative work. Don't hold back!