TLDR: A pricing page is where people decide to buy or leave, so build it on purpose. Settle the decisions first, how many tiers, what each costs, which plan you are actually selling, then prompt AI for one self-contained HTML page with tier cards, a highlighted recommended plan, a monthly/annual toggle, and a clear call to action on each plan. Refine the copy in plain English, check it on a phone, and publish it as a live link where the toggle still flips.
Most people build a pricing page badly in one of two ways. They write “contact us for pricing” and lose everyone who just wanted to see a number. Or they grab a generic template, drop in three columns, and ship something that looks like every other pricing page on the internet. Neither one does the job, because a pricing page is not decoration. It is the page where a visitor decides to become a customer or close the tab.
The good news is that a pricing page is one of the more forgiving things to build with AI. The layout is well understood, the moving parts are few, and the model has seen thousands of good examples. What it has not seen is your business. So the work that matters is not the code, it is the handful of decisions underneath the code. Make those first and the AI does the rest in a single conversation.
This is a build-a-pricing-page-with-AI walkthrough that spends most of its time on the decisions, because that is where a pricing page is won or lost, and then hands you a prompt that turns those decisions into a working page.
What actually makes a pricing page work?
Before any prompt, understand what you are building toward. A pricing page has one job: make the right plan feel like the obvious choice while removing every reason to hesitate. A few principles carry most of the weight.
- Three tiers is the sweet spot. One plan gives people nothing to compare against, so the price feels arbitrary. Five or more triggers choice paralysis. Three lets you anchor high, sell the middle, and offer a low entry point.
- Anchor high, then sell the middle. The most expensive plan is not there mainly to be bought. It makes the middle plan look reasonable by comparison. This is why the middle tier is usually the one you actually want people to pick, and the one you highlight.
- Highlight one plan. A “recommended” or “most popular” badge, a taller card, or an accent color tells the eye where to land. An undifferentiated row of three identical cards makes people work, and work is friction.
- One clear action per plan. Every card ends in a single button with a consistent verb. “Start free,” “Choose Pro,” “Talk to sales.” Do not mix “Buy now” on one and “Learn more” on another; that reads as indecision.
- Show the value, not just the features. A feature list of twenty checkboxes is a spec sheet, not a sell. Lead each tier with the outcome it unlocks, then support it with the features that prove it.
Here is the anatomy of a pricing page that does its job, the shape you are aiming the AI at.
Notice what the middle card does. It is taller, it is dark against two light neighbors, it carries the badge, and its button is filled instead of outlined. Nothing about that is an accident. Every one of those choices points the eye at the plan you want to sell.
Spec your pricing before you touch the AI
The single biggest predictor of a good result is walking in with your decisions made. If you prompt “make me a pricing page,” the AI invents plausible plans and prices, and you spend the next hour correcting fiction. Write these down first instead.
- The plans. Names and the one-line promise of each. “Starter, for solo makers testing the waters.” “Pro, for freelancers doing this for a living.” “Business, for small teams.”
- The prices. The monthly number and the annual number for each plan. Decide whether annual is shown as a discounted per-month figure or a single yearly charge.
- The dividing features. The short list that actually separates the tiers. Not everything, just the three or four lines a buyer compares. Projects, seats, storage, support level, whatever gates the upgrade.
- The recommended plan. Pick the one you want most people to choose. Usually the middle.
- The call to action. The verb on each button and where it should go, a signup link, a checkout, a contact form.
That is the whole spec, and it fits on an index card. Here is the difference it makes on the exact same request.
| Vague prompt | Specced prompt | |
|---|---|---|
| The ask | “Make me a pricing page.” | “Build a pricing page with these three tiers as cards.” |
| Plans | AI invents names and features | “Starter $9, Pro $29, Business $79, with these features each.” |
| Emphasis | Three identical columns | “Highlight Pro as recommended, taller card, accent color.” |
| Billing | Monthly only, or guessed | “Monthly/annual toggle at top, annual saves 20%.” |
| Action | Mixed or generic buttons | “One button per plan: Start free, Choose Pro, Talk to sales.” |
| Result | A page you rewrite | A page you tweak |
The prompt that builds it
Once your spec is on paper, the prompt is mostly transcription. Copy this, fill in the brackets with your real plans, and send it.
Build a pricing page as a single self-contained HTML file. Three tiers shown as
cards side by side, in this order:
- Starter, $9/month: [one-line promise]. Features: [feature, feature, feature].
- Pro, $29/month: [one-line promise]. Features: [everything in Starter, plus
feature, feature]. Mark this plan as "Recommended."
- Business, $79/month: [one-line promise]. Features: [everything in Pro, plus
feature, feature].
Requirements:
- A monthly/annual toggle at the top that switches all prices at once. Annual is
20% cheaper; show the discounted per-month price and a small "billed yearly" note.
- Make the Pro card stand out: taller, an accent color, a "Recommended" badge, and
a filled button while the others are outlined.
- One call to action button per plan: "Start free" on Starter, "Choose Pro" on Pro,
"Choose Business" on Business, each linking to [your signup URL].
- A short feature-comparison row or checklist so the differences between tiers are
obvious at a glance.
- Clean, modern styling, one accent color, generous spacing, and a fully responsive
layout that stacks to one column on mobile.
- Inline all CSS and JavaScript. No external libraries or fonts loaded from the
internet. One file.A capable model returns a working page from that, toggle and all. If you want the exact language for keeping the output in one file, there is a full guide on getting self-contained HTML from AI. And if the model splits things across files, just add the closing line asking for everything inlined into a single HTML document.
How do you make it not look generic?
The prompt above gets you a correct pricing page. Correct is not the same as convincing. The default AI look, a purple gradient and rounded cards, is fine, but it also screams “template,” and pricing is exactly where a generic feel undercuts trust. Spend a few follow-up messages pushing the design somewhere specific.
- Ask for a color palette that matches your brand instead of the default. There is a whole method in color palettes for AI pages.
- Tighten the type. A clear hierarchy between the price, the plan name, and the feature list does more for readability than any graphic. See typography tips for AI pages if this is where yours falls flat.
- Kill the tells. Rounded-everything, three emoji icons, and a fake testimonial read as filler. The broader fix is in making AI pages look less generic.
The move is always the same: describe what feels off in plain language and ask for a specific change. Iterating this way, one clear note at a time, is a skill worth its own read, covered in follow-up prompts to polish an AI page.
Refining the details that close the sale
With the structure right and the look sharpened, the last mile is a set of small, high-leverage touches. Each one is a one-line request.
- An annual savings badge. “Add a small ‘Save 20%’ badge next to the annual option in the toggle.” A visible discount is the reason people pick annual.
- A most-popular reason. “Under the Recommended badge on Pro, add one line: ‘Best for freelancers doing client work.‘” Tell people why it is recommended, not just that it is.
- Handle the big-customer case. If you sell to teams, “Add a fourth, slimmer card: Enterprise, with a ‘Talk to sales’ button and no price, for custom needs.” Not every buyer fits a self-serve tier.
- Anticipate objections with an FAQ. “Below the tiers, add a short FAQ: can I change plans later, is there a free trial, what happens if I cancel.” A good pricing FAQ removes the last hesitations.
- Mind the phone. Most pricing pages are read on a phone, and three side-by-side cards get cramped fast. “Stack the cards to a single column on mobile and keep the Recommended plan first.” The full treatment is in making AI pages mobile friendly.
None of these are code problems. They are decisions you make and hand to the AI in a sentence, which is the whole reason building a pricing page with AI works: the model is fluent in the layout, so you get to spend your attention on the parts that actually move buyers.
Getting the page in front of people
Here is where a lot of good pricing pages quietly die. You have a single HTML file that looks great in the preview, and now it has to become something a real customer can open. Screenshotting it is a non-starter; a picture of a pricing page has a dead toggle and dead buttons, which is the opposite of what a pricing page is for. Emailing the HTML file asks the recipient to download and open it, and half of them never will.
Here is the honest comparison of your options.
| Option | Toggle still works? | Buttons clickable? | Effort to open | Update later |
|---|---|---|---|---|
| Screenshot | No | No | Instant, but dead | Re-shoot and resend |
| Email the HTML file | Sometimes | Sometimes | Download, then open | Resend the file |
| Deploy to a host | Yes | Yes | Instant | Rebuild and redeploy |
| Publish as a live link | Yes | Yes | Instant | Update the same URL |
The last row is the one that fits how a pricing page actually gets used. Take the self-contained HTML the AI produced, or a ZIP if it is a multi-file project, and hand it to VisiblePage. You get a live URL right away, with no build step and no toolchain. The monthly/annual toggle flips, the buttons link out to your signup, and the page reads correctly on a phone, because you are sharing the real page and not a flattened image of it.
Two things make this fit pricing specifically. First, prices change, and when they do you update the same link instead of chasing down every place the old page lives. One canonical URL means the version everyone sees is always current. Second, you can publish the page as public, private, or password-protected, which matters when you are testing a new pricing structure with a few customers before you show the world. And when it is ready to be a real part of your site, you can point a custom domain at it.
A pricing page pairs naturally with the pages around it. If you are still building out the rest, there are companion walkthroughs for a landing page with AI, a product one-pager, and, when a flat table is not enough, an interactive pricing calculator that quotes a real number from a customer’s inputs.
Try it now: Publish your AI-generated pricing page with VisiblePage and get a live link in seconds.
Frequently asked questions
Can AI really build a good pricing page?
Yes. A pricing page is a small, well-understood layout: a few tier cards, a feature list, a monthly/annual toggle, and a call to action on each plan. That is exactly the kind of self-contained page AI builds reliably in one conversation. The quality comes from your decisions, how many tiers, what each costs, and which one you push, far more than from the code.
How many pricing tiers should I have?
Three is the common sweet spot. One plan gives people nothing to compare, and five or more causes choice paralysis. Three lets you anchor high with a premium plan, sell the middle one you actually want people to buy, and offer an entry plan that lowers the barrier. If you sell to large companies, add a fourth contact-us tier for enterprise.
Do I need to code the monthly/annual toggle myself?
No. Ask the AI for it in plain language: a toggle at the top that switches all prices between monthly and annual, with the annual price showing the discount. It writes the JavaScript. You just tell it the two numbers for each plan and whether annual is billed yearly or shown as a per-month equivalent.
How do I put the pricing page online or send it to someone?
Ask the AI for one self-contained HTML file, then publish it to a host that gives you a live URL. With VisiblePage you paste the HTML or drop a ZIP and get a shareable link immediately, with the toggle and buttons still working, and you can update the same link when prices change.
The short version
A pricing page is a decision before it is a design. Settle your tiers, your prices, the features that separate them, and the one plan you want people to pick. Hand those decisions to AI as a clear spec and it builds the page fast, toggle and all. Then sharpen the feel, check it on a phone, and publish it as a live link where the toggle still flips and the buttons still click. That is the difference between a pricing page people skim past and one they buy from.