Engineer Award-Winning Frontend Experiences

Enforces award-level ("Awwwards-tier") frontend design engineering by aggressively breaking common LLM design defaults - narrow six-line-wrapped hero headings, empty bento-grid gaps, cheap meta-labels like "SECTION 01," invisible button text, and repetitive left/right layouts. Before writing any UI code, it requires simulating a deterministic Python randomization, seeded on the prompt's character count, to select one hero architecture, one typography stack (Satoshi, Cabinet Grotesk, Outfit, or Geist - never Inter), three component architectures, and two GSAP animation paradigms, so the same layout is never defaulted to twice. Every page must open with a premium, creative navigation bar (a floating glass pill or a minimal split nav) and follow an AIDA structure - Attention, Interest, Desire, Action - with large vertical padding between sections, a hero whose H1 is capped at 2-3 lines via ultra-wide containers and clamped font sizes, chosen from three named layouts (Cinematic Center - centered text with two CTAs over a full-bleed background image; Artistic Asymmetry - offset text with a floating overlapping image; Editorial Split - text and image side by side with heavy negative space), a gapless bento grid enforced with Tailwind's grid-flow-dense, and real GSAP motion: scroll-triggered pinning, image scale and fade on scroll, scrubbing text reveals, and card stacking. Its component arsenal adds inline typography images embedded directly inside headings, horizontal accordions that expand on hover, an infinite marquee for trust logos, and a testimonial carousel with overlapping portraits.

group-hover:scale-105 transition-transform duration-700 ease-out

It bans specific patterns outright: meta-labels ("SECTION 01," "QUESTION 05"), floating stamp or badge icons or pill-tags in the hero, raw stats in the hero, more than five bento cards, flat boring background colors, and any horizontal-scroll bug, fixed by wrapping the page in overflow-x-hidden. Before any UI code is written, a mandatory <design_plan> block must show the mock Python RNG output, confirm the AIDA structure is present, verify the hero's max-w class guarantees 2-3 lines, prove the bento grid has zero empty cells, and confirm no banned meta-labels or invisible button text remain.

Use it when a user asks for an award-level landing page, marketing page, or creative frontend with cinematic motion, or when GSAP-driven scroll effects, pinning, scrubbing, or horizontal motion are appropriate. Not a fit when the user wants a restrained interface, a low-motion accessibility mode, or a simple maintenance change - and it assumes the project can actually support GSAP or an equivalent animation library, which needs checking against dependencies and performance budgets first.

Input: a request for a premium, animation-rich landing or marketing page. Output: a <design_plan> verification block followed by React/UI code implementing a randomized hero, gapless bento grid, and GSAP-driven scroll motion, tested across desktop and mobile viewports before release.

Frontend engineers building premium, portfolio-grade landing pages who want enforced design randomization and hard bans on generic AI-design tells, rather than a plain component library page.