Prompt Recipes
Whole pages, described precisely enough that the first build is the one you keep.
A pricing page is not a list of features. It is a decision aid, and its job is to make one option obviously correct for a specific reader. Pages that present four equal choices are not being generous, they are transferring the work of choosing back to the visitor — who usually responds by leaving.
The generated version of this page has a familiar shape: three columns of identical height, each with a checkmark list of twelve features, a middle column labelled Most popular, and four plans where the top one says Contact us with no indication of what it costs. None of it helps anyone decide.
Two rules fix most of it. First, every limit is a number, not an adjective — 10,000 events per month means something, unlimited does not. Second, the comparison table is short and grouped, because a forty-row table is a spreadsheet, not an argument. The prompt below enforces both, plus the thing pricing pages most often get wrong: what happens when you exceed a limit.
The order is the argument. Reordering these is not a layout decision, it is a change to the reasoning.
One sentence naming who the page is for, then monthly/annual. The toggle sits above the tiers so the price a visitor remembers is the one for their billing choice.
One tier is marked recommended and carries a one-line reason. Equal-weight columns make the reader do comparison work the page should have done.
The shared floor stated once, above or below the tiers. Repeating it three times triples the reading load and hides the differences.
Seats, projects, events, retention, API calls — as numbers with units. Unlimited is a promise the infrastructure will eventually break.
Six to ten rows grouped in three sections, differences only. If a row is identical across all tiers it belongs in the shared floor, not the table.
What happens at the limit: throttle, bill, or block. This single line prevents most support tickets and most refund requests.
Five questions: changing plans, refunds, tax and invoicing, overage, and what enterprise adds. These are the five emails sales would otherwise answer.
One action, matching the recommended tier. Two competing CTAs at the bottom re-open a decision the page just closed.
7 variables. Change one and the text below rewrites itself — nothing else on this page moves.
Simplest to explain and to forecast.
Best when the differences are genuinely tabular.
Build a pricing page for a a B2B SaaS product bought by a team, where the buyer is a manager and the users are their staff whose model is per seat, with volume breaks at 10, 25 and 50 seats. Seat changes are prorated to the day.. AUDIENCE Someone who has already decided the product might fit and is now choosing a plan. They are comparing against one competitor and they will leave if the page requires arithmetic. STRUCTURE (exactly this order) 1. Header: a page title of six words or fewer, one sentence naming who each plan is for, and a a monthly and annual toggle where annual shows the effective monthly price plus the total charged per year and the exact saving. 2. Tiers: three tiers (Free, Team, Business) with the middle one recommended. Free is genuinely useful, not a trial — state its limits plainly. Exactly one is marked Recommended, with a one-line reason (for example: most teams of 10 to 30 people land here). 3. Shared floor: one short block listing what every plan includes, stated once. 4. Limits: a compact table of numeric limits per plan — seats, projects, monthly events, data retention in days, API rate limit. Every number carries a unit. 5. Comparison table: a grouped comparison table with three sections (Limits, Collaboration, Security), six to ten rows total, and a checkmark, dash or number in each cell — never a vague word. Six to ten rows maximum, grouped under three headings, listing differences only. Identical rows belong in the shared floor. 6. Overage behaviour: one sentence per plan stating what happens when a limit is reached — throttle, metered billing, or block until upgrade. Name the price per unit if metered. 7. FAQ: exactly five questions — switching plans mid-cycle, refund policy, tax and invoicing, what happens at a limit, and what the top tier adds beyond the listed features. 8. Final CTA: one button, matching the recommended tier, plus a plain-text line for sales contact. STYLE Product neutral: white cards on a very light grey canvas, 1px borders, one accent used only on the recommended tier's border and button, prices at 2.4rem with the currency symbol at 60 percent size. COPY RULES - Never write unlimited. Every limit is a number with a unit. - No price without a currency symbol and a tax basis (per month, excluding VAT, billed annually). - State the annual discount as an absolute number and a percentage, not as save big. - Do not describe a plan by its features; describe who it is for, then list the features. - No asterisked conditions below the fold. If a limit has a condition, it goes beside the limit. - No dark patterns: no pre-ticked add-ons, no fake countdowns, no hidden annual commitment. MOTION No animation. A pricing page is read, compared and screenshotted; movement only gets in the way of that. CONSTRAINTS - Tier cards must be equal height at every viewport, with the CTA aligned on one baseline. - On mobile the recommended tier appears first, followed by the other tiers in price order. - The table must be readable at 390px wide — collapse to per-plan blocks rather than horizontal scroll. - Every price element marked up as text, never baked into an image. OUTPUT One page. Self-contained. A single stylesheet.
| Variable | How to edit it |
|---|---|
{{MODEL}} |
This decides what the limits table contains. Switching from seats to usage without rewriting the table produces a page that lists seat counts for a product billed per event. |
{{TIERS}} |
Three is the default because it allows a recommended middle. Four only works when the fourth serves a different buyer, otherwise it becomes the plan nobody picks and the page reads as greedy. |
{{TOGGLE}} |
If annual is the only option, say so once, plainly, and show the yearly total. A hidden annual commitment discovered at checkout is the most reliable way to earn a chargeback. |
{{COMPARE}} |
A table with more than ten rows stops being read and starts being scrolled. If you need forty rows, the page needs fewer plans, not a longer table. |
{{STYLE}} |
Swap the block whole. Editorial styling with product-neutral prices produces serif prices inside shadowed cards, which reads as two pages stitched together. |
| Builder | What to do differently |
|---|---|
| v0 | Generate one tier card first and check it at 390px before asking for three. Equal-height columns with aligned CTAs are much easier to fix in isolation than across a full grid. |
| Lovable | It tends to invent a fourth Enterprise plan with no price. If you keep it, the starting price must be real; a column that says Contact us next to three real prices reads as a hidden cost. |
| Bolt | Ask for the toggle as a real state change with both prices in the markup, not a CSS-only swap. Otherwise the annual price is invisible to search engines and to anyone with JavaScript off. |
| Cursor / Claude Code | Put the plans in a JSON file and render from it. Pricing changes more often than any other page, and editing markup under pressure is how a stale price survives a launch. |
Equal height, equal weight, equal feature count. The reader is asked to find the differences themselves, and most respond by leaving to compare somewhere that already did it. One recommended tier is the entire job of this page.
Unlimited storage, unlimited seats, unlimited API calls. It is either false or it is an invitation to abuse, and sophisticated buyers read it as a sign the limits are undocumented rather than absent.
A visitor calculating whether they will exceed 10,000 events does not know whether the next 5,000 cost money, get throttled, or break the integration. That uncertainty is the most common reason a trial never converts.
If the top tier has no price at all, the visitor assumes it is out of reach and self-disqualifies — often wrongly. A starting price, even a range, keeps the option alive.