Pricing page prompt
Gets your agent to a working pricing page in one pass, using the pricing blocks and the FAQ.
Prompt
Prompt
Use the klarhimmel-design skill. Build a pricing page for {product}. Show {plans} in {currency}, billed {billing}. Mark the plan most people pick. Answer {questions} in an FAQ. Install: npx shadcn add @klarhimmel/navbar-simple @klarhimmel/hero-minimal @klarhimmel/pricing-tiers @klarhimmel/pricing-comparison @klarhimmel/faq-list @klarhimmel/cta-band @klarhimmel/footer-simple Blocks, in order: - navbar-simple: brand, links, one action - hero-minimal: the page title; the only h1 - pricing-tiers: up to 3 plans, one featured; use pricing-toggle for monthly and yearly - pricing-comparison: feature-by-plan table - faq-list: the questions people ask - cta-band: one closing action - footer-simple: one quiet row Props: tiers with name, price text (with currency), period and a feature list; exactly one featured; table cells are "yes", "no" or short text. Copy: Prices carry their VAT basis. Name what a plan includes. Use the same words for a feature in every tier. Accessibility: One h1 (the hero). The comparison table has real headers; the toggle, if used, is a labelled control. 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 featured plan; prices show currency and VAT basis.
Variables
| Variable | What to fill in | Example |
|---|---|---|
{product} | What you sell, in a few words | Room booking for small hotels |
{plans} | Plan names | Start, Grow, Group |
{currency} | Currency and VAT basis | SEK excl. VAT |
{billing} | Billing period | monthly or yearly |
{questions} | What people ask before they buy | cancelling, invoices, data |
A good result
One h1. One featured plan. Prices show currency and VAT basis.
- [ ] one h1
- [ ] one featured plan
- [ ] prices show currency and VAT basis