| 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. |
Frontend Aesthetics Skill
Based on Anthropic's formula for improving frontend design through steerability.
The Problem
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.
Instructions
Make creative, distinctive frontends that surprise and delight. Focus on these four dimensions:
Typography
Choose fonts that are beautiful, unique, and interesting.
Never use: Inter, Roboto, Open Sans, Lato, Arial, default system fonts
Good choices:
- Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk
- Editorial: Playfair Display, Crimson Pro, Newsreader
- Technical: IBM Plex family, Source Sans 3
- Distinctive: Bricolage Grotesque, Syne, Outfit, Plus Jakarta Sans
- Premium: Cabinet Grotesk, Satoshi, General Sans, Clash Display
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.
Color & Theme
Commit to a cohesive aesthetic. Use CSS variables for consistency.
Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Draw inspiration from:
- IDE themes (Dracula, Nord, One Dark, Catppuccin, Tokyo Night)
- Cultural aesthetics (Japanese minimalism, Scandinavian design, Brutalism)
- Industry-specific palettes (Finance: navy/gold, Health: teal/white, Gaming: neon/dark)
Avoid: Purple gradients on white backgrounds (the ultimate AI slop indicator)
Motion
Use animations for effects and micro-interactions.
- Prioritize CSS-only solutions for HTML
- Use Motion library for React when available
- Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions
Backgrounds
Create atmosphere and depth rather than defaulting to solid colors.
- Layer CSS gradients (radial + linear combinations)
- Use geometric patterns or grids
- Add contextual effects that match the overall aesthetic
- Consider noise textures, grain, or subtle animations
Tailwind CSS v4 Compatibility
CRITICAL: Tailwind v4 has breaking changes. Follow these rules:
Spacing
- Never use:
space-x-*, space-y-* (removed in v4)
- Always use:
gap-* with flex/grid containers instead
<div className="flex space-x-4">
<div className="flex gap-4">
Config Loading
- Tailwind v4 doesn't auto-load
tailwind.config.ts
- Add
@config "../tailwind.config.ts" to your CSS file if using a config
@import "tailwindcss";
@config "../tailwind.config.ts";
CSS Reset Conflicts
- Don't add custom
* { margin: 0 } resets - they break mx-auto, my-* utilities
- Let Tailwind's preflight handle resets
Package.json
- Add
"type": "module" to avoid Node.js ESM warnings
What to Avoid
- Overused font families (Inter, Roboto, Arial, system fonts)
- Clichéd color schemes (purple gradients on white)
- Predictable layouts and component patterns
- Cookie-cutter design that lacks context-specific character
- Space Grotesk (even this is becoming overused)
space-x-* and space-y-* utilities (use gap-* instead)
Key Principle
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!
Example: Theme Ideas
Instead of the default "tech purple":
- Obsidian Terminal: Deep black (#0a0a0a), electric green (#00ff9f), JetBrains Mono
- Editorial Luxury: Cream (#faf9f6), deep navy (#1a1a2e), Playfair Display + Source Sans
- Neon Brutalist: Pure white, bold black, hot pink accent (#ff006e), IBM Plex Mono
- Nordic Minimal: Cool gray (#e5e5e5), slate blue (#475569), Outfit
- Retro Computing: Amber on dark (#ffb000 on #1a1a1a), VT323 or IBM Plex Mono
