frontend-design

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

1. Establish Design Direction - Define emotion, target user, color palette, typography
2. Create Component Architecture - Atomic design system with composition
3. Add Visual Personality - Distinctive choices, intentional relationships, purposeful asymmetry
4. Implement Motion - Entrance animations, interactions, transitions
5. 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

# 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 designer agent for:

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