Design

Frontend Design

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics.

When to Use

• Building web components, pages, or applications
• Creating marketing/landing pages
• UI that needs to look professionally designed
• Any frontend where visual quality matters

Design Thinking

Before coding, commit to a BOLD aesthetic direction:

1. Purpose: What problem does this solve? Who uses it?
2. Tone: Pick an extreme:
   • Brutally minimal
   • Maximalist chaos
   • Retro-futuristic
   • Organic/natural
   • Luxury/refined
   • Playful/toy-like
   • Editorial/magazine
   • Brutalist/raw
   • Art deco/geometric
   • Soft/pastel
   • Industrial/utilitarian
3. Differentiation: What makes this UNFORGETTABLE?

Choose a clear direction and execute with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Implementation

Create working code (React/Vue/HTML) that is:

• Production-grade and functional
• Visually striking and memorable
• Cohesive with clear aesthetic point-of-view
• Meticulously refined in every detail
• Responsive across mobile (375px), tablet (768px), and desktop

Responsive Design (MANDATORY)

Every layout must adapt to mobile-first breakpoints:

// Mobile-first: hidden sidebar with toggle
<Sheet>
  <SheetTrigger className="md:hidden"><Menu /></SheetTrigger>
  <SheetContent side="left">
    <Nav />
  </SheetContent>
</Sheet>
<aside className="hidden md:flex md:w-64 md:flex-col">
  <Nav />
</aside>

Test at 375px width before considering any UI complete.

Aesthetics Guidelines

Typography

• Choose unique, interesting fonts - avoid generic fonts
• Pair distinctive display font with refined body font
• Use Google Fonts or custom fonts, not system defaults

Color & Theme

• Commit to a cohesive palette
• Use CSS variables for consistency
• Dominant colors with sharp accents > timid, evenly-distributed palettes

Motion

• Use animations for micro-interactions
• CSS-only for HTML, Motion library for React
• Focus on high-impact moments: orchestrated page load with staggered reveals
• Scroll-triggering and hover states that surprise

Spatial Composition

• Unexpected layouts
• Asymmetry, overlap, diagonal flow
• Grid-breaking elements
• Generous negative space OR controlled density

Backgrounds & Visual Details

• Create atmosphere and depth (not just solid colors)
• Gradient meshes, noise textures, geometric patterns
• Layered transparencies, dramatic shadows
• Decorative borders, custom cursors, grain overlays

Avoid

Generic AI aesthetics to avoid:

• Inter, Roboto, Arial, system fonts
• Purple/blue gradients on white backgrounds
• Predictable layouts and component patterns
• Cookie-cutter designs lacking character
• Space Grotesk (overused)
• Same design across generations — vary themes, fonts, aesthetics

No design should be the same. Interpret creatively and make unexpected choices that feel genuinely designed for the context.

Pro Tips

Generate Multiple Variants

Ask for 5 different designs on /1, /2, /3, /4, /5:

• Model makes each unique from the others
• Better variety than 5 separate prompts
• Reveals model's template biases

Iterate on Favorites

After seeing variants, tell the model:

• Which designs you liked
• What you liked about them
• Ask for 5 more iterations based on those

This is where Opus shines - it actually understands your preferences and iterates meaningfully.

Match Complexity to Vision

• Maximalist designs → elaborate code, extensive animations, effects
• Minimalist designs → restraint, precision, spacing, typography, subtle details

Elegance comes from executing the vision well.

Detailed Rules

Load specific references for engineering quality:

Component Composition

Avoid boolean prop proliferation. Use composition:

// Bad - boolean explosion
<Card isCompact isHighlighted hasBorder isClickable />

// Good - composition
<Card variant="compact">
  <Card.Highlight>
    <Card.Clickable>...</Card.Clickable>
  </Card.Highlight>
</Card>

Create explicit variant components instead of boolean modes. Use compound components with shared context for complex UI.

Integration with Other Skills

Before creating new components:

1. Check the Preserve UI Structure section below - can we extend existing?
2. Check design tokens - use CSS variables
3. Check standards - handle loading/empty/error states

Remember: Claude is capable of extraordinary creative work. Don't hold back - show what can be created when thinking outside the box and committing fully to a distinctive vision.

Preserve UI Structure

When modifying existing UI: read before write, match don't invent, extend don't replace.

Key rules:

1. Read the target, parent, siblings, and layout before touching anything
2. Match existing grid, spacing, component patterns exactly
3. Use existing components — never create "similar but different" ones
4. Check all breakpoints match siblings

Load references/preserve-ui.md for the full protocol, checklists, and common traps.