Frontend Design Fix - HTML/CSS

Overview

Transform bland, generic HTML/CSS designs into visually distinctive interfaces by systematically applying the 5 design dimensions from Anthropic's design framework.

Core Workflow

1. Analysis Phase

• •Read existing HTML/CSS files
• •Identify generic elements (Inter/Roboto fonts, purple gradients, centered layouts, no animations, solid backgrounds)
• •Score current design against anti-patterns checklist
• •Generate "before" snapshot with metrics

2. Assessment Phase

• •Understand brand/context from existing content and markup
• •Identify target audience and purpose
• •Determine appropriate aesthetic direction based on content

3. Dimension-Based Fixes

Typography

• •Replace generic system fonts (Inter, Roboto, Arial) with distinctive typeface pairs
• •Apply extreme weight ranges (100-200 for thin, 800-900 for bold)
• •Increase size jumps (3x+ progression instead of 1.5x)
• •Create high-contrast pairings (Display + Mono, Serif + Sans)

Color & Theme

• •Remove default purple gradients on white backgrounds
• •Introduce CSS custom properties (--primary, --accent, --surface)
• •Establish dominant colors with sharp accent colors
• •Avoid evenly-distributed palettes (use 70-20-10 rule)

Motion

• •Add orchestrated page load animations (fade, scale, slide)
• •Implement staggered reveals with animation-delay
• •Add hover state surprises and micro-interactions
• •Include scroll-triggered animations where appropriate

Spatial Composition

• •Break centered, predictable layouts
• •Add asymmetry or intentional overlap
• •Introduce diagonal flow or grid-breaking elements
• •Adjust spacing (generous negative space OR controlled density)

Backgrounds

• •Replace solid colors with layered gradients
• •Add geometric patterns or subtle noise textures
• •Create atmospheric depth with multiple background layers
• •Add contextual effects (blur, blend modes)

4. Implementation

• •Apply fixes systematically per dimension
• •Maintain accessibility standards (WCAG 2.1 AA)
• •Preserve all existing functionality
• •Test responsive behavior at key breakpoints

5. Validation

• •Re-score against anti-patterns checklist
• •Generate "after" snapshot with improved metrics
• •Create before/after comparison report
• •Verify accessibility compliance

Design Audit Checklist

Typography Audit

• • Current font stack is generic (Inter, Roboto, Arial, system stack)
• • Font weights are limited (only regular and bold)
• • Size progression is minimal (1.25-1.5x multiplier)
• • No distinctive pairing strategy
• • Poor readability on colored backgrounds

Color & Theme Audit

• • Purple/blue gradient on white background (cliché)
• • No CSS custom properties for theming
• • Evenly distributed color palette (5+ primary colors)
• • No accent color for emphasis
• • Insufficient contrast in interactive elements

Motion Audit

• • No page load animations
• • No staggered reveals
• • Hover states missing or uninspired
• • No scroll interactions
• • Abrupt transitions between states

Spatial Composition Audit

• • Centered, symmetrical layouts throughout
• • Predictable margins and padding
• • No intentional asymmetry
• • Grid-aligned everything (no breaking)
• • Single-column or evenly-spaced multi-column layouts

Background Audit

• • Solid white or light gray backgrounds
• • No layering or depth
• • No texture or pattern application
• • Generic or missing hero sections
• • No atmospheric or contextual effects

Implementation Tips

CSS Best Practices

/* Use custom properties for consistency */
:root {
  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --primary: #1a1a1a;
  --accent: #ff6b35;
  --surface: #fafafa;

  --transition-fast: 200ms ease-out;
  --transition-base: 400ms ease-out;
}

/* Orchestrate animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger with nth-child */
[data-stagger] {
  animation: fadeInUp var(--transition-base) ease-out forwards;
}

[data-stagger]:nth-child(1) { animation-delay: 100ms; }
[data-stagger]:nth-child(2) { animation-delay: 200ms; }
[data-stagger]:nth-child(3) { animation-delay: 300ms; }

Accessibility Maintenance

• •Keep WCAG AA color contrast minimum 4.5:1 for text
• •Maintain focus visible outlines
• •Test keyboard navigation
• •Preserve semantic HTML structure

Examples

See /examples/showcase.md for before/after comparisons:

• •Generic landing page → Distinctive landing page
• •Boring dashboard → Visually striking dashboard
• •Plain form → Aesthetically enhanced form

Success Metrics

After applying fixes, the design should:

• •Score 0-2 items remaining on the anti-patterns checklist
• •Have distinctive typography choices
• •Include motion and micro-interactions
• •Feature asymmetric or broken-grid layouts
• •Use layered/textured backgrounds
• •Maintain or improve accessibility scores