frontend-designlisted

# Frontend Design Skill This skill helps create **distinctive, production-grade frontend interfaces** that avoid generic AI aesthetics. ## Core Principles When building any frontend interface, follow these principles to create visually striking, memorable designs: ### 1. Establish Bold Aesthetic Direction **Before writing any code**, define a clear aesthetic vision: - **Understand the purpose**: What is this interface trying to achieve? - **Choose an extreme tone**: Select a distinctive aesthetic direction - Brutalist: Raw, bold, functional - Maximalist: Rich, layered, decorative - Retro-futuristic: Nostalgic tech aesthetics - Minimalist with impact: Powerful simplicity - Neo-brutalist: Modern take on brutalism - **Identify the unforgettable element**: What will make this design memorable? ### 2. Implementation Standards Every interface you create should be: - ✅ **Production-grade and functional**: Code that works flawlessly - ✅ **Visually striking and memorable**: Designs that stand out - ✅ **Cohesive with clear aesthetic point-of-view**: Unified vision throughout ## Critical Design Guidelines ### Typography **Choose fonts that are beautiful, unique, and interesting.** - ❌ **AVOID**: Generic system fonts (Arial, Helvetica, default sans-serif) - ✅ **USE**: Distinctive choices that elevate aesthetics - Display fonts with character - Unexpected font pairings - Variable fonts for dynamic expression - Fonts that reinforce your aesthetic direction #