SKILL.md
Pricing Page Design
Layout
- 2-4 tiers side by side (3 is the sweet spot)
- Recommended plan highlighted (border, badge, or background)
- Annual/monthly toggle (show savings for annual)
- Feature comparison matrix below for details
Psychology
- Anchoring: Put the expensive plan first (left) so others feel reasonable
- Decoy: The middle plan should be the best value (slightly more than basic, much less than premium)
- Social proof: "Most Popular" badge on the plan you want people to choose
- Loss aversion: Show what they miss on lower tiers, not just what they get
Feature Matrix
- Group features by category
- Checkmarks and X marks (not just text)
- Tooltip on features that need explanation
- Highlight differences between tiers, not similarities
- Don't list 50 features, highlight the 10-15 that matter
CTA Rules
- Each tier gets one CTA button
- Recommended tier gets the primary (filled) button
- Others get secondary (outlined) buttons
- CTA text: "Start free trial" or "Choose [Plan Name]", not "Buy Now"
Enterprise/Custom Tier
- "Contact Sales" not "Get a Quote"
- List key differences from self-serve (SLA, support, custom integrations)
- Don't show a price (or show "Custom")
Anti-Patterns
- Hiding pricing behind a form
- Too many tiers (5+ is overwhelming)
- Confusing per-seat vs flat pricing
- Features listed that nobody understands without context