Website hero prompts. Built for v0 and Claude.
Pick a layout, headline goal, CTA pattern, visual element, and mood; get a hero-section brief ready to paste into v0.dev, Claude Design, Cursor, or Lovable. Browser-only; nothing is saved.
Brand, layout, copy, CTA, mood.
Your hero brief.
Click build to generate.
What good looks like.
Holloway: brand new clean-beauty serum, primary action is "shop the launch"
Layout: split 50/50. Visual: a single dropper bottle on travertine, soft north light. Goal: announce-launch. Headline length: medium - "Holloway. Made in small batches. Built for the long road." Subhead: "A retinol-free serum with bakuchiol and squalane, formulated in California." CTA: primary "Shop the launch" + secondary text link "What is bakuchiol?". Color: warm earthy duotone. Mood: editorial warm. The prompt should ship to v0.dev with the asset description, then iterate three times via diff before any photoshoot decisions.
Pulsegrid: collaborative ops platform for product teams
Layout: centered-figure-right. Visual: 3D abstract object, soft studio light. Goal: explain-product. Headline length: short - "The operating system for product teams." Subhead: "Roadmaps, retros, and rituals - one workspace, one source of truth." CTA: primary plus ghost. Color: cool minimal (white + 2 greys + one indigo accent). Mood: minimal tech. Notice how the H1 carries the entire promise; the subhead names the three concrete primitives. This is the canonical SaaS hero pattern from Linear and Stripe.
Quiet North: independent design studio, portfolio gateway
Layout: asymmetric type-led. Visual: oversize typographic glyph (the letter Q rendered in 240px serif, set off-grid). Goal: build-credibility. Headline length: long - "Quiet North is a small studio that makes brand systems for founders who would rather ship than wait." CTA: single primary "See the work". Color: monochrome ink on cream. Mood: editorial warm + serious clinical. The long headline does the heavy lifting; the visual is restrained. This pattern works for agencies because the H1 is itself the proof. Good fit for Claude Design or Cursor.
A hero is a handshake, not a brochure.
A working website hero answers "what is this and why should I care" in two seconds. Anything else - press logos, navigation cleverness, scroll teases - is decoration. The brief you paste into v0.dev or Claude Design needs five sections: the goal, the layout, the H1 copy direction with three variations, the CTA pattern, and the breakpoint specs. Skip any of those and the model fills the gap with a generic landing-page template that has been on every Vercel demo since 2022.
Hero answers "what is this and why care"
Every other hero pattern is a variation on this question. If a first-time visitor cannot answer those two parts within five seconds of landing, the page has failed regardless of how well-designed the figure is. The H1 carries the "what". The subhead carries the "why". The CTA carries the "now what". Test by reading the hero copy out loud to someone who has never heard of the brand; if they have to ask follow-up questions before they can describe the product, rewrite. Use the headline analyzer to score the H1 once you have a candidate.
Type ladder above all else
The single biggest determinant of whether a hero feels professional or amateur is the type ladder. H1 to subhead to CTA copy should sit on a clear ratio: 1.6x or 1.8x for the modular scale. The H1 should be the largest text on the page by a meaningful margin (typically 1.5x or more vs. any body text). Subhead opacity should drop to 70% of the headline color to create natural hierarchy without breaking the palette. Most v0 outputs default to a flat type ladder - constrain the prompt with explicit font sizes (clamp(2.5rem, 5vw, 4rem) for H1) to fix this. Reference web.dev typography fundamentals for the maths.
One job per CTA
A hero with two equally weighted buttons is rarely doing its visitor a favor. The default pattern is one primary action plus one secondary text link. The primary action is the answer to "what should this person do right now if they trust you". The secondary link is the escape hatch for visitors who need a step before that. Dual-action buttons (two equally weighted) are reserved for the rare case where both actions are first-class - "see pricing" and "book a demo" for a high-consideration sale, for example. If you cannot name which button is primary and which is secondary, the hero is unfocused. Pair this with the conversion rate calculator to model expected lift from CTA changes.
Visual hierarchy is brutal
The visual element should support the headline, not compete with it. The most common failure mode in AI-generated heroes is a flashy 3D figure that visually dominates a small, washed-out H1 - making the page feel like a tech demo rather than a product page. Constrain the figure to a maximum of 40% of the viewport at desktop. Use restrained color in the figure (one accent only, ideally pulled from the brand palette). When in doubt, choose typographic-led over figure-led; Stripe's long-running hero is purely typographic and remains the gold standard for B2B SaaS.
Constrain the LLM with breakpoint specs
v0.dev and Claude Design are weakest on responsive behavior unless given explicit breakpoints in the prompt. Default outputs ship a desktop hero that breaks awkwardly at 768px because the model interpolated. Always pass: "1280, 1024, 768, 480 - stack figure below copy at 768; reduce H1 font-size by ~25% at 480; CTA must remain above the fold on 375x667." Add the magic phrase "test that the CTA never sits below the fold" - it forces the model to think through small-screen geometry rather than scaling everything proportionally. Validate the output with the page speed test once shipped.
Iterate via diff, not rewrite
The mistake teams make with v0 and Claude Design is asking for a hero, getting v1, then asking for "a different version". The model loses context and you end up with a totally different design. Better: ask for one specific change at a time - "keep everything else, but make the H1 left-aligned instead of centered" - so the model performs a diff rather than a regeneration. After three diffs you typically have a hero worth shipping; after one regeneration you typically have to start over. This is the same pattern GitHub Copilot users learn for code suggestions.
Related work: Web design service for full hero design pipelines. Headline analyzer for scoring the H1. Meta tag generator for the page-level metadata. OG preview for the social-share card. Contrast checker for accessibility on the CTA. Brand identity if the brand needs the system before the hero.
Five answers.
Which AI tool is the prompt optimized for?
The output is structured as a design brief that any modern code-generating model can parse. v0.dev and Claude Design are the primary targets because they ship Tailwind-styled React components by default. Cursor and Lovable.dev also work; both accept long-form Markdown briefs. For pure design output (no code), the same prompt works in Figma's AI plugins or Stitch with one tweak: drop the "Tailwind + Next.js" line and replace it with "Figma frame, 1440x900 desktop and 375x812 mobile." The structure (goal, layout, H1, subhead, CTA, visual, color) is generator-agnostic.
Why three example H1 variations and not one?
A single example acts as an anchor and the model copies its rhythm. Three examples force the model to pick a pattern, not a specific phrase. This is the difference between getting a unique H1 and getting a near-clone of the example. The three variations also give your team something to react to and combine; the final shipped H1 often takes the rhythm of variation 1, the noun of variation 2, and the verb of variation 3.
Is the asymmetric type-led layout always better?
No. Asymmetric type-led works for agencies, editorial brands, and B2B firms whose value prop is the words themselves. Split 50/50 still wins for DTC product launches because the visual is part of the proof. Centered text-only is best when the H1 is exceptionally short and quotable (under 5 words). Test the layout against the question "what does the visitor need to see most" - if the answer is the product, use a layout that puts the product up front; if the answer is the promise, use a layout that puts the H1 up front.
How do I prevent v0 from giving me a generic-looking hero?
The default output is generic because the prompt was generic. Specificity fixes it. Replace "professional sans-serif" with "Söhne Buch for body, Söhne Halbfett for H1". Replace "warm color palette" with the actual hex values. Replace "good responsive behavior" with the four breakpoints. The prompt this tool produces is intentionally specific (color named, breakpoints listed, accessibility requirements stated) - that specificity is what gets a custom-looking hero on the first generation rather than the third. If the first output is still generic, copy the brief into the next iteration and add one specific detail per round.
Does this tool save my brief?
No. Every value you enter and every prompt that gets built lives in your browser tab only. Nothing is transmitted to a server, stored in a database, or synced across devices. Close the tab and the data is gone. The Copy prompt button puts the assembled brief on your clipboard; that is the only output path.
Briefs are the design.
Our website-design engagements pair a hero brief with the typography, motion, and copy that make the section ship. Two-week turnaround on the homepage hero plus three internal page templates.