# Pricing Page Design

> Pricing page layout, plan comparison, feature matrices, and pricing tier presentation.

- Skill: `dragoon0x/pricing-page-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/pricing-page-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/pricing-page-design/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-design

---


# Pricing Page Design

## Pricing Page Principles

1. **3 tiers is optimal.** Free/Starter, Pro, Enterprise. More than 4 creates decision paralysis.
2. **Highlight the recommended tier.** Visually distinct (larger card, "Most Popular" badge, brand color border).
3. **Lead with benefits, not features.** "Build unlimited projects" not "Unlimited project slots."
4. **Show annual savings.** "Save 20% with annual billing" with monthly/annual toggle.
5. **Price anchoring.** Show the most expensive plan first (right side) to make the middle feel reasonable.

## Feature Comparison
- Checkmarks for included features. X or dash for excluded.
- Group features by category.
- Sticky header with plan names on scroll.
- Highlight differences between tiers, not similarities.

## Enterprise Tier
- "Contact Sales" instead of a price.
- List 3-4 key differentiators (SSO, SLA, dedicated support).
- Don't make it feel inaccessible. Frame as "Custom plan for your team."