Frontend Design

# Frontend Design Skill Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. ## Design Thinking Before coding, commit to a BOLD aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? - **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 - **Constraints**: Technical requirements (framework, performance, accessibility) - **Differentiation**: What makes this UNFORGETTABLE? **CRITICAL**: Choose a clear conceptual direction and execute it with precision. ## Frontend Aesthetics Guidelines Focus on: ### Typography Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive choices. 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 Use animations for effects and micro-interactions. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. ### Spatial Composition Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density. ### Backgrounds & Visual Details Create atmosphere and depth rather than defaulting to solid colors: - Gradient meshes - Noise textures - Geometric patterns - Layered transparencies - Dramatic shadows - Decorative borders - Custom cursors - Grain overlays ## What to Avoid NEVER use generic AI-generated aesthetics: - Overused font families (Inter, Roboto, Arial, system fonts) - Cliched color schemes (purple gradients on white backgrounds) - Predictable layouts and component patterns - Cookie-cutter design that lacks context-specific character ## Implementation Match implementation complexity to the aesthetic vision: - **Maximalist designs**: Need elaborate code with extensive animations and effects - **Minimalist designs**: Need restraint, precision, and careful attention to spacing, typography, and subtle details Elegance comes from executing the vision well. ## Output Working code (HTML/CSS/JS, React, Vue, etc.) that is: - Production-grade and functional - Visually striking and memorable - Cohesive with a clear aesthetic point-of-view - Meticulously refined in every detail