# Pricing Page

> Pricing page design, plan comparison, feature matrices, pricing psychology, and upgrade flows.

- Skill: `dragoon0x/pricing-page` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/pricing-page`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/pricing-page/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/pricing-page

---


# 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
1. **Anchoring:** Put the expensive plan first (left) so others feel reasonable
2. **Decoy:** The middle plan should be the best value (slightly more than basic, much less than premium)
3. **Social proof:** "Most Popular" badge on the plan you want people to choose
4. **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