Hero prompt
The first screen: what it is, who it is for, what to do next.
Prompt
Prompt
Use the klarhimmel-design skill. Build the hero for {product}, for {audience}. The next step is {action}. Install: npx shadcn add @klarhimmel/hero-split @klarhimmel/hero-centered @klarhimmel/hero-frame @klarhimmel/hero-minimal @klarhimmel/hero-code @klarhimmel/hero-prompt (remove what you do not use) Pick: - hero-split: copy left, image right; the default - hero-centered: headline over a wide framed image - hero-frame: a product screenshot in a window - hero-minimal: type only, one link - hero-code: developer tool with an install command - hero-prompt: AI product with a prompt box Props: title ≤120, description ≤300; primary and secondary as { label, href }; media as { src, alt }. eyebrow and note are optional. Copy: The title says what it does in one line, in the reader's words. The primary label names the outcome. Accessibility: The hero carries the page's only h1. Write real alt text for the image. Do not put text inside the image. Never: viewport variants (md:, lg:), style=, text or images outside Text and Media, fields the schema lacks. Shorten copy to fit the limits. Done when: exactly one h1 on the page; one primary action; alt text describes the image; no overflow at 390 px.
Variables
| Variable | What to fill in | Example |
|---|---|---|
{product} | What you sell, in a few words | Room booking for small hotels |
{audience} | Who it is for | Hotels with 10 to 40 rooms |
{action} | The one next step | Start a free trial |
A good result
Exactly one h1 on the page. One primary action. Alt text describes the image.
- [ ] exactly one h1 on the page
- [ ] one primary action
- [ ] alt text describes the image
- [ ] no overflow at 390 px