The AI Prompt Engineering Framework We Use for Every Web Design Prompt

The Job of a Hero Section

A landing page hero section has one job: convert a stranger into someone who wants to know more. That's it. Not to look beautiful. Not to demonstrate your mastery of animation libraries or design systems. Not to win awards. Not to use every color in your palette or showcase what you can make the site *do*. One job.

AI models default to failing at this job because most prompts don't specify enough to succeed at it. When you tell Claude or GPT to "build a SaaS hero section," the model fills the ambiguity gaps with its training-data average — and by definition, the average is mediocre. You get purple-to-blue gradients. Rounded cards in grids. A hero image of people pointing at a laptop screen. CTAs in the exact shade of blue that thousands of other landing pages use.

The model isn't stupid. It's following the path of least resistance, because you didn't tell it not to.

HeroPrompts maintains a library of 52+ production-grade hero prompts. Every single one passes the same QA bar: it must produce output that makes the decision-maker stop and notice. Not because it's busy or trendy, but because it's specific, solved, and *different from the default*. Specificity is the entire differentiator between generic AI output and exceptional AI-assisted design.

This is how we get it. This is the framework.

Part 1: The Brand/Persona Anchor

Job: Give the model a concrete decision-making context so it stops guessing.

Generic prompt: "A SaaS hero for a project management tool."

Anchored prompt: "Sentinel, an enterprise-grade security monitoring platform for CISOs at large companies. Sentinel is paranoid about data loss, skeptical of AI, and built for security teams who have to justify every tool purchase."

Why the difference matters: When you name the product and specify its audience and values, the model stops defaulting to the generic aesthetic. It starts making micro-decisions from the perspective of that persona. A skeptical CISO probably doesn't trust dashboard mockups or ambient gradients. She wants clarity, technical detail, and proof. That changes everything downstream — the tone of copy, the kind of visuals, what deserves emphasis.

With a named anchor:

Failure modes without anchoring:

How to apply it: Before you write the prompt, invent or specify: a concrete brand name or product name, the exact persona of the primary decision-maker (title, pain point, skepticism), and one specific value or principle the brand is known for.

This is not "for inspiration" — the model needs this in the prompt. It's the input that makes every downstream choice specific instead of average.

Part 2: The Signature Mechanic

Job: One memorable interaction per hero. Not ten mediocre ones.

Generic prompt: "Make it interactive. Add some animations."

Signature-mechanic prompt: "When the user scrolls into view, the headline text character-by-character reveals with each character popping into place using a spring easing curve. No morph, no fade — just pop. Every character gets a short stagger. This is the only animation on the hero. Period."

Why one clear mechanic beats five:

Failure modes:

How to apply it: Pick one interaction mechanic. Specify it mechanically (actual easing curves, actual timing values, actual stagger amounts). Then defend why that mechanic serves the job of the hero — conversion, clarity, memorability, trust. Leave everything else static until you've earned the right to add more motion.

Part 3: Exact Visual Specification

Job: Remove every color name and vague adjective so the model has zero interpretation overhead.

Generic prompt: "Use a modern sans-serif font. Pick a color scheme that's professional but not boring."

Exact-spec prompt: "Font: Inter, 600 weight for headlines, 400 weight for body. Primary color: hex value for a near-black. Accent color: hex value for a specific cyan. CTA button uses the accent as background, near-black text. Padding around the hero container: exact px values for desktop, tablet, and mobile."

Why exact specification matters: A model has no taste. None. It can't look at a hex code and know if it works; it can only look at patterns in the training data. Color names like "professional" or "modern" map to whatever color the model saw most often associated with those words, which is the consensus-average shade. By contrast, hex codes have zero interpretation.

Failure modes without exact specs:

How to apply it: Before you write the prompt: define a color palette with hex codes, specify typography with exact font names and weights and sizes, define spacing in px not vague terms, specify image dimensions if used, and define responsive breakpoints and what changes at each.

Use these specs in every design prompt. They're the difference between a result that looks accidental and one that looks considered.

Part 4: Timing and Motion Specification

Job: Replace "smooth" and "subtle" with actual motion values so the result doesn't default to sluggish or jarring.

Generic prompt: "Add a smooth animation when the hero content appears."

Timing-spec prompt: "When the hero content enters the viewport, the text fades in over a specific duration using a named ease-out cubic-bezier curve. The supporting image slides in from the right, traveling a specific distance, starting slightly after the text fade begins. Both animations use GPU-accelerated properties only. No motion blur. No bounce curves. On slow connections or with prefers-reduced-motion, animations reduce to a simple opacity swap."

Why specific timing beats vague:

Failure modes:

How to apply it: Use milliseconds, not "quick" or "gentle." Specify easing functions as named curves or cubic-bezier values. Define stagger if multiple elements animate. Specify which CSS properties animate. Include a prefers-reduced-motion override that keeps the UX functional without animation.

