How to brief Claude and v0 to design a hero section

Asking Claude or v0 for "a hero section for my SaaS" gets you something that works on the first try and embarrasses you on the second look. The headline reads as marketing fluff. The CTA is a purple gradient. The background has three competing things going on. You delete it and rewrite by hand.

The problem isn't the model. It's that you gave it a category, not a brief. A brief has six parts; once you ship one, your hit rate on first-draft-shippable goes from ~10% to ~70%.

The six-part brief

1. The product, in one specific sentence

Not "a SaaS for teams." Not "a productivity tool." Something like "a Postgres branching tool for backend engineers who want preview-environment databases without operating Postgres." The model can write copy from a sentence with a noun and a job. It cannot write copy from a vibe.

2. The audience and what they already know

"Senior backend engineers at Series B–C startups. They know Postgres. They've used Neon and Supabase. They have a Vercel-style brain for what a polished dev tool feels like." This calibrates vocabulary, references, and how much explanation the headline has to do.

3. The single sharpest promise

One sentence. "Spin up a fresh copy of production in under five seconds." Not three benefits in a list. The model will pad to fill space if you don't give it a target.

4. The variant

Centered, split with product shot, animated demo, or bento. Pick one. "Centered, bold claim, single CTA, no product shot, dark background with subtle grain." The variant decision constrains layout, which is where most AI heros wander.

5. The visual register

Three named references and a constraint. "Should feel like Linear's marketing site or Resend's landing — dim background, tight type, generous whitespace. Avoid: cartoon gradients, oversized radius, illustrations of people." Naming what to avoid is doing half the work.

6. The stack and the spine

"Next.js App Router, Tailwind, shadcn for buttons and inputs. Use Geist Sans for type. No new dependencies." Without this, the model will reach for a CSS-in-JS library you don't use and reinvent button styles you already have.

The prompt skeleton

Design a hero section for [product, one specific sentence].

Audience: [who, what they already know].
Promise: [single sharpest sentence].
Variant: [centered / split / animated / bento]. [one sentence describing the layout].
Register: feels like [reference 1], [reference 2], [reference 3]. Avoid [3 specific things].
Stack: [framework, styling, components, fonts]. No new dependencies.

Deliverables:
- Headline (max 8 words)
- Subhead (one sentence, max 18 words)
- Primary CTA label (one verb, max 3 words)
- Secondary CTA label (link, optional)
- The component, as a single file, semantic HTML, no inline styles.

The four corrections you'll always make

Even with a tight brief, the first output needs the same four adjustments roughly 80% of the time. Knowing them in advance turns a 30-minute back-and-forth into a 5-minute polish.

1. 01Tighten the headline. The model defaults to 11–14 words. Cut to 6–8. Editorial heroes are short.
2. 02Drop one of the visual elements. The first draft will have a gradient, a grain texture, a decorative line, and a corner glow. Keep two.
3. 03Fix the CTA verb. "Get Started" is the model's panic word. Replace with the specific verb ("Start free", "Open dashboard", "Read the docs").
4. 04Tighten tracking on the headline. First drafts ship default tracking; editorial heroes need -0.02em to -0.035em. One line of CSS, large perceptual shift.

Two example briefs

Brief A: dev tool

Design a hero for a Postgres branching tool that gives backend engineers a fresh copy of production in under 5 seconds. Audience: senior backend engineers at Series B-C startups; know Postgres, Neon, Supabase. Promise: one command, a fresh prod-like database, no ops. Variant: split, left column copy, right column terminal screenshot with a single command and its output. Register: Resend, Vercel, Railway; avoid cartoon gradients, generic illustrations, more than one accent color. Stack: Next.js, Tailwind, shadcn, Geist Mono for the terminal.

Brief B: design tool

Design a hero for a Figma plugin that turns a screenshot into a Tailwind component. Audience: indie hackers and frontend devs who use v0 and Cursor. Promise: paste a screenshot, get clean React + Tailwind in 10 seconds. Variant: centered, big claim, single CTA, no product shot, animated demo as a small loop below the fold. Register: Linear, Raycast, Arc; avoid sparkles, beams, animated backgrounds, the word "AI-powered". Stack: Next.js, Tailwind, shadcn, Inter, no Framer Motion.

Ship one

The AI prompts collection has the brief skeleton above as a tuned prompt for each hero variant, paste, fill in the six fields, run. The hero section entry has the variant breakdown if you're not sure which one to brief for.