Frontend Design

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

Workflow

1. Design Thinking: Before coding, understand the context and commit to a BOLD aesthetic direction:
   • Purpose: What problem does this solve?
   • Tone: Pick an extreme flavor (brutally minimal, retro-futuristic, editorial, etc.)
   • Constraints: Technical requirements.
   • Differentiation: Make it unforgettable.
2. Implementation:
   • Write HTML/CSS/JS or modern framework code (React, Vue).
   • Ensure it is visually striking and meticulously refined.
3. Typography: Choose fonts that are beautiful and interesting (e.g. avoid Arial, use distinctive display fonts paired with refined body fonts).
4. Color & Theme: Commit to a cohesive aesthetic with CSS variables.
5. Motion: Use animations for effects and high-impact moments.
6. Spatial Composition: Use unexpected layouts, asymmetry, or generous negative space.
7. Backgrounds: Create atmosphere and depth (gradients, noise, etc.).