Replit Agent prompt to build a pricing page
Pricing pages fail in the details: toggles that lose state, tables that break on phones, prices hardcoded in four places. This spec walks Replit Agent through a three-tier layout with a URL-persisted billing switch and a single server-side price object. You get a page where changing a price means editing one line.
Last updated
Build a pricing page for {{resource}} in this Repl as a route on the existing site, not a separate app.
Layout: three tiers side by side on desktop, stacked on mobile with the recommended tier first. Each card shows the plan name, price, a one-line summary, five feature bullets, and a CTA. The middle tier gets a subtle highlighted border and a small recommended tag, nothing animated.
Billing toggle: a monthly or annual switch above the cards. Annual shows the discounted monthly-equivalent price with billed-yearly fine print. The toggle updates prices in place with no route change, and the selected mode is written to the URL query so a shared link opens in the same state.
Comparison table: below the cards, a full feature matrix with a sticky first column on horizontal scroll for narrow screens, rows grouped by feature area with subheadings.
CTA wiring: the free tier goes to signup, paid tiers go to /checkout with the plan and billing period as query params, and the checkout route can be a stub page for now that echoes the chosen plan back. Keep all prices in one server-provided JSON object so edits happen in one place.
Edge cases: with JavaScript disabled the page still shows monthly prices and working CTA links. An unknown plan param on the stub shows a plain message and a link back.
Done when: toggling billing updates all three cards and the table together, a shared URL restores the toggle state, and the layout holds at phone width in the webview with no horizontal scroll.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a pricing page for users in this Repl as a route on the existing site, not a separate app. Layout: three tiers side by side on desktop, stacked on mobile with the recommended tier first. Each card shows the plan name, price, a one-line summary, five feature bullets, and a CTA. The middle tier gets a subtle highlighted border and a small recommended tag, nothing animated. Billing toggle: a monthly or annual switch above the cards. Annual shows the discounted monthly-equivalent price with billed-yearly fine print. The toggle updates prices in place with no route change, and the selected mode is written to the URL query so a shared link opens in the same state. Comparison table: below the cards, a full feature matrix with a sticky first column on horizontal scroll for narrow screens, rows grouped by feature area with subheadings. CTA wiring: the free tier goes to signup, paid tiers go to /checkout with the plan and billing period as query params, and the checkout route can be a stub page for now that echoes the chosen plan back. Keep all prices in one server-provided JSON object so edits happen in one place. Edge cases: with JavaScript disabled the page still shows monthly prices and working CTA links. An unknown plan param on the stub shows a plain message and a link back. Done when: toggling billing updates all three cards and the table together, a shared URL restores the toggle state, and the layout holds at phone width in the webview with no horizontal scroll.
Same task in other tools
Questions about this prompt
Where do the prices actually live?
In one JSON object served from the backend, which both the cards and the comparison table read. Editing a number there updates everything at once, and it later becomes the natural place to attach real plan ids from a payment provider.
I have four tiers plus an enterprise option, how do I adapt?
Either run four columns that collapse to a stack earlier, or keep three cards and add a slim enterprise contact banner beneath them. Keep the recommended tag on exactly one tier either way, two highlights cancel each other out.
The billing toggle resets when I share or refresh the page, why?
The mode is not being written to the URL query string. The prompt requires it, so ask the agent to sync the toggle to the query param and restore it on load, then retest with a pasted link.