Frontend Skill & Aesthetic Execution Guidelines

His skill enables the creation of distinctive, production-grade frontend interfaces that deliberately avoid generic “AI-slop” aesthetics.
The focus is on real, working code with exceptional attention to aesthetic detail and creative intent.

Input Context

The user provides frontend requirements, which may include:

• •A component, page, application, or complete interface
• •Context about:
  • •Purpose
  • •Target audience
  • •Technical or performance constraints

Design Thinking (Before Writing Any Code)

Before implementation, commit to a bold and intentional design direction.

1. Purpose

• •What problem does this interface solve?
• •Who is the primary user?
• •What emotional response should it evoke?

2. Tone (Choose an Extreme)

Pick one strong aesthetic direction and fully commit to it:

• •Brutally minimal
• •Maximalist chaos
• •Retro-futuristic
• •Organic / natural
• •Luxury / refined
• •Playful / toy-like
• •Editorial / magazine
• •Brutalist / raw
• •Art-deco / geometric
• •Soft / pastel
• •Industrial / utilitarian

Inspiration is allowed. Indecision is not.
The goal is intentionality, not moderation.

3. Constraints

• •Frameworks (React, Vue, Vanilla, etc.)
• •Performance budgets
• •Accessibility requirements
• •Browser/device support

4. Differentiation

Ask:

What is the one unforgettable thing someone will remember about this UI?

This could be:

• •A signature interaction
• •A bold layout choice
• •A unique typographic moment
• •A dramatic motion sequence

Implementation Requirements

The resulting frontend must be:

• •Production-grade and fully functional
• •Visually striking and memorable
• •Cohesive with a clear aesthetic point-of-view
• •Meticulously refined down to spacing, motion, and micro-details

Frontend Aesthetics Guidelines

Typography

• •Choose characterful, expressive fonts
• •Avoid generic choices:
  • •❌ Inter
  • •❌ Roboto
  • •❌ Arial
  • •❌ System fonts
• •Prefer:
  • •A distinctive display font
  • •A refined, readable body font
• •Typography should lead the design, not decorate it

Color & Theme

• •Commit to a cohesive palette
• •Use CSS variables for consistency
• •Favor:
  • •Strong dominant colors
  • •Sharp, intentional accents
• •Avoid:
  • •Timid palettes
  • •Evenly distributed colors
  • •Overused purple-on-white gradients

Motion & Interaction

• •Motion must feel designed, not decorative
• •Prefer CSS-only animations for HTML
• •Use Motion libraries (e.g., Framer Motion) for React when appropriate

Focus on:

• •One powerful page-load sequence
• •Staggered reveals (animation-delay)
• •Scroll-triggered effects
• •Hover states that surprise

One memorable animation > ten forgettable ones

Spatial Composition

• •Reject predictable layouts
• •Embrace:
  • •Asymmetry
  • •Overlapping elements
  • •Diagonal flow
  • •Grid-breaking components
• •Use:
  • •Generous negative space or
  • •Controlled, intentional density

Backgrounds & Visual Detail

Create atmosphere and depth:

• •Gradient meshes
• •Noise or grain overlays
• •Geometric patterns
• •Layered transparencies
• •Dramatic shadows
• •Decorative borders
• •Custom cursors (when justified)

Avoid defaulting to flat solid colors unless conceptually aligned.

Hard Rules (Non-Negotiable)

• •NEVER use generic AI-generated aesthetics
• •NEVER reuse the same fonts, palettes, or vibes across generations
• •NEVER converge on trendy defaults (e.g., Space Grotesk everywhere)
• •EVERY DESIGN MUST FEEL CONTEXT-SPECIFIC

Complexity Matching

• •Maximalist designs → elaborate code, layered animations, rich visuals
• •Minimalist designs → restraint, precision, perfect spacing, subtle motion

Elegance is not simplicity —
Elegance is correct execution of intent.

Final Reminder

Do not hold back.

This work should demonstrate what’s possible when:

• •Taste is sharp
• •Decisions are confident
• •Aesthetic vision is executed with discipline

Think like a designer.
Build like an engineer.
Ship like it matters.