Cursor prompt to build a pricing page
A pricing page where the plans live in one typed config and the markup is just a renderer, so the next price change is a one-line diff. In Cursor you can watch the agent derive both the tier cards and the comparison table from that single source, then check the toggle swaps prices without layout shift.
Last updated
Build a pricing page at /pricing driven entirely by one config file, src/pricing.config.ts, so plan changes never touch markup. The config defines three tiers with name, monthly and annual prices, a feature list, and a call-to-action href, plus one tier flagged as highlighted. Render tier cards from that config with a monthly and annual toggle that swaps prices without layout shift, reserve width for the longest price string. Below the cards, generate a feature comparison table from the same config, with an accessible caption and proper th scope attributes. The highlighted tier gets its visual treatment from existing theme tokens in this repo, not new colors. No modal, no currency switcher, no fake countdown. Verify by editing one price in the config and confirming both the card and the table update, run the production build, and list the files you created.
Same task in other tools
Questions about this prompt
How do the plan buttons connect to real checkout?
Each tier's call-to-action href lives in the config, so point it at your signup route or checkout endpoint and pass the plan id as a query param. Changing where a button goes never requires touching the components.
The monthly and annual toggle still shifts the layout. What did the agent miss?
The width reservation on the price element. Ask for tabular-nums and a min-width sized to the longest price string, and check the highlighted card too, since its larger type is where the jump shows first.
Can I add an enterprise tier with no listed price?
Extend the config type with an optional priceLabel field and add a fourth entry that uses it. Because the cards and the comparison table both render from the same config, that one edit updates both, which is the point of the structure.