Design prompts for pricing pages

A pricing page has one job: help someone pick a plan in a few seconds without second-guessing it. That means a small set of tiers, the recommended plan made obvious, every plan saying what you actually get, and a real price instead of a vague "Contact us". The prompts below are the most-copied pricing designs in the Superdesign library, from dark dev-tool tables to fintech, editorial and usage-based calculators. Open any one to see the exact prompt behind it, then change the tiers, copy and brand colors and generate your own editable version in seconds.

How to prompt a pricing page that converts, not one that looks generated

An AI design agent has a strong default for a pricing page, and most of those defaults hurt conversion: three identical cards, a purple gradient, placeholder features, no annual toggle, and no plan that stands out. A good prompt is really a list of constraints that override those defaults. Here is each default to override, the words that do it, and a template that bakes them all in.

Design a [dark or light] pricing page for [who buys it] choosing a [product] plan.
Tiers: exactly [three], good-better-best, named [Starter / Pro / Team] with real prices [$0 / $24 / $79]. Add an Enterprise [Contact sales, starting at $X] column only if needed.
Recommended plan: lift the [middle] tier, give it a "Most popular" badge and the one bold filled CTA. The others get quieter outline buttons.
Billing: a monthly and annual toggle that swaps the prices live, with the annual saving shown (for example "Save 20%" or "2 months free").
Features: per-tier lists in plain language that genuinely escalate, or a comparison table with options as columns and features as rows, checks and crosses, no jargon names.
Decision support: a short FAQ that answers the real objections, plus trust signals near the price (refund, no card to start, security).
Style: a neutral base with one [accent] color used only for the recommended plan and the CTAs. Typeface [name], not the default. No purple gradient, no frosted-glass cards.

Number of tiers

Default: It either lists every feature in one flat wall or invents as many plans as it can fit, so there is no clear path through.

Constrain it: Ask for exactly three tiers, good-better-best, each named and priced, with an Enterprise column only when you truly need one.

Anchor the recommended plan

Default: It draws three identical cards, or drops a "Most Popular" badge on one without making it stand out, so nothing pulls the eye.

Constrain it: Name the recommended tier and lift it: place it in the middle, raise it, add the badge, and give it the one bold CTA.

Billing toggle and annual savings

Default: It shows a single monthly price per plan and skips the annual option, so the saving is invisible.

Constrain it: Ask for a monthly and annual toggle that swaps the prices live, and show the annual saving next to the price.

What you actually get

Default: It fills every plan with the same placeholder list, "Feature one, Feature two", so no plan tells you what it really includes.

Constrain it: Spell out real, plain-language features per tier that escalate, or a comparison table with options as columns and features as rows.

Color and type

Default: Left alone it reaches for a purple gradient, frosted-glass cards and the Inter typeface, with color used as decoration.

Constrain it: Name a typeface and one accent color on a neutral base, and reserve that accent for the recommended plan and the CTAs.

CTA and decision support

Default: It gives every plan the same grey button and leaves out the FAQ and trust signals a buyer needs to commit.

Constrain it: Ask for one bold CTA on the recommended plan, quieter buttons elsewhere, plus a short FAQ and trust signals near the price.

Frequently asked questions

What makes a good pricing page?

It lets someone pick a plan in a few seconds. Keep the tiers few and clearly different, make the recommended plan obvious, say what each plan actually includes in plain language, show a real price, and answer the common objections in a short FAQ. Clarity converts; another clever layout rarely does.

How many pricing tiers should a pricing page have?

Three is the common sweet spot: an entry plan, a recommended plan, and a higher plan that anchors the value. Too many tiers cause choice paralysis, so add a fourth or an Enterprise column only when the product really needs it. The good-better-best shape gives most buyers an easy middle to land on.

How do you highlight the recommended ("Most Popular") plan?

Put it in the middle, lift it visually, and give it a "Most popular" or "Recommended" badge plus the one bold filled button. The center-stage effect means people read the central, raised option as the popular choice, so placement and contrast do the work, not just the label.

Should I show prices on my pricing page?

For anything self-serve, yes. Most buyers want to research and buy without talking to sales, and hiding the price behind "Contact us" adds friction and reads as expensive. Even a complex enterprise tier is better shown as "starting at $X" than left blank, so people can anchor on a number.

Why does my AI-generated pricing page look generic?

Because a vague prompt gets the model defaults: a purple gradient, frosted-glass cards, the Inter typeface, three identical plans, placeholder "Feature one" lists and no annual toggle. Name three real tiers, the recommended one to lift, real features, one accent color on a neutral base, a named typeface, and a billing toggle, and it stops reaching for the average.

How do you write a prompt to generate a pricing page?

Describe the decision, not the vibe: who is buying, the exact tiers and prices, which plan is recommended and how it should stand out, a monthly and annual toggle, the real features per tier, a short FAQ, and one accent color on a neutral base. The template above walks through each part, and you can open any example here to see a full prompt that works. Stuck on something? Ping us and we will sort it out together.