---

name: frontend-design description: Create distinctive, production-grade frontend interfaces with high design quality. Use when building UI components, pages, or applications to avoid generic AI aesthetics. agents: [blaze, tap, spark] triggers: [design, ui, aesthetic, beautiful, distinctive, frontend, component, page]

Frontend Design Excellence

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

Core Philosophy

Bold intentionality beats safe defaults.

The key is making a clear conceptual choice and executing it with precision. Both maximalism and minimalism work—the key is intentionality, not intensity.

---

Design Thinking Process

Before coding, commit to a BOLD aesthetic direction:

1. Understand Context

• Purpose: What problem does this interface solve?
• Audience: Who uses it? What do they expect?
• Constraints: Performance, accessibility, framework requirements

2. Choose an Aesthetic Direction

Pick an EXTREME, not a middle ground:

3. Define the Memorable Element

What's the ONE thing someone will remember about this interface?

---

What to NEVER Do (AI Slop Indicators)

Generic Font Choices

Instead: Choose distinctive, characterful fonts. Pair a unique display font with a refined body font.

Clichéd Color Schemes

Instead: Commit to a dominant color with sharp accents. Create visual hierarchy through color weight.

Predictable Layouts

Instead: Use asymmetry, overlap, diagonal flow, grid-breaking elements, or generous negative space.

---

What to DO

Typography

• Choose fonts that are beautiful, unique, and interesting
• Pair a distinctive display font with a refined body font
• Create strong typographic hierarchy
• Consider custom letter-spacing and line-height

Color & Theme

• Commit to a cohesive aesthetic
• Use CSS variables for consistency
• Dominant colors with sharp accents > timid, even palettes
• Consider dark/light as a design choice, not just a toggle

Motion & Animation

• Focus on high-impact moments: one well-orchestrated page load > scattered micro-interactions
• Use staggered reveals with animation-delay
• Scroll-triggered animations that surprise
• Hover states that delight
• Prefer CSS-only for HTML; use Motion/Framer for React

Spatial Composition

• Embrace asymmetry
• Use overlap and layering
• Consider diagonal flow
• Add grid-breaking elements
• Generous negative space OR controlled density (choose one)

Backgrounds & Details

Create atmosphere rather than defaulting to solid colors:

• Gradient meshes
• Noise textures
• Geometric patterns
• Layered transparencies
• Dramatic shadows
• Decorative borders
• Custom cursors
• Grain overlays

---

Implementation Complexity

Match implementation to aesthetic vision:

Elegance comes from executing the vision well, not from complexity itself.

---

Quick Reference Checklist

Before submitting UI code:

Fonts

• NOT using Inter, Roboto, Arial, or Space Grotesk
• Font choice is intentional and distinctive
• Typography hierarchy is clear

Colors

• NOT using purple gradient on white
• Color scheme has clear hierarchy (dominant + accent)
• Theme is cohesive and intentional

Layout

• NOT using generic center-aligned template
• Layout has visual interest (asymmetry, overlap, or intentional symmetry)
• Spacing is generous OR dense (not timid)

Polish

• At least one memorable animation or interaction
• Background has depth (not just solid color)
• Details match the chosen aesthetic direction

---

The Bottom Line

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

No design should be the same. Vary between light and dark, different fonts, different aesthetics. NEVER converge on common choices across generations.