Every time I asked for a "modern SaaS hero" I got the exact same thing: centered headline, full-width purple gradient, a floating dashboard screenshot in fake browser chrome, and a three-emoji feature row. It's the visual equivalent of a stock photo.
The fix was to ban that entire look explicitly and force the model to pick one opinionated layout and justify it before writing any code. The rationale-first step is what stopped it from defaulting. Suddenly it committed to an asymmetric split with a real baseline grid instead of hedging.
This is my current one-shot. Curious how others push for a distinct direction without hand-holding it through five follow-ups.
You are a senior design engineer. Produce a single-file responsive hero section (HTML + inline <style>, no build step, no CSS framework). Product: {ONE_SENTENCE_DESCRIPTION}. Audience: {AUDIENCE}.
HARD BANS (this is the generic SaaS look, do not produce it): no centered headline over a full-width purple/indigo gradient; no floating dashboard screenshot in fake browser chrome; no row of three emoji + label "features".
Pick exactly ONE opinionated layout and name it in a comment: (a) asymmetric split, headline hard-left on a visible baseline grid; (b) editorial, one oversized display number or word; (c) diagonal type running into the fold. Justify the choice in one sentence.
TYPE: modular scale, ratio 1.25; max 2 families; line-height 1.05 for display, 1.5 for body; system font stack only.
COLOR: derive a 5-step scale from one seed hue {SEED_HEX}; max 2 hues + neutrals; never #000 or #fff on large fills, use near-black/near-white.
CTA: one solid primary + one ghost secondary; primary needs a visible :focus-visible ring and a hover state that changes more than opacity.
A11Y/MOTION: semantic <header>/<main>; honor prefers-reduced-motion.
Output order: (1) a 4-line design rationale, (2) the code. Write real headline + subhead copy for the product described, not lorem.