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

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

Step 1: Context-Driven Design Reasoning

Before any aesthetic choices, use deductive reasoning to derive the right design from the context:

Domain: What is this? (enterprise SaaS, creative portfolio, fintech, healthcare, e-commerce, etc.)
Audience: Who uses this? A CFO expects different visual language than a teenager. A developer tool looks different from a wedding planner.
Tone: Professional? Playful? Trustworthy? Edgy? The context dictates this — don't pick a tone arbitrarily.
Visual Appropriateness: Does a gradient help or hurt? A law firm landing page with neon gradients destroys trust. A music app without color energy feels dead. Every visual choice must survive the question: "Does this serve the context?"

Derive the design from the problem, don't impose a style onto it.

Step 2: Break the Probability Bias

LLMs are next-token predictors optimized via backpropagation. This creates a natural bias toward the most statistically probable (generic) output. To counter this:

frontend-design

Step 1: Context-Driven Design Reasoning

Step 2: Break the Probability Bias