Skip to content

Frontend Design

Purpose: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code and UI design that avoids generic AI aesthetics.

When to Use

Trigger Description
Web Components Building web components, pages, or applications
Landing Pages Creating visually striking landing pages or dashboards
UI Beautification Styling or beautifying any web interface
Design-Driven Development When high design quality is a priority

Process

Step 1: Design Thinking

Before coding, understand context and commit to a bold aesthetic direction:

  1. Purpose — what problem does this interface solve? Who uses it?
  2. Tone — pick a strong aesthetic: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
  3. Constraints — technical requirements (framework, performance, accessibility)
  4. Differentiation — what makes this unforgettable?

Step 2: Implementation

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

  • Production-grade and functional
  • Visually striking and memorable
  • Cohesive with a clear aesthetic point-of-view
  • Meticulously refined in every detail

Step 3: Aesthetic Refinement

Focus on key design dimensions:

Dimension Guidance
Typography Distinctive font choices, not generic (avoid Arial, Inter, Roboto)
Color & Theme Cohesive palette with CSS variables; dominant colors with sharp accents
Motion CSS-only animations; staggered reveals on page load; scroll-triggered effects
Spatial Composition Asymmetry, overlap, diagonal flow, grid-breaking elements
Backgrounds Gradient meshes, noise textures, geometric patterns, layered transparencies

Anti-Patterns

Avoid generic AI-generated aesthetics:

  • Overused fonts (Inter, Roboto, Arial, system fonts)
  • Cliche color schemes (purple gradients on white)
  • Predictable layouts and component patterns
  • Cookie-cutter design without context-specific character
  • Excessive centered layouts and uniform rounded corners

Key Principles

  • Bold direction — choose a clear conceptual direction and execute with precision
  • Match complexity to vision — maximalist designs need elaborate code; minimalist needs restraint
  • Vary across generations — never converge on common choices; each design should be unique
  • Context-specific — interpret creatively for the specific use case

See Also