Frontend Design

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:

1. Generate 5 design directions ranging from highest probability (most generic/expected) to lowest probability (most unexpected/distinctive)
2. Scrutinize the top 1-2 — these are the AI slop zone. Don't default to them, but individual elements may still work if they genuinely serve the context
3. Cherry-pick across all 5 — select elements that are distinctive yet contextually appropriate, regardless of which tier they came from
4. Combine deliberately — merge the best unconventional choices into one cohesive direction

Present the chosen direction to the user briefly before implementing. This ensures every design is intentionally de-biased.

Step 3: Think in Pure HTML/CSS/JS First

LLMs have deepest mastery over raw web fundamentals. Use this to your advantage:

• Design in HTML/CSS/JS mentally first — even if the target is React/Vue/Svelte. The browser is the ground truth.
• Prototype the visual in vanilla form — CSS is where the design lives. Get the aesthetics right at this layer.
• Then translate to the target framework/component structure. The conversion is mechanical; the design thinking is not.

This prevents framework abstractions from flattening creative choices.

Step 4: Curate and Verify

Adopt the mindset of a senior UI/UX Designer — someone who both solves usability problems and crafts visually beautiful, creative interfaces. Evaluate the output through that expert lens: