Frontend Aesthetics

Create distinctive, creative frontend designs that avoid generic AI-generated aesthetics and cookie-cutter patterns.

When to Use

• •Designing new UI components or layouts
• •Selecting typography and font pairings
• •Choosing color schemes and themes
• •Implementing animations and micro-interactions
• •Reviewing frontend designs for generic patterns
• •Making design decisions for landing pages, dashboards, or web applications
• •Providing design guidance to frontend-focused agents

Instructions

Step 1: Assess Design Context

Understand the project's brand identity, purpose, and target aesthetic before making design decisions.

Key Questions:

• •What is the project's brand personality? (playful, professional, technical, editorial, etc.)
• •Who is the target audience?
• •What emotional response should the design evoke?
• •What makes this project unique?

Step 2: Typography Selection

Choose beautiful, unique, and interesting fonts that match the project's character.

AVOID These Generic Fonts:

• •Inter (massively overused in AI-generated UIs)
• •Roboto
• •Arial
• •System fonts (-apple-system, BlinkMacSystemFont)

Recommended Font Categories:

Code/Technical Aesthetics:

• •JetBrains Mono
• •Fira Code
• •Cascadia Code
• •Victor Mono

Editorial/Sophisticated:

• •Playfair Display
• •Crimson Pro
• •Spectral
• •Lora

Modern/Clean:

• •Space Grotesk (use sparingly - increasingly common)
• •DM Sans
• •Outfit
• •Plus Jakarta Sans

Critical: Vary font choices across different projects. Don't converge on the same selections (like Space Grotesk) across all generations.

Step 3: Color & Theme Design

Create cohesive color systems using CSS variables with dominant colors and sharp accents.

Principles:

• •Dominant colors with sharp accents > timid, evenly-distributed palettes
• •Commit to a cohesive aesthetic using CSS variables
• •Draw inspiration from IDE themes (Dracula, Nord, Tokyo Night, Monokai, etc.)
• •Consider cultural aesthetics relevant to project context

AVOID:

• •Purple gradients on white backgrounds (clichéd AI aesthetic)
• •Generic blue/gray combinations
• •Predictable rainbow palettes with equal weight
• •Safe, corporate color schemes when inappropriate for context

Approach:

• •Choose 1-2 dominant colors that define the brand
• •Add 1-2 sharp accent colors for calls-to-action and highlights
• •Use CSS custom properties for theming
• •Consider both light and dark mode variations

Step 4: Motion & Animation

Use animations strategically for high-impact moments and delightful micro-interactions.

Animation Priorities:

1. •High-impact moments: Orchestrated page loads with staggered reveals
2. •Micro-interactions: Button hovers, transitions, state changes
3. •Contextual effects: Scroll-triggered animations, parallax

Implementation Guidelines:

• •For HTML/Vanilla JS: Prioritize CSS-only solutions (transitions, animations, @keyframes)
• •For React: Use Motion library (Framer Motion) when available
• •Focus on orchestration: One well-orchestrated sequence > scattered micro-interactions
• •Use animation-delay: Create staggered reveals for related elements

Example Pattern:

.stagger-item {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}
.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }

Step 5: Background & Atmosphere

Create depth and atmosphere through layered backgrounds and contextual effects.

AVOID:

• •Defaulting to solid colors
• •Plain white or gray backgrounds
• •Flat, lifeless surfaces

Recommended Approaches:

• •Layer CSS gradients for depth
• •Use geometric patterns (stripes, grids, dots)
• •Add subtle noise textures
• •Implement contextual effects (glow, blur, shadows)
• •Match background complexity to overall aesthetic

Example Patterns:

/* Layered gradient */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Geometric pattern */
background-image:
  repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,.05) 10px, rgba(0,0,0,.05) 20px);

/* Subtle noise texture */
background-image: url('data:image/svg+xml,...'), linear-gradient(...);

Step 6: Validate Against Anti-Patterns

Review the design against common AI-generated UI pitfalls.

Anti-Pattern Checklist:

• • Not using Inter, Roboto, Arial, or system fonts
• • No purple gradients on white backgrounds
• • Color palette has clear hierarchy (dominant + accent, not even distribution)
• • Animations are orchestrated and purposeful (not scattered)
• • Backgrounds have depth and atmosphere (not solid colors)
• • Layout is creative and context-appropriate (not cookie-cutter)
• • Typography is distinctive and matches brand personality
• • Design choices vary from previous projects (not repetitive)

