Landing page prompt
Gets your agent from nothing to a complete landing page in one pass, built from the library's blocks.
Prompt
Prompt
Use the klarhimmel-design skill. Build a landing page for {product}, for {audience}. The one action is {action}; show prices only if {pricing}. Install: npx shadcn add @klarhimmel/navbar-simple @klarhimmel/hero-split @klarhimmel/logos-strip @klarhimmel/features-grid @klarhimmel/testimonials-grid @klarhimmel/pricing-tiers @klarhimmel/faq-list @klarhimmel/cta-band @klarhimmel/footer-columns Blocks, in order: - navbar-simple: brand, links, one action - hero-split: what it does in one line; the only h1 - logos-strip: proof: who uses it - features-grid: three to six things it does - testimonials-grid: what customers say - pricing-tiers: only if {pricing} - faq-list: the doubts people have - cta-band: one closing action, inverse tone - footer-columns: links and the legal line Props: start from each block's defaults and replace every string; links are { label, href }, images { src, alt }. Copy: Lead with what it does, then proof. Plain words, one idea a section, fictional customers in samples. Accessibility: One h1 (the hero). Alternate default and muted tones; use inverse once, for the closing action. Check 390 px. 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: one h1; one primary action; every field within its limit; alt text on images.
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 |
{pricing} | Whether to show prices | there is a public price |
A good result
One h1. One primary action. Every field within its limit.
- [ ] one h1
- [ ] one primary action
- [ ] every field within its limit
- [ ] alt text on images