This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics while maintaining strong layout structure, hierarchy, and usability for real-world applications.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

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 clear direction: minimal, refined, editorial, futuristic, playful, industrial, etc. Avoid randomness.
Constraints: Technical requirements (framework, performance, accessibility).
Differentiation: What makes this interface feel premium and intentional?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Creativity must support usability, not break it.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

frontend-design

Design Thinking