Step 7: Return Design Guidance

Provide specific, actionable design recommendations.

Expected Output:

{
  "typography": {
    "primary": "Font name and reasoning",
    "secondary": "Font name and reasoning",
    "code": "Monospace font (if applicable)"
  },
  "colors": {
    "dominant": ["#hex1", "#hex2"],
    "accent": ["#hex3"],
    "theme_inspiration": "IDE theme or cultural aesthetic reference"
  },
  "animations": {
    "approach": "CSS-only or Framer Motion",
    "focus": "Page load orchestration or micro-interactions",
    "key_moments": ["List of high-impact animation opportunities"]
  },
  "backgrounds": {
    "technique": "Layered gradients, geometric patterns, etc.",
    "atmosphere": "Description of desired depth/mood"
  },
  "anti_pattern_validation": {
    "passed": true,
    "warnings": []
  }
}

Error Handling

• •Missing Context: Ask clarifying questions about brand identity and project purpose
• •Generic Choices Detected: Explicitly warn and suggest distinctive alternatives
• •Repetitive Patterns: Flag convergence on previously used aesthetics
• •Unclear Requirements: Request specific design goals or constraints

Examples

Example 1: Technical Documentation Site

Input:

{
  "project": "Developer documentation platform",
  "brand": "Technical, clean, code-focused",
  "audience": "Software engineers"
}

Output:

{
  "typography": {
    "primary": "DM Sans - modern, readable, technical feel without being generic",
    "secondary": "Crimson Pro - for editorial content and longer reads",
    "code": "JetBrains Mono - excellent code aesthetics with ligatures"
  },
  "colors": {
    "dominant": ["#0f172a", "#1e293b"],
    "accent": ["#38bdf8", "#f97316"],
    "theme_inspiration": "Tokyo Night - dark blues with bright cyan and orange accents"
  },
  "animations": {
    "approach": "CSS-only for performance",
    "focus": "Staggered page load for documentation sections",
    "key_moments": ["Code block reveal", "Navigation transitions", "Search result appearance"]
  },
  "backgrounds": {
    "technique": "Dark gradient with subtle grid pattern overlay",
    "atmosphere": "Technical depth with code editor vibe"
  },
  "anti_pattern_validation": {
    "passed": true,
    "warnings": []
  }
}

Example 2: Creative Agency Landing Page

Input:

{
  "project": "Design agency portfolio",
  "brand": "Bold, creative, experimental",
  "audience": "Potential clients seeking innovative design"
}

Output:

{
  "typography": {
    "primary": "Playfair Display - elegant, sophisticated, makes a statement",
    "secondary": "Outfit - modern contrast for body text",
    "code": "Not applicable"
  },
  "colors": {
    "dominant": ["#000000", "#fffef7"],
    "accent": ["#ff6b35", "#00d9ff"],
    "theme_inspiration": "High-contrast editorial with vibrant accent pops"
  },
  "animations": {
    "approach": "Framer Motion for complex orchestration",
    "focus": "Full-page orchestrated entry sequence",
    "key_moments": ["Hero text reveal with stagger", "Project thumbnails parallax", "Section transitions"]
  },
  "backgrounds": {
    "technique": "Animated gradient mesh with organic shapes",
    "atmosphere": "Dynamic, bold, artistic depth"
  },
  "anti_pattern_validation": {
    "passed": true,
    "warnings": []
  }
}

Example 3: Anti-Pattern Detection

Input:

{
  "project": "SaaS dashboard",
  "proposed_design": {
    "font": "Inter",
    "colors": ["#6366f1", "#8b5cf6", "#ffffff"],
    "background": "solid white",
    "animations": "minimal button hovers"
  }
}

Output:

