design-taste-frontend

Start with a brief inference step that reads page kind, vibe words, audience, and constraints before writing code. Then set variance, motion, and density dials, avoid default patterns like purple gradients and centered heroes, and run a pre-flight audit on layout and color rules.

For modern SaaS marketing pages, Tailwind v4 utilities with shadcn/ui components is the default. Enterprise briefs map to official systems like Fluent, Carbon, or Material 3, and public-sector sites should use GOV.UK Frontend or USWDS.

Yes, but any component using Motion, scroll listeners, or pointer physics must be an isolated leaf component with 'use client' at the top. Import from motion/react, and never track continuous values like scroll progress with useState; use useMotionValue and useScroll instead.

Using h-screen for full-height heroes causes layout jumping when the iOS Safari address bar collapses. Use min-h-[100dvh] instead, and keep hero top padding at or below pt-24 so content stays in the initial viewport.

Serif is discouraged as a default and only fits when the brand brief names a serif or the aesthetic is genuinely editorial, luxury, or heritage. For agency, portfolio, and premium consumer briefs, default to sans display fonts like Geist Display or Cabinet Grotesk.

It explicitly excludes dashboards, data tables, and multi-step product UI, covering only landing pages, portfolios, and redesigns. It also requires real image assets from generation tools or stock sources, and refuses to ship text-only pages with fake screenshot placeholders.