What is frontend-aesthetics?

The Frontend Aesthetics skill is a specialized tool designed to elevate AI-generated web interfaces beyond generic 'AI slop.' It enforces high-end design principles by guiding Claude to make sophisticated choices in typography, color palettes, motion, and background depth. By moving away from overused defaults like Inter fonts and purple gradients, this skill ensures that frontend designs, landing pages, and dashboards possess a distinctive, professional, and human-crafted feel. It also incorporates critical technical guardrails for Tailwind CSS v4, ensuring that the generated code is not only beautiful but also modern and standards-compliant.

When should I use frontend-aesthetics?

frontend-aesthetics is useful in the following scenarios: • 1. High-End Landing Page Creation: Generate unique, visually striking landing pages that stand out from competitors by utilizing distinctive font pairings (e.g., Playfair Display with Source Sans) and layered CSS backgrounds. • 2. Professional Dashboard UI/UX: Build sophisticated administrative interfaces using curated themes like 'Obsidian Terminal' or 'Nordic Minimal' to improve user engagement and data clarity. • 3. Brand Identity Implementation: Translate specific brand guidelines into functional frontend code, ensuring consistent use of color theory, spacing, and motion that aligns with a company's creative direction. • 4. Tailwind CSS v4 Migration & Development: Automatically apply the latest Tailwind CSS v4 best practices, such as replacing deprecated spacing utilities with modern flex/grid gap properties and managing ESM configuration.

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

// WRONG (Tailwind v3 only)
<div className="flex space-x-4">

// CORRECT (Tailwind v4 compatible)
<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

/* app/globals.css */
@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

frontend-aesthetics

When & Why to Use This Skill

Use Cases