{
  "typography": {
    "primary": "REJECTED: Inter is overused. Recommend: Plus Jakarta Sans - similar readability, more distinctive",
    "secondary": "Consider Spectral for data-heavy sections to add visual interest"
  },
  "colors": {
    "dominant": ["#0c4a6e", "#082f49"],
    "accent": ["#06b6d4", "#fbbf24"],
    "theme_inspiration": "REJECTED: Purple gradient is clichéd. Recommend: Deep ocean blues with cyan/amber accents (Dracula-inspired)"
  },
  "animations": {
    "approach": "Framer Motion",
    "focus": "UPGRADE: Add orchestrated dashboard load sequence",
    "key_moments": ["Staggered card reveals", "Chart animations", "Data transitions"]
  },
  "backgrounds": {
    "technique": "REJECTED: Solid white is flat. Recommend: Subtle gradient with noise texture",
    "atmosphere": "Add depth with layered backgrounds and geometric patterns"
  },
  "anti_pattern_validation": {
    "passed": false,
    "warnings": [
      "Using Inter font (generic AI aesthetic)",
      "Purple gradient color scheme (overused)",
      "Solid white background (no atmosphere)",
      "Minimal animations (missed opportunities for delight)"
    ]
  }
}

Example 4: E-commerce Product Page

Input:

{
  "project": "Premium fashion e-commerce",
  "brand": "Luxury, minimalist, editorial",
  "audience": "High-end fashion consumers"
}

Output:

{
  "typography": {
    "primary": "Lora - sophisticated serif for luxury feel",
    "secondary": "DM Sans - clean sans-serif for product details and UI",
    "code": "Not applicable"
  },
  "colors": {
    "dominant": ["#1a1a1a", "#f5f5f0"],
    "accent": ["#c4a57b"],
    "theme_inspiration": "Luxury editorial - black, cream, gold accent"
  },
  "animations": {
    "approach": "CSS-only for lightweight performance",
    "focus": "Smooth product image transitions and subtle reveals",
    "key_moments": ["Product image crossfade", "Size selector micro-interaction", "Add to cart confirmation"]
  },
  "backgrounds": {
    "technique": "Soft gradient from cream to off-white with subtle texture",
    "atmosphere": "Luxurious, tactile, premium feel"
  },
  "anti_pattern_validation": {
    "passed": true,
    "warnings": []
  }
}

Validation

• • Recommends distinctive fonts that match project character
• • Explicitly warns against generic fonts (Inter, Roboto, Arial, system)
• • Creates color palettes with clear hierarchy (dominant + accent)
• • Avoids clichéd color schemes (purple gradients)
• • Suggests orchestrated animations for high-impact moments
• • Recommends backgrounds with depth and atmosphere
• • Validates against anti-patterns
• • Varies aesthetic recommendations across different contexts
• • Provides context-specific reasoning for each choice

Integration with Agents

Frontend-Focused Agents

Before implementing UI components, invoke frontend-aesthetics Skill to receive design guidance:

## Step 1: Design Guidance

Use frontend-aesthetics Skill to get typography, color, animation, and background recommendations.

Input: Project context, brand identity, target aesthetic
Output: Comprehensive design guidance with specific recommendations

Validate output against anti-patterns before proceeding.

Code Review Agents

Use frontend-aesthetics Skill to evaluate existing frontend code for generic patterns:

## Step 3: Frontend Aesthetics Review

Use frontend-aesthetics Skill in validation mode:
- Extract current font choices from CSS
- Identify color palette from CSS variables
- Review animation implementation
- Check background complexity

Flag any anti-patterns detected.

Orchestrator Integration

Include frontend-aesthetics validation in quality gates:

## Phase 2: Design Review

Use frontend-aesthetics Skill to validate design choices:
1. Check typography selection
2. Validate color scheme
3. Review animation approach
4. Assess background depth

If anti_pattern_validation.passed == false:
  Delegate design improvements to frontend worker

Notes

• •Token Budget: This skill is intentionally focused (~500 tokens) for use as a design reference without overwhelming agent context
• •Variation is Critical: Agents should avoid converging on the same design choices (like Space Grotesk) across all projects
• •Context Matters: Design recommendations should always match the project's brand identity and purpose
• •Creativity Over Templates: Encourage unexpected, distinctive choices rather than safe, predictable patterns
• •Performance Considerations: CSS-only animations are preferred for HTML; Framer Motion is appropriate for React when available
• •Font Licensing: Ensure recommended fonts are available via Google Fonts or other accessible sources
• •Accessibility: Distinctive aesthetics should not compromise readability or WCAG compliance
• •Iteration: Design choices can be refined based on user feedback and testing

References

Based on official Anthropic guidance: "Improving Claude's front-end aesthetic sense" (2025-01-15)