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
- 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.
- 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
- 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
- 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
- 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
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