frontend-design

name	frontend-design
description	Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications.

Frontend Design

Build intentional, production-grade frontend UI that avoids generic defaults.

Design Direction

Before coding, decide:

• Purpose and audience
• A clear visual tone
• The one memorable visual idea

Quality Bar

• Real working code, not mock-only snippets
• Strong visual cohesion
• Responsive behavior on desktop and mobile
• Accessibility basics (semantic markup, contrast, focus states)

Aesthetic Guidance

• Typography:
  • Prefer expressive display/body pairings.
  • Avoid default stacks like Inter, Roboto, Arial, system.
• Color and look:
  • Set CSS variables for palette and spacing.
  • Avoid generic purple-on-white gradients.
• Motion:
  • Use a few meaningful animations (entrance/stagger/interaction states).
• Background and depth:
  • Use layered gradients, subtle texture, or shape systems instead of flat single-color fills.
• Layout:
  • Favor intentional composition over boilerplate templates.

Constraints

• Match complexity to the requested style.
• If working inside an existing design system, preserve established patterns.