SaaS pricing with a monthly / yearly toggle
Three plans, a sliding billing toggle and prices that count to their new value when you switch.
Live — built from this exact promptOpen live demo
prompt.md
Course onlyBuild a single, self-contained index.html: a pricing section for a SaaS product with a monthly / yearly toggle that animates the prices. Product: [PRODUCT NAME] — [ONE-LINE DESCRIPTION] Plans (name, monthly price, yearly price per month, who it's for, 4 features each): [e.g. Starter $0/$0 — individuals; Team $24/$19 — small teams; Business $49/$39 — companies] Brand colors: [PRIMARY, e.g. indigo #4f46e5] and [SECONDARY, e.g. cyan #06b6d4] Technical rules
The full prompt comes with the course
All 55 prompts in the library are part of the Vibewrights course. Enrollment opens in January 2027 — join the waitlist to get the founding-member price.
See what's includedWhat you'll get
- ✓A segmented toggle with a sliding pill
- ✓Animated price changes between monthly and yearly
- ✓A 'Most popular' plan with a gradient border
- ✓Clean light design that stacks on mobile
How to use it
- 1Replace everything in [BRACKETS] with your own product and colors.
- 2Paste it into Lovable, Bolt or Claude Code and open the result in your browser.
- 3Compare it with the live demo, then ask for one change at a time.
— From the course
You'll build this end-to-end in Module 6, with a step-by-step video walkthrough and AI feedback on your project.
