Frontend Design

Frontend Design Skill

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic aesthetics. Implement real working code with exceptional attention to typography, layout, motion, and atmosphere.

Design Thinking

Before coding, understand the context and commit to a bold aesthetic direction:

• Purpose: What problem does this interface solve? Who uses it?
• Tone: Pick a strong direction (brutalist, editorial, retro-futuristic, luxury, playful, utilitarian). Commit fully.
• Constraints: Framework, performance, accessibility, brand rules.
• Differentiation: Identify the one unforgettable visual idea.

Execution Guidelines

• Typography: Use distinctive fonts. Avoid generic system stacks (Inter, Roboto, Arial). Pair display and body type.
• Color: Define CSS variables. Choose dominant colors with sharp accents. Avoid default purple gradients on white.