Frontend Design Skill

Create distinctive, production-grade UI that stands out from generic AI-generated interfaces.

Official Plugin Available: Install frontend-design@claude-code-plugins from the Anthropic marketplace for auto-invocation on frontend tasks. This skill provides extended guidance beyond the official version.

Core Philosophy

Most AI-generated UIs suffer from "AI slop" - they're technically correct but visually bland. This skill helps you break that pattern by making bold aesthetic choices that give your interface a distinctive personality.

The Five Pillars

1. Typography with Character

Avoid: Inter, Arial, Roboto, system-ui (the default AI choices)

Instead: Commit to distinctive font stacks that vary by project tone:

•Display: Clash Display, Cabinet Grotesk, Satoshi, General Sans, Syne, Archivo
•Body: Outfit, Plus Jakarta Sans, Switzer, Geist
•Mono: JetBrains Mono, Geist Mono, IBM Plex Mono

Key principle: NEVER use the same fonts across different projects. Each design should feel genuinely different.

2. Intentional Color Palettes

Avoid: Default Tailwind colors, basic blue buttons, gray backgrounds

Create signature palettes with:

•Semantic tokens (primary, accent, neutral, surface)
•HSL for easier manipulation
•Subtle hue shifts in neutrals (warm stone, cool slate)
•Gradients as primary colors

3. Bold Spatial Composition

Avoid: Everything centered, symmetric, grid-locked

Break the grid intentionally:

•Use negative space as a design element
•Overlap elements to create depth
•Break alignment rules purposefully
•Use clamp() for fluid typography

4. Motion as Personality

Avoid: No animations or generic fade-in

Add purposeful motion:

•Spring physics (not linear easing)
•Staggered entrances
•Subtle blur transitions
•Responsive hover states
•Respect prefers-reduced-motion

5. Production-Grade Implementation

Requirements:

•TypeScript with proper types
•Accessibility (focus states, ARIA, keyboard nav)
•Loading states
•Error boundaries
•Responsive design
•Performance optimization

Match Complexity to Vision

•Maximalist designs: Elaborate code with extensive animations, layered effects
•Minimalist designs: Restraint, precision, careful attention to spacing

Workflow

•Establish Design Direction - Define emotion, target user, color palette, typography
•Create Component Architecture - Atomic design system with composition
•Add Visual Personality - Distinctive choices, intentional relationships, purposeful asymmetry
•Implement Motion - Entrance animations, interactions, transitions
•Production Harden - Type everything, handle edge cases, optimize

Anti-Patterns to Avoid

•Using Inter/Roboto as default font
•Same fonts across projects
•Gray-on-white with blue buttons
•Everything centered and symmetric
•No animations or generic fades
•Ignoring dark mode
•Forgetting loading/error states
•Skipping accessibility

Additional Resources

For detailed implementation guidance, see the references directory:

•references/typography-examples.md - Font stacks by tone, variable fonts, responsive scales
•references/color-animation-patterns.md - Advanced palettes, gradients, dark mode, animation patterns
•references/production-patterns.md - Complete component examples, error boundaries, performance optimization, tooling recommendations

Quick Reference

bash

# Distinctive font stacks (vary these per project!)
font-display: 'Clash Display', 'Cabinet Grotesk', 'Satoshi', 'General Sans'
font-body: 'Outfit', 'Plus Jakarta Sans', 'Switzer', 'Geist'
font-mono: 'JetBrains Mono', 'Geist Mono', 'IBM Plex Mono'

# Tailwind config pattern
theme: {
  extend: {
    colors: { /* HSL tokens */ },
    fontFamily: { /* Variable fonts */ },
    animation: { /* Spring-based */ },
  }
}

Integration with Design Specialist Agent

Use this skill for:

•Distinctive visual identity
•Creative typography and color choices
•Bold spatial compositions
•Production-ready animated components

Use the design-specialist agent for:

•Comprehensive UI/UX reviews
•Accessibility audits
•Design system architecture
•Component library setup