Frontend Design Skill

Overview

This skill enables creation of distinctive, production-grade web interfaces that prioritize high design quality and avoid generic aesthetics. It applies to components, pages, dashboards, and full applications.

When to Use

Building custom UI components that need visual distinction
Creating landing pages or marketing sites
Designing dashboards and data visualization interfaces
Full web applications requiring cohesive design systems
Any interface that must avoid "generic AI" aesthetics

Quick Start

Establish design direction before coding (purpose, tone, constraints)
Select distinctive typography (avoid Inter, Roboto, Arial defaults)
Create intentional color palette with clear primary/accent roles
Add purposeful motion for micro-interactions
Break visual monotony with asymmetry and grid variations

/* Quick distinctive setup */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');

:root {
  --primary: #1a1a2e;
  --accent: #e94560;
  --text: #eaeaea;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--primary);
  color: var(--text);
}

Before Coding: Design Direction

Establish a bold aesthetic direction by considering:

Purpose: What is this interface trying to accomplish?
Tone: Professional? Playful? Minimalist? Bold?
Constraints: Technical requirements, brand guidelines, accessibility?
Differentiation: How will this stand out?

Key Principle: Choose a clear conceptual direction and execute it with precision.

Visual Execution

Typography

Prioritize characterful, unexpected font selections:

/* Good: Distinctive choices */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap');

/* Avoid: Overused defaults */
/* Inter, Roboto, Arial, system fonts */

Font Pairing Examples:

Headlines: Space Grotesk / Body: Source Serif Pro
Headlines: Playfair Display / Body: Work Sans
Headlines: Sora / Body: Spectral

Color

Commit to cohesive palettes:

:root {
  /* Bold, intentional palette */
  --primary: #1a1a2e;
  --secondary: #16213e;
  --accent: #e94560;
  --highlight: #0f3460;
  --text: #eaeaea;

  /* Not: Generic blue gradients on white */
}

Palette Strategies:

Monochromatic with sharp accent
Analogous with deliberate contrast
Split-complementary for energy
Dark mode as default, not afterthought

Motion

Employ CSS animations strategically:

/* Subtle entrance */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeSlideIn 0.6s ease-out;
}

/* Micro-interaction */
.button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

Scroll-triggered effects:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-in');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.animate-on-scroll').forEach(el => {
  observer.observe(el);
});

Spatial Design

Embrace asymmetry and grid-breaking:

.hero {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  align-items: end; /* Intentional misalignment */
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Break the grid for emphasis */
.feature-grid .featured {
  grid-column: span 2;
  grid-row: span 2;
}

Overlap and layering:

.overlapping-section {
  position: relative;
  margin-top: -100px;
  z-index: 10;
}

.floating-element {
  position: absolute;
  transform: translate(-20%, -50%);
}

Critical Warnings: What to Avoid

Generic AI Aesthetics

Overused font families (Inter, Roboto, Arial)
Purple gradients on white backgrounds
Uniform rounded corners everywhere
Centered everything
Cookie-cutter card layouts

Predictable Patterns

Hero with centered text + button + stock photo
3-column equal grids
Default shadows and border-radius
Lack of visual hierarchy
No personality or context-specific character

Implementation Philosophy

Match complexity to vision:

Maximalist Design:

/* Elaborate, intentional complexity */
.hero {
  background:
    linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.8)),
    url('texture.png'),
    radial-gradient(ellipse at 20% 50%, #e94560 0%, transparent 50%);
  backdrop-filter: blur(10px);
}

Minimalist Design:

/* Restraint and precision */
.hero {
  background: #fafafa;
  padding: 8rem 2rem;
}

.hero h1 {
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

Component Patterns

Cards with Character

<div class="card">
  <div class="card-accent"></div>
  <div class="card-content">
    <span class="card-tag">Featured</span>
    <h3>Card Title</h3>
    <p>Description text with purpose.</p>
  </div>
</div>

<style>
.card {
  position: relative;
  background: #1a1a2e;
  border-radius: 0; /* Intentional sharp corners */
  overflow: hidden;
}

.card-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #e94560, #0f3460);
}

.card-content {
  padding: 2rem;
}

.card-tag {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e94560;
}
</style>

Navigation with Presence

<nav class="nav">
  <a href="/" class="nav-logo">Brand</a>
  <div class="nav-links">
    <a href="#" class="nav-link active">Home</a>
    <a href="#" class="nav-link">Work</a>
    <a href="#" class="nav-link">About</a>
    <a href="#" class="nav-cta">Contact</a>
  </div>
</nav>

<style>
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 4rem;
  background: transparent;
  position: fixed;
  width: 100%;
  z-index: 100;
  mix-blend-mode: difference;
}

.nav-logo {
  font-weight: 700;
  font-size: 1.25rem;
  color: white;
}

.nav-link {
  color: white;
  text-decoration: none;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #e94560;
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
</style>

Framework Integration

Tailwind CSS (Custom Config)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'display': ['Space Grotesk', 'sans-serif'],
        'body': ['Spectral', 'serif'],
      },
      colors: {
        'midnight': '#1a1a2e',
        'navy': '#16213e',
        'coral': '#e94560',
        'ocean': '#0f3460',
      },
      animation: {
        'fade-in': 'fadeIn 0.6s ease-out',
        'slide-up': 'slideUp 0.6s ease-out',
      },
    },
  },
}

React Components

const Button = ({ children, variant = 'primary', ...props }) => {
  const baseStyles = `
    px-6 py-3 font-display font-semibold
    transition-all duration-300
    focus:outline-none focus:ring-2 focus:ring-offset-2
  `;

  const variants = {
    primary: 'bg-coral text-white hover:bg-opacity-90 focus:ring-coral',
    secondary: 'bg-transparent border-2 border-coral text-coral hover:bg-coral hover:text-white',
    ghost: 'bg-transparent text-coral hover:underline',
  };

  return (
    <button className={`${baseStyles} ${variants[variant]}`} {...props}>
      {children}
    </button>
  );
};

Execution Checklist

Established clear design direction before coding
Selected distinctive typography (not defaults)
Created intentional color palette
Added purposeful motion and interaction
Broke visual monotony with asymmetry/variation
Avoided generic AI aesthetic patterns
Matched complexity to design vision
Tested across viewport sizes
Verified accessibility (contrast, focus states)

Error Handling

Common Issues

Issue: Design looks generic

Cause: Using default fonts and colors
Solution: Audit for Inter/Roboto/system fonts, replace with distinctive choices

Issue: Animations feel janky

Cause: Using wrong easing or duration
Solution: Use ease-out for entrances, keep durations 200-600ms

Issue: Layout breaks on mobile

Cause: Fixed widths or no responsive breakpoints
Solution: Use relative units, add media queries, test at 320px

Issue: Colors clash in dark mode

Cause: Using light-mode palette directly
Solution: Design dark mode first, derive light mode from it

Metrics

Metric	Target	How to Measure
First Contentful Paint	<1.5s	Lighthouse
Cumulative Layout Shift	<0.1	Lighthouse
Accessibility Score	>90	Lighthouse
Color Contrast	WCAG AA	Contrast checker
Animation FPS	60fps	DevTools Performance

Philosophy

Claude is capable of extraordinary creative work. Don't hold back.

Design complexity should match the aesthetic vision--maximalist designs warrant elaborate animations; minimalist approaches require restraint and precision. The right amount of design is whatever serves the purpose with distinction.

Related Skills

theme-factory - Pre-built color/font themes
web-artifacts-builder - Self-contained HTML apps
canvas-design - Visual art generation

Version History

2.0.0 (2026-01-02): Upgraded to v2 template - added Quick Start, When to Use, Execution Checklist, Error Handling, Metrics sections
1.0.0 (2024-10-15): Initial release with typography, color, motion, spatial design patterns, component examples, Tailwind/React integration

frontend-design