Frontend UI Design

Create visually distinctive, aesthetically pleasing frontend interfaces that avoid generic "AI slop" patterns.

When to Use

Use this skill when:

•User requests frontend UI creation (HTML, CSS, JavaScript, or React)
•User asks to build a webpage, landing page, or web interface
•User wants to create visual components or layouts
•User mentions design, aesthetics, or "make it look good"
•User asks for dashboard, portfolio, or application UI

Core Principle

CRITICAL: Without explicit aesthetic guidance, Claude defaults to generic, conservative designs (white backgrounds, purple accents, Inter/Roboto fonts, predictable layouts). This skill provides research-backed strategies to create distinctive, visually interesting interfaces.

The Four Design Dimensions

Always address these four areas when creating frontend UIs:

1. Typography

AVOID these overused fonts:

•Inter, Roboto, Arial, Helvetica, system fonts

USE distinctive alternatives:

•Monospace: JetBrains Mono, Fira Code, IBM Plex Mono, Space Mono
•Display/Geometric: Space Grotesk, Clash Display, Epilogue, Syne
•Serif: Playfair Display, Crimson Pro, Libre Baskerville, Merriweather
•Modern Sans: Outfit, Manrope, General Sans, Satoshi

Typography Best Practices:

•Use high contrast pairings: display + monospace, serif + geometric sans
•Employ extreme weight variations: 100/200 vs 800/900 (not just 400 vs 600)
•Create dramatic size jumps: 3x+ differences, not 1.5x
•Load fonts from Google Fonts and state choices explicitly before coding

Example pairing:

code

Heading: Clash Display (800 weight, 4rem)
Body: JetBrains Mono (300 weight, 0.9rem)
Accent: Space Grotesk (700 weight, 1.2rem)

2. Color & Theme

AVOID these clichéd schemes:

•Purple gradients on white backgrounds
•Generic blue-and-white corporate palettes
•Timid, evenly-distributed colors
•Predictable light mode with subtle accents

USE cohesive aesthetics with CSS variables:

•Commit to a theme: Cyberpunk, Solarpunk, Brutalist, Neo-Tokyo, Retro-Future, Terminal, Vaporwave
•Dominant colors with sharp accents: Not all colors equally represented
•Draw from IDE themes: Dracula, Nord, Gruvbox, Tokyo Night, Monokai
•Cultural aesthetics: Japanese minimalism, Swiss design, Memphis style

Color Strategy:

•Define CSS custom properties for consistency
•Choose 2-3 dominant colors and 1-2 sharp accents
•Consider dark themes as often as light themes
•Use gradients sparingly but boldly when used

Example theme (Cyberpunk):

css

--bg-primary: #0a0e27;
--bg-secondary: #16213e;
--accent-neon: #00ff9f;
--accent-pink: #ff006e;
--text-primary: #e0e0e0;
--text-muted: #8892b0;

3. Motion

Implementation approach:

•For HTML: CSS-only animations
•For React: Use Framer Motion library when available
•Focus on high-impact moments over scattered micro-interactions
•One well-orchestrated page load with staggered reveals > many small animations

Motion Best Practices:

•Use animation-delay for staggered effects
•Animate on mount/page load for impact
•Keep animations smooth (ease-out, ease-in-out)
•Duration: 0.4s-0.8s for most transitions

Example staggered reveal:

css

.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
  opacity: 0;
}

.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
  from { opacity: 0; transform: translateY(20px); }
}

4. Backgrounds

AVOID: Solid white or solid single-color backgrounds

USE atmosphere and depth:

•Layered CSS gradients: Multiple gradients with varying opacity
•Geometric patterns: Grid lines, dots, diagonal stripes
•Contextual effects: Noise texture, grain, subtle animations
•Thematic elements: Match overall aesthetic (circuits for tech, organic shapes for nature)

Background Techniques:

css

/* Layered gradients */
background:
  radial-gradient(circle at 20% 50%, rgba(120, 0, 255, 0.3) 0%, transparent 50%),
  radial-gradient(circle at 80% 80%, rgba(0, 255, 200, 0.2) 0%, transparent 50%),
  linear-gradient(135deg, #0a0e27 0%, #16213e 100%);

/* Grid pattern */
background-image:
  linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 50px 50px;

/* Dots pattern */
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;

Critical Warnings: Avoid "AI Slop"

Think outside the box! It is CRITICAL that you:

•✅ Vary between light and dark themes (don't default to light)
•✅ Use different fonts each time (avoid convergence on Space Grotesk)
•✅ Try different aesthetics (cyberpunk, brutalist, retro, minimalist)
•❌ Never use: Inter, Roboto, Arial as primary fonts
•❌ Never default to: White background with purple accents
•❌ Avoid: Cookie-cutter layouts, predictable component patterns
•❌ Don't create: Generic designs lacking context-specific character

Workflow

When creating frontend UIs, follow this process:

Step 1: Understand Context

Ask clarifying questions about:

•Purpose of the interface
•Target audience
•Desired mood/feeling
•Any specific aesthetic preferences

Step 2: Choose Aesthetic Direction

Pick a cohesive theme based on context:

•Tech/Dev: Terminal, Cyberpunk, Hacker aesthetic
•Creative: Vaporwave, Memphis, Brutalist
•Professional: Swiss design, Minimalist, Editorial
•Organic: Solarpunk, Nature-inspired, Warm tones

Step 3: State Design Decisions Explicitly

Before writing code, declare:

code

Theme: [chosen aesthetic]
Fonts: [heading font], [body font], [accent font]
Colors: [dominant colors and accents]
Motion: [key animations planned]
Background: [approach chosen]

Step 4: Implement with Best Practices

Technical Requirements:

•Use vanilla HTML, CSS, JavaScript OR React as requested
•Include Tailwind CSS if appropriate
•Inline all CSS and JavaScript for single-file deliverables
•Load fonts from Google Fonts
•Use CSS custom properties for theming
•Ensure responsive design (mobile-first approach)

Step 5: Create High-Impact Moments

•Orchestrate page load animations
•Use staggered reveals for content
•Add hover states that feel responsive
•Consider scroll-triggered animations sparingly

Examples

Example 1: Developer Portfolio (Dark Theme)

Stated Design:

•Theme: Terminal/Hacker aesthetic with green accents
•Fonts: JetBrains Mono (all text), weight variations for hierarchy
•Colors: Dark bg (#0d1117), green accent (#39ff14), muted gray text
•Motion: Typing animation on hero text, staggered fade-in on projects
•Background: Subtle grid pattern with scanline effect

Key Features:

•Monospace typography throughout
•CRT monitor aesthetic with scanlines
•Green phosphor glow effects
•Terminal-style navigation

Example 2: Creative Agency Landing (Light Theme)

Stated Design:

•Theme: Swiss Brutalist with bold typography
•Fonts: Clash Display (headings 900 weight), Space Grotesk (body 300 weight)
•Colors: Off-white (#f5f5f0), black, one sharp red accent (#ff0000)
•Motion: Bold elements sliding in from edges on load
•Background: Off-white with subtle noise texture

Key Features:

•Extreme type sizing (hero at 6rem+)
•Asymmetric grid layout
•Sharp geometric shapes as accents
•High contrast black/white with red sparingly

Example 3: App Dashboard (Dark Theme)

Stated Design:

•Theme: Neo-Tokyo night with pink/cyan accents
•Fonts: Outfit (headings 700), IBM Plex Mono (data/numbers)
•Colors: Dark navy (#0a1128), pink (#ff006e), cyan (#00f5ff)
•Motion: Smooth transitions on card hovers, data count-up animations
•Background: Dark with subtle radial gradient and grid

Key Features:

•Neon-style accents on interactive elements
•Glassmorphism cards with backdrop blur
•Monospace for all numerical data
•Glowing borders on focus states

Isolated Dimension Prompting

For targeted control, you can isolate single dimensions:

Typography-Only Adjustment

"Keeping all other design elements the same, update only the typography using Crimson Pro for headings and Fira Code for body text with extreme weight contrast."

Theme-Only Adjustment

"Lock the aesthetic to a Solarpunk theme: warm earth tones, organic shapes, nature-inspired patterns, green/gold accents, optimistic futuristic feel."

Motion-Only Enhancement

"Add a well-orchestrated page load sequence: hero fades in first (0.5s), then navigation staggers in (0.2s delays), then content cards reveal bottom-to-top."

Font Rotation Strategy

To avoid convergence on the same fonts, rotate through these distinctive combinations:

Set 1 - Terminal Aesthetic:

•JetBrains Mono + IBM Plex Mono

Set 2 - Modern Editorial:

•Playfair Display + Space Grotesk

Set 3 - Geometric Bold:

•Clash Display + Manrope

Set 4 - Retro Future:

•Space Mono + Outfit

Set 5 - Elegant Tech:

•Crimson Pro + Fira Code

Set 6 - Neo Brutalist:

•Syne + General Sans

Quality Checklist

Before delivering, verify:

Notes

•Source: Based on Anthropic's "Prompting for Frontend Aesthetics" research
•Variety is critical: Consciously vary themes, fonts, and approaches across different projects
•Context matters: Match aesthetic to purpose (playful vs professional, technical vs creative)
•Bold choices: Better to be distinctive than safe and generic
•Performance: Keep animations performant (CSS transforms, not layout changes)
•Accessibility: Ensure sufficient contrast ratios and readable font sizes

References

For deeper exploration, consult REFERENCE.md for:

•Extended font pairing library
•Detailed color palette examples
•Animation cookbook
•Background pattern recipes
•Theme architecture examples