Avoid mediocre "AI slop" aesthetics and create a surprisingly unique front end.

## Five Core Dimensions

**1. Typography**

- ❌ Prohibited: Inter, Roboto, Arial, System Fonts

- ✅ Choose: Unique, distinctive fonts

- ✅ Combination: Showcase font + Body font, high contrast

- ✅ Tips: Extreme font weight contrast (100 vs 900), large font size range (3x+)

**2. Color & Theme**

- ✅ Maintain a consistent aesthetic by using CSS variables.

- ✅ Dominant color + vibrant accent color

- ❌ Avoid: Purple gradient + white background

- ✅ Inspiration: IDE themes, cultural aesthetics

**3. Motion**

- ✅ CSS animations take precedence (HTML)

- ✅ Motion Library

- ✅ Focus on High Impact: A Carefully Curated Page Load > Scattered Micro-Interactions

- ✅ Scroll trigger, hover surprise

**4. Spatial Layout**

- ✅ Asymmetrical, overlapping, diagonal flow

- ✅ Break the grid, bold use of white space OR controlled density

**5. Background Details**

- ✅ Create atmosphere and depth

- ✅ Gradient mesh, noise, geometric patterns

- ✅ Layered transparency, dramatic shadows, decorative borders

## Key Principles

- Each design should be different to avoid repetitive convergence.

- Achieving a complexity-matched aesthetic vision

Extreme complexity requires meticulous design, while minimalism requires restraint and precision.

- Break free from conventional thinking and make truly unique choices

⚡ One-line summary

Unique font + bold color scheme + meticulous animation + innovative layout + atmospheric background = unforgettable front-end design

Reject: Inter/Roboto, purple gradient white background, monotonous layout

📋 Quick Checklist

Dimensions and Inspection Items

Should the fonts avoid Inter/Roboto? Are there any unique color combinations?

Does the color scheme have a unified theme? Should purple gradients be avoided?

Does the animation have a carefully choreographed loading effect?

Does the layout deviate from the conventional grid?

Does the background create depth and atmosphere?