Design patterns
How to design a SaaS pricing page with AI
Make plans comparable with clear units, billing periods and limits. Use a concrete pricing-page brief without inventing offers or conversion claims.
Make the buying decision legible
A useful SaaS pricing page explains who each plan suits, how the price is calculated and which limits affect the buyer. Begin with the real offer, not a three-card layout. If the product has two plans, there is no design reason to invent a third.
Write down the pricing unit: account, seat, project or usage. State the billing period beside the amount. When displaying an annual plan as a monthly equivalent, make the actual billing commitment clear. The interface must describe the offer the checkout will honor.
Build a comparison from meaningful differences
Consider an illustrative scheduling product with an individual plan and a team plan. The important distinction might be shared calendars and team administration, not a longer list of generic benefits. Put features in the same order across plans and explain terms that could be interpreted differently.
Group detailed limits below the short plan summary when they are too extensive for the first comparison. Do not bury a limit that changes whether the product is usable. A buyer should be able to determine which plan fits without opening several unrelated help articles.
Use references for structure, not for offers
Save pricing examples in Taste to study how they align amounts, explain limits or separate individual and team use cases. Annotate those choices. Another company’s “most popular” label, discount or guarantee is not evidence that your offer should make the same claim.
Give the coding agent a verified plan sheet. Leave unknown values as explicit work to resolve before publication. Never ask it to fill missing prices, trial conditions or customer counts with plausible-looking values. Review all purchase links against the correct checkout destination.
A prompt that preserves the real offer
Replace the plan sheet with your approved product information. This is a layout and content task, not a recommendation about what to charge.
Build a pricing page using only the attached approved plan names, amounts, billing periods, limits and checkout URLs. Inspect my Taste pricing references for comparison structure. Explain who each plan suits without inventing savings, popularity, testimonials or guarantees. Make annual billing and per-seat units explicit. Preserve price information at narrow widths. Flag missing commercial details instead of filling them in.
Review the path through checkout
Test monthly and annual choices, long feature descriptions and a narrow viewport. Confirm the selected plan and period survive the click into checkout. Check that a failed load cannot display an old or mismatched price.
Ask someone to explain what they would pay and what would happen at the end of a trial, if one exists. If their explanation differs from the actual offer, revise the content and hierarchy before testing decorative changes. Claims of improved conversion require measured evidence; a redesigned page alone does not establish an increase.