pricing-page-design

name	pricing-page-design
description	Design high-conversion SaaS pricing pages with plan structures, comparison patterns, conversion strategies, copy templates, SEO/AEO checklists, and layout types (3-card, slider, persona split, enterprise).
metadata	{"openclaw":{"emoji":"💰","source":"https://github.com/MengTo/Skills"}}

Pricing Page (High‑Conversion) — Web Design Skill

Before you design/write

1. Offer + audience: What problem does the product solve? Who is the buyer?
2. Plans: How many tiers? What differentiates them? Usage-based or flat?
3. Objections + risk: What stops someone from signing up? (price, trust, complexity)
4. Proof: Logos, testimonials, case studies, metrics available?
5. Traffic context: Organic? Paid? Referral? Affects messaging urgency.

Core structure

Above the fold (must)

• Headline: value proposition, not "Pricing"
• Subheadline: who it's for + key benefit
• Plan cards: name, price, CTA, 3–5 key features
• Highlighted plan: visual emphasis on recommended tier
• Toggle: monthly / annual (show savings)

Below the fold (high leverage)

• Feature comparison table: collapsed by default on mobile
• FAQ section: address top 3-5 objections
• Social proof: logos, testimonials, metrics
• Enterprise CTA: "Contact sales" for custom needs

Layout types (pick one)

• A) Classic 3‑card: Most common, works for most SaaS
• B) Value metric slider: Usage-based pricing (API calls, seats)
• C) Pick your path (two columns): Two distinct buyer personas
• D) Enterprise last mile: Self-serve + enterprise side-by-side

High‑conversion strategies

1. Make the decision easy: Highlight one plan, reduce choice paralysis
2. Anchor value: Show what they get, not just cost
3. Reduce risk: Free trial, money-back guarantee, no CC required
4. Handle objections before bounce: FAQ, comparison, social proof
5. Readable comparison: Avoid 20-row feature tables; group by category

Copywriting templates

• Headlines: "Simple pricing for [audience]", "Start free, scale as you grow"
• Plan descriptions: 2 lines max, benefit-focused
• CTA buttons: "Start free trial", "Get started", "Talk to sales"
• Feature bullets: Write like outcomes, not features

Tips for AI Agents

• Always ask about number of tiers and differentiators before designing.
• Confirm toggle (monthly/annual) and whether enterprise tier exists.
• Default to the classic 3-card layout unless told otherwise.
• Include FAQ schema hints for SEO when generating HTML.