---

name: frontend-design description: Use when building web components, pages, or applications that need distinctive, production-grade interfaces. Helps avoid generic AI aesthetics with bold, intentional design choices.

Frontend Design

Overview

Create distinctive, production-grade interfaces by committing to a bold aesthetic direction and executing it with precision. The key is intentionality, not intensity.

When to Use

• Building web components, pages, or applications
• Creating UI that needs to stand out from generic templates
• Implementing production-grade interfaces with polish

Don't use for: backend code, API design, simple utility scripts, or prototypes where aesthetics don't matter.

Design Process

Before coding, commit to a BOLD aesthetic direction:

1. Purpose: What problem does this interface 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. Constraints: Technical requirements (framework, performance, accessibility)
4. Differentiation: What's the one thing someone will remember?

Quick Reference

Aesthetic Guidelines

Focus on these elements:

• Typography: Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font.
• Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
• Motion: Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use 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. Apply gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

Match implementation complexity to aesthetic vision. Maximalist designs need elaborate animations; minimalist designs need restraint and precision.

Common Mistakes

Validation Checklist

• Bold aesthetic direction chosen and committed to
• Typography is distinctive (not Inter/Roboto/Arial)
• Color palette is cohesive with sharp accents
• Layout has intentional asymmetry or unexpected elements
• Motion is purposeful and orchestrated
• Implementation complexity matches aesthetic vision
• No generic AI aesthetic patterns