---

name: design description: Creates distinctive UI with preserved structure. Avoids generic AI aesthetics. Use when designing or refining user interfaces. triggers:

• design
• ui allowed-tools: Read, Write, Edit, Glob, Grep model: opus user-invocable: true

---

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:

Pattern	Mobile	Tablet+	Desktop+
Sidebar	Hidden + hamburger	Collapsed icons	Full sidebar
Grid	1 column	2 columns	3-4 columns
Navigation	Bottom tabs or drawer	Side nav	Full nav
Cards	Full-width stack	2-up grid	3-4 up grid
Modals	Full-screen sheet	Centered dialog	Centered dialog
Tables	Card view or scroll	Horizontal scroll	Full table

// 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:

Reference	When to Load
references/web-interface-guidelines.md	Forms, focus states, animation, a11y, dark mode, touch, i18n

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

Skill	How It Integrates
standards	Ensure new designs use semantic tokens, handle all states
audit	Design issues flagged here inform UI/UX audit agent
brainstorm	Feature proposals validated against design system

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.