Motion is the difference between a static design and something memorable. Vague motion specs produce the forgettable default.

Part 5: Structural/Layout Precision

Job: Describe the actual DOM structure section-by-section so the code is maintainable and accessible, not just beautiful.

Generic prompt: "Build a clean, modern hero section layout."

Structural-precision prompt: "HTML structure: header with semantic nav. Below header, a hero section with a role attribute containing a main headline as h1, a supporting subheading as p, body copy describing the value prop, and two CTA buttons — one primary, one secondary — with distinct visual weight. To the side, an image with proper alt text describing the product benefit, not 'hero image.' All interactive elements have visible focus states. On mobile, the image moves below the text and the layout shifts to single-column."

Why structure-first beats vibe-first:

Failure modes:

How to apply it: Structure the prompt by describing the actual HTML: opening section and semantic elements, content elements in order, explicit focus states and keyboard navigation, alt text strategy for images, and responsive breakpoints with what changes at each.

This sounds tedious. It's not. It's the difference between output that works only on the designer's machine and output that actually ships.

Part 6: The Output Contract

Job: Be specific about what "done" looks like so the model doesn't over-deliver features you don't need or under-deliver on critical details.

Generic prompt: "Build a hero section."

Contract-spec prompt: "Output a single component using the stack I specify. No unrequested external dependencies. The result must work across modern desktop and mobile browsers. Use CSS grid or flexbox for layout. Estimate the lines of code so I know roughly what to expect. The output should be copy-paste-ready to production."

Why the contract prevents bad surprises:

Failure modes:

How to apply it: At the end of the prompt, always include: what tech stack you want, what the output structure should be, what external dependencies are allowed, an estimated scope, and what you'll do with it next.

This is boring, unglamorous work. It's also the entire difference between a prompt that produces something you can actually use and one that produces something you have to spend hours refactoring.

Before and After: A Real Example

The Vague Prompt (Produces Generic Output)

"Build a SaaS hero section. Make it modern and clean. Use a nice color scheme. Include a headline, some supporting text, and a CTA button. Add some animation to make it interesting. Make sure it looks good on mobile."

What you get: A hero with a purple-to-blue gradient, sans-serif text in a safe weight, a rounded button, a generic stock image, fade-in animations that feel slow, and a mobile view that's technically responsive but cuts off text awkwardly.

The Specific Prompt (Following the Framework)

"Build a SaaS hero for Sentinel, an enterprise-grade security monitoring platform for CISOs and security engineers. Sentinel is serious, technical, not trendy.

Signature mechanic: When the hero content enters the viewport, the main headline character-by-character reveals with a pop animation. Short stagger between characters. No other animations.

Visuals: exact font, exact weights, exact color palette specified with hex values, exact padding values across breakpoints.

Timing: the reveal animation runs a specific total duration with a named easing curve, no bounce. Prefers-reduced-motion gets a fast opacity swap instead.

Structure: semantic header, nav, and hero section with proper heading hierarchy, two CTA buttons with distinct visual weight, visible focus states, single-column mobile layout.

Output: a single component, no unrequested frameworks, copy-paste-ready to production."

What you get: A hero that feels intentional. The pop animation is memorable without being busy. The color palette works for a serious security product, not a lifestyle app. The copy is terse and technical because the model understood the audience. Mobile is actually thought through. The code is clean enough that a junior developer can modify it.

The second prompt is longer. It's also the difference between output you're proud to ship and output you're embarrassed to look at for more than two seconds.

The QA Bar: How We Test Every HeroPrompts Prompt

Every prompt in the HeroPrompts library passes a ruthless QA gate:

We don't ship prompts that barely meet the bar. We ship prompts that set it.

The Bottom Line: Specificity Is the Lever

AI models are prediction machines trained on patterns. They're exceptionally good at extrapolating from precise input. They're terrible at guessing what "modern" means or what counts as "professional." The entire gap between generic AI output and exceptional output is the specificity of your prompt.

This six-part framework — anchor, mechanic, visuals, timing, structure, contract — isn't creative. It's mechanical. That's why it works. It removes guesswork from both the model and you.

You don't have to invent this framework for every new design. The 52+ prompts in the HeroPrompts library are built on this exact structure. Each one is battle-tested, QA-checked, and proven to produce exceptional output. You can browse them, use them, modify them, or use them as templates for your own brand.

Browse the Library

We've applied this framework to hero sections for SaaS, e-commerce, agencies, personal brands, and more. Every prompt in the HeroPrompts library passes the same specificity bar: it produces output that makes decision-makers notice.

Browse all 52+ prompts at /browse. Annual license is $149/year. Lifetime access is $399 with commercial license included. If you're not sure it's right for you, we offer a 14-day refund — no questions asked.

We also have free prompts available to see the framework in action with zero cost. Check them out at /browse?free=true.

Founding members save 50% on all plans with code FOUNDING50.

The difference between generic AI output and exceptional output is specificity. This framework is how you get there.