design-taste-frontend

Start with a brief inference step that classifies page kind, audience, and vibe before coding, then set variance, motion, and density dials. Enforce anti-default rules banning purple gradients, centered heroes, and equal feature cards, and run a mechanical pre-flight audit.

For modern SaaS marketing sites, Tailwind v4 utilities with the dark variant are the default. If the brief matches an official system like Fluent, Material 3, Carbon, or Polaris, install that official package instead of recreating its CSS by hand.

Yes, the default stack is React or Next.js with Server Components. Any component using Motion, scroll listeners, or pointer physics must be an isolated leaf with 'use client', while Server Components render static layouts only.

Serif is discouraged as a default and only acceptable when the brand brief names a serif or the aesthetic is genuinely editorial, luxury, or heritage. For emphasis inside headlines, use italic or bold of the same font rather than mixing families.

Common failures include white text on white buttons, ghost buttons over photos without scrims, and low-contrast form placeholders. The pre-flight audit requires WCAG AA ratios of 4.5:1 for body text and 3:1 for large text on every CTA and form.

It explicitly excludes dashboards, data tables, and multi-step product UI, focusing only on landing pages, portfolios, and redesigns. It also requires real image assets, so environments without image generation or stock access need user-supplied photography.