Claude Code prompt to build a pricing page
Pricing pages get rebuilt every time marketing changes a number, unless the numbers live in config. This prompt makes Claude Code read your existing page shell before writing anything, isolate all amounts in one file, and back the page with a render test it runs in your terminal, so future price edits are one-line diffs.
Last updated
Build a pricing page for {{resource}} in this repo, matching the existing layout conventions; read a current page first and reuse its shell. Content: three tiers with a monthly and annual toggle, annual showing the per-month equivalent, a feature comparison table with row groups, and one FAQ block below the fold. Pricing data lives in a single pricing.ts or equivalent config file, no amounts hardcoded in markup, so a price change is a one-line diff. The toggle must work without layout shift and default to annual. Mark the recommended tier with a data attribute, not just styling, so tests can target it. Add a test that renders each tier from config and fails if a tier is missing a price or call to action. Run the test and the production build, and list the files changed with a one-line reason for each.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a pricing page for users in this repo, matching the existing layout conventions; read a current page first and reuse its shell. Content: three tiers with a monthly and annual toggle, annual showing the per-month equivalent, a feature comparison table with row groups, and one FAQ block below the fold. Pricing data lives in a single pricing.ts or equivalent config file, no amounts hardcoded in markup, so a price change is a one-line diff. The toggle must work without layout shift and default to annual. Mark the recommended tier with a data attribute, not just styling, so tests can target it. Add a test that renders each tier from config and fails if a tier is missing a price or call to action. Run the test and the production build, and list the files changed with a one-line reason for each.
Same task in other tools
Questions about this prompt
We have four tiers plus an enterprise contact option. Does the structure hold?
Yes, describe your tiers in the prompt and they become entries in the config file. The render test iterates config rather than markup, so it covers a fourth tier or a contact-style tier with no price automatically.
What is the data attribute on the recommended tier actually for?
Class-based selectors die in restyles. The attribute gives tests, and later analytics, a hook that survives any design pass, and it costs one line to add.
Annual prices show rounding drift after toggling. What happened?
The component is computing annual amounts from monthly at render time. Precompute both figures in the config file so the toggle only swaps values; ask the agent to move any arithmetic it left in the markup back into config.