Distinctive Frontend Design

Quick Start

When a frontend UI is requested, commit to a bold aesthetic direction and execute it with production-grade code. Avoid generic "AI slop" visuals and predictable layouts.

Design Thinking (before coding)

Answer these in the response before implementing:

• Purpose: What problem does this interface solve and for whom?
• Tone: Choose a strong, specific aesthetic (minimal, maximalist, retro-futuristic, editorial, brutalist, luxury, organic, etc.).
• Constraints: Framework, performance, accessibility, and any technical limits.
• Differentiation: Identify the one unforgettable visual element or interaction.

Commit to the direction and design every detail to reinforce it.

Implementation Rules

• Implement working code (HTML/CSS/JS or framework) that matches the aesthetic.
• Use CSS variables for palette and spacing consistency.
• Favor intentional layouts: asymmetry, overlap, diagonal flow, grid breaks, or controlled negative space.
• Add atmosphere: gradient meshes, noise, textures, layered transparencies, borders, or shadows when aligned with the direction.
• Keep the visual system cohesive: colors, type, motion, and spacing all reinforce the same idea.

Typography

• Pair a characterful display font with a refined body font.
• Avoid generic fonts (Arial, Roboto, Inter, system defaults) and overused modern defaults.
• Typography must be a core visual driver, not an afterthought.

Color & Theme

• Use a dominant color with sharp accents; avoid timid evenly-distributed palettes.
• Do not default to generic purple gradients on white.
• Use CSS variables to enforce discipline.

Motion

• Prefer CSS-only animations for HTML; use a motion library for React if already available.
• Prioritize high-impact moments: a page-load reveal with staggered animation-delay is better than scattered micro-effects.
• Use hover/scroll states that reinforce the tone (e.g., precise, chaotic, soft, mechanical).

Spatial Composition

• Break the grid when appropriate.
• Mix scale shifts (large hero + tiny metadata) and layered elements.
• Choose either generous negative space or controlled density, not both.

Anti-Patterns to Avoid

• Cliche layouts and component patterns.
• Generic, evenly-spread color schemes.
• Overused font pairings or default design system choices.
• Visuals that do not feel tailored to the context.

Quality Checklist

Before finishing:

• Aesthetic direction is stated and obvious in the UI.
• One memorable detail stands out.
• Code is production-grade and functional.
• Motion, color, and type all reinforce the same concept.