Windsurf prompt to build a pricing page
A pricing page whose numbers live in one typed config, so marketing edits never touch markup. The prompt drives Windsurf to reuse your existing Button and Card components, wire a billing toggle with correct math in both modes, and collapse the comparison table cleanly on small screens.
Last updated
Build a pricing page with three tiers defined in one pricing.ts config: name, monthly price, annual price, feature list, CTA target, and a recommended flag. Render a monthly-annual toggle that recomputes prices without reload, style the recommended tier from the flag rather than hardcoded markup, and include a comparison table that collapses to stacked cards below 640px. Add a small FAQ accordion using button elements with aria-expanded. Format currency through Intl.NumberFormat; no hardcoded symbols. Empty feature arrays hide the list instead of rendering blank bullets. Check whether the repo already exports Button or Card components and reuse them. Start the preview from the Windsurf terminal, verify toggle math in both billing modes, and list any new design tokens you introduced.
Same task in other tools
Questions about this prompt
Why force all prices through a config file?
Because any code generator, Cascade included, will otherwise inline prices in three places and they will drift. One pricing.ts export means the toggle, the cards, and the table cannot disagree.
How do I adapt this for usage-based pricing?
Replace the monthly and annual fields with a unit price and an estimator input, and drop the toggle. Keep the recommended flag; it still steers attention on a metered page.
The annual toggle shows wrong numbers. Where do I look?
Check whether annual prices are stored as totals or per-month equivalents; mixing the two is the standard bug. The prompt has Cascade verify both billing modes in the preview, so rerun that check after any config edit.