// Prevents generic AI-generated designs by guiding typography, color, motion, and background choices. Use when creating frontend designs, landing pages, dashboards, or any UI/UX work. Helps avoid the "AI slop" aesthetic.
| name | frontend-aesthetics |
| description | Prevents generic AI-generated designs by guiding typography, color, motion, and background choices. Use when creating frontend designs, landing pages, dashboards, or any UI/UX work. Helps avoid the "AI slop" aesthetic. |
Based on Anthropic's formula for improving frontend design through steerability.
LLMs converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic - Inter fonts, purple gradients on white backgrounds, and minimal animations.
Make creative, distinctive frontends that surprise and delight. Focus on these four dimensions:
Choose fonts that are beautiful, unique, and interesting.
Never use: Inter, Roboto, Open Sans, Lato, Arial, default system fonts
Good choices:
Pairing principle: High contrast = interesting. Display + monospace, serif + geometric sans, variable font across weights.
Use extremes: 100/200 weight vs 800/900, not 400 vs 600. Size jumps of 3x+, not 1.5x.
Pick one distinctive font, use it decisively. Load from Google Fonts.
Commit to a cohesive aesthetic. Use CSS variables for consistency.
Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Draw inspiration from:
Avoid: Purple gradients on white backgrounds (the ultimate AI slop indicator)
Use animations for effects and micro-interactions.
Create atmosphere and depth rather than defaulting to solid colors.
CRITICAL: Tailwind v4 has breaking changes. Follow these rules:
space-x-*, space-y-* (removed in v4)gap-* with flex/grid containers instead// WRONG (Tailwind v3 only)
<div className="flex space-x-4">
// CORRECT (Tailwind v4 compatible)
<div className="flex gap-4">
tailwind.config.ts@config "../tailwind.config.ts" to your CSS file if using a config/* app/globals.css */
@import "tailwindcss";
@config "../tailwind.config.ts";
* { margin: 0 } resets - they break mx-auto, my-* utilities"type": "module" to avoid Node.js ESM warningsspace-x-* and space-y-* utilities (use gap-* instead)Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics.
You still tend to converge on common choices across generations. Avoid this: it is critical that you think outside the box!
Instead of the default "tech purple":