frontend-design

name	frontend-design
description	Guides creation of distinctive, production-grade frontend UI. Invoke when building or redesigning UI components, pages, or visual experiences.

Frontend Design

Create distinctive, production-grade frontend interfaces that avoid generic aesthetics and deliver a deliberate visual direction.

When to Use

• Building a new component, page, or interface
• Redesigning UI for stronger visual character
• Implementing UI with high aesthetic polish
• Reviewing and improving visual consistency

Design Thinking

Before coding, establish:

• Purpose: What problem the interface solves and who uses it
• Tone: Choose a clear aesthetic direction (e.g., brutalist, editorial, retro-futuristic, luxury)
• Constraints: Framework, performance, accessibility requirements
• Differentiation: The one memorable element that stands out

Implementation Priorities

• Use production-ready code (HTML/CSS/JS, React, Vue, etc.)
• Keep the visual system cohesive and intentional
• Match implementation complexity to the chosen aesthetic

Aesthetics Guidelines

Typography

• Use characterful fonts
• Pair a distinctive display font with a refined body font

Color & Theme

• Commit to a cohesive palette
• Use CSS variables for consistency
• Prefer bold accents over timid palettes

Motion

• Use motion for high-impact moments
• Prefer CSS animations when possible
• Add staggered reveals for delight

Spatial Composition

• Consider asymmetry, overlap, diagonal flow, or grid-breaking elements
• Use deliberate negative space or controlled density

Backgrounds & Visual Details

• Add depth with gradients, textures, or layered transparencies
• Use decorative borders, dramatic shadows, or grain overlays when appropriate

Avoid

• Generic fonts (Arial, Inter, Roboto)
• Cliché color schemes or predictable layouts
• Cookie-cutter component patterns without context

Output

Deliver working code with a clear, memorable aesthetic point-of-view.