What this prompt does
This prompt generates a complete, conversion-focused SaaS pricing page — not just the visual layout, but the copy, feature matrix, FAQ, and responsive code in one pass. It works because the template enforces the constraints that kill conversions by default: no more than four tiers, no feature lists beyond twelve items, no hiding prices behind a "Contact Sales" wall for SMB audiences. Every anti-pattern is explicitly ruled out in the system instruction, so the AI cannot drift into common SaaS mistakes.
The recommended-tier mechanic is baked directly into the output spec. The prompt doesn't just ask for "highlighted" — it asks for a distinct border, a badge, and a larger card, which forces the AI to generate real differentiating markup rather than a colour change on an otherwise identical card. The billing toggle output includes a savings percentage, which is the exact psychological hook that nudges annual commitment without requiring the user to do math.
The enterprise CTA section is intentionally kept as a tasteful addition rather than a fourth tier, which respects the paradox-of-choice rule and keeps the page scannable for buyers who self-serve.
When to use it
- Launching a new SaaS product and building the pricing page from scratch in Tailwind, React, or Vue.
- Auditing an existing pricing page where conversion rates have stalled and you need a full structural rebuild.
- Running an A/B test and needing a challenger variant that follows a different psychological pricing pattern.
- Building a landing page for a product that just added a new tier and needs the comparison table re-architected.
- Handing a junior developer or designer a brief that includes code, copy, and UX rationale in one deliverable.
Example output
For [product_name] = Notely, [tiers] = Starter / Pro / Team, [framework] = Tailwind + Alpine.js:
<!-- Billing Toggle -->
<div x-data="{ annual: false }">
<button @click="annual = !annual">
Monthly / Annual
<span x-show="annual" class="bg-green-500 text-white text-xs px-2 py-0.5 rounded-full">Save 20%</span>
</button>
<!-- Recommended: Pro tier -->
<div class="border-2 border-indigo-500 rounded-2xl scale-105 relative">
<span class="absolute -top-3 left-1/2 -translate-x-1/2 bg-indigo-500 text-white text-xs px-3 py-1 rounded-full">Most Popular</span>
<h3 class="font-bold text-xl">Pro</h3>
<p x-text="annual ? '$12/mo' : '$16/mo'" class="text-4xl font-bold"></p>
</div>
</div>
Pro tips
- Set
[features_per_tier]to 8 or fewer. The template allows up to 12, but I've found 7–8 creates faster scannability. More than that and buyers start comparing notes instead of clicking. - Use
[conversion_goal]to steer copy tone. "Upgrade from free to paid" gets loss-aversion language; "enterprise upsell from mid-tier" gets ROI-and-scale language. The AI tends to adjust the CTA and FAQ accordingly, though specifying your goal explicitly in the prompt always sharpens the output. - Pair with a landing page prompt after. The pricing page this generates assumes buyers arrive pre-warmed. If you're running cold traffic, generate the feature hero section separately and link it in the social proof strip.
- Specify
[billing_options]precisely. "Monthly and annual" gives you a two-state toggle. "Monthly, annual, and 2-year" forces a third state that complicates Alpine/React state logic — useful to know before you hand off to a developer. - Request a dark-mode variant explicitly if your brand calls for it. The template defaults to neutral base / primary highlight, which works on white. Dark pricing pages need inverted contrast logic on the recommended tier border — the prompt won't infer this unless you add it to
[framework].
