pricing-page — Claude Code skill: build a SaaS pricing page
Walks an agent through designing or rewriting a SaaS pricing page: structure, plan design, copy, FAQ, and SEO/AEO markup.
npx skills add MengTo/Skills --skill pricing-page -a claude-codeWhat pricing-page does
The skill kicks in when you design or rewrite a pricing page. Before writing anything, the agent asks for what it needs: what you sell, who it is for, the value metric, plan limits, and what pushes people to upgrade. Then it proposes a structure — outcome headline, monthly/annual toggle, plan table, comparison, objection handling, final call to action.
Inside are checklists for the pricing table UI, headline and plan description templates, rules for CTA verbs, and a list of common pitfalls. Layout choice gets its own section: classic three cards, a value metric slider, a two-column split by audience, or an Enterprise block. There is also a SEO and AEO part covering page title, meta description, a clean /pricing URL, and plain Q/A FAQs that answer engines can pick up.
The output comes in five pieces: a section-by-section page outline, a pricing table spec with plans and limits, 6–12 FAQ pairs, title and meta with an FAQ schema suggestion, and a layout recommendation with reasoning. Give it only “make a pricing page” and it will ask about trial versus free plan, actual numbers, the metric, and your top objections. The skill knows nothing about your product, so skipping those answers gets you a generic skeleton — worth gathering the inputs first.
What it helps with
- draft a pricing page structure from scratch
- rewrite plan descriptions so they read as outcomes
- pick a layout for three tiers, a slider, or two audiences
- write an FAQ that answers objections before checkout
- prepare a title and meta description for
/pricing
Example prompts for the agent
- build a pricing page for our SaaS with three plans and annual savings
- rewrite the plan section — right now it's just a feature list with no context
- draft 8 FAQ questions for the pricing page plus a meta description
How to install pricing-page
1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill pricing-page -a claude-code2Manually: put the files in place
~/.claude/skills/pricing-page/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/pricing-page/
1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill pricing-page -a codex2Manually: put the files in place
.agents/skills/pricing-page/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill pricing-page -a cursor2Manually: put the files in place
.cursor/skills/pricing-page/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install MengTo/Skills pricing-page2Manually: put the files in place
.github/skills/pricing-page/SKILL.md1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill pricing-page -a gemini-cli2Platform CLI
gemini skills install https://github.com/MengTo/Skills --path agent-skills/web-design/pricing-pageManually: put the files in place
.devin/skills/pricing-page/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add MengTo/Skills --skill pricing-page -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about pricing-page
How do I install pricing-page in Claude?
Run npx skills add MengTo/Skills --skill pricing-page -a claude-code. The skill file lands at ~/.claude/skills/pricing-page/SKILL.md.
What does pricing-page do?
It helps design or rewrite a pricing page: section structure, plan design, copy, FAQ, SEO and AEO, and layout choice. It ships with checklists, templates, and a rundown of common pitfalls.
What will the skill ask before it starts?
Your product and audience, the value metric, plan names and prices, limits, the top three reasons people don't buy, and proof such as testimonials. Without those inputs you get a generic outline.
Source text
SKILL.md · MIT
---
name: pricing-page
description: Use when designing or rewriting a high-converting SaaS pricing page (structure, plan design, copywriting, SEO/AEO, FAQs, layout patterns, experiments). Includes checklists, templates, and common pitfalls.
---
# Pricing Page (High‑Conversion) — Web Design Skill
Design a pricing page that helps visitors **choose** and feel good about it.
Your job is not to “show prices.”
Your job is to **reduce uncertainty**.
## Before you design/write
Gather (ask if missing):
### 1) Offer + audience
- What are you selling? (category)
- Who is it for? (ICP + primary use case)
- What’s the main value metric? (seat, usage, project, revenue, etc.)
### 2) Plans
- Plan names + prices (monthly/annual)
- Limits per plan (the 3–6 limits that matter)
- What’s the upgrade trigger? (what causes people to move up?)
### 3) Objections + risk
- Top 3 reasons people don’t buy today
- Security/compliance needs? (SOC2, GDPR, etc.)
- Can you offer: free trial, free plan, money-back, demo?
### 4) Proof
- Testimonials, logos, results, case studies, metrics
### 5) Traffic context
- Are visitors coming from: homepage, feature pages, ads, comparison pages?
- What do they already know?
---
## Core structure (what a pricing page should have)
### Above the fold (must)
- **Clear value headline** (what outcome, for who)
- **Monthly/Annual toggle** with annual savings callout
- **3‑plan pricing table** (most common) or 2‑plan (simple product)
- **Primary CTA** per plan (consistent verbs)
### Below the fold (high leverage)
- **Plan comparison** (feature matrix or “what you get” bullets)
- **FAQ** (objection handling)
- **Social proof** near decision points
- **Security / compliance / procurement** section (if B2B)
- **Final CTA** + contact sales
---
## Layout types (pick one)
### A) Classic 3‑card
Best when:
- you have 3 natural tiers (Starter / Pro / Business)
- pricing is simple
Rules:
- 1 plan labeled **Recommended**
- show “most popular” without yelling
### B) Value metric slider
Best when:
- pricing scales with usage (seats, events, credits)
Rules:
- keep math obvious
- keep a safe default (median customer)
### C) “Pick your path” (two columns)
Best when:
- different audiences (Individuals vs Teams)
Rules:
- separate by persona first, then price
### D) Enterprise last mile
Best when:
- you have a self-serve path + sales-led path
Rules:
- Enterprise should read like **procurement reassurance**
---
## High‑conversion strategies (practical)
### 1) Make the decision easy
- 3 plans max (unless you have a strong reason)
- One recommended plan
- Bullets describe **outcomes**, not internal features
### 2) Anchor value (without being shady)
- Annual toggle with “Save X%”
- Show “Starting at” only if your pricing is truly variable
- Avoid surprise fees
### 3) Reduce risk
Choose at least one:
- Free trial
- Free plan
- Money‑back guarantee
- “Talk to sales” with a clear promise (response time, demo)
### 4) Handle objections before they bounce
Most effective FAQ topics:
- “Can I cancel anytime?”
- “What happens if I hit limits?”
- “Do you offer discounts?”
- “Is this for freelancers/teams?”
- “Security / data / compliance”
### 5) Provide a comparison that’s readable
- Avoid huge spreadsheets
- Group by: Core, Collaboration, Admin/Security, Support
- Highlight what changes at each tier
---
## Copywriting (templates)
### Headlines (choose a formula)
- “{Outcome} for {audience}—without {pain}”
- “Plans that scale from {small} to {big}”
- “Start small. Upgrade when {trigger}.”
### Plan description (2 lines)
- Who it’s for
- What it unlocks
Example:
- **Pro** — For designers shipping weekly. Better components, faster iteration.
### CTA buttons
Rules:
- Use verbs that match the motion:
- “Start free trial”
- “Buy Pro”
- “Contact sales”
- Keep CTAs consistent across plans (don’t mix “Get started” / “Try now” / “Sign up”).
### Feature bullets (write like outcomes)
- ❌ “Unlimited projects”
- ✅ “Ship unlimited client sites without extra fees”
---
## Pricing table checklist (UI)
- Visible monthly/annual toggle
- “Save X%” callout on annual
- Recommended plan styling (subtle)
- Key limits visible (3–6 max)
- Included items visible (3–6 max)
- Clear next step under each plan (trial/buy/contact)
- Link: “Compare plans” (scrolls to matrix)
- Mobile: table becomes stacked cards (not a horizontal scroll nightmare)
---
## SEO + AEO (AI answers) checklist
### SEO basics
- Title: “Pricing — {Product}” + outcome keyword
- Meta description: 1 sentence on value + 1 sentence on pricing starting point
- Clean URL: `/pricing`
- Internal links from:
- homepage CTA
- feature pages
- comparison pages
### AEO (answer engines)
- Add an FAQ section that answers:
- refund policy
- trial length
- cancellation
- what counts as a seat/usage
- enterprise procurement
- Write FAQs in **plain Q/A** format.
- Optional: FAQ schema (if your stack supports it).
---
## Common pitfalls
- Too many plans (analysis paralysis)
- Features listed with no context (why it matters)
- Pricing hidden behind “Contact sales” for everything
- Switching value metric mid-page (confusing)
- Over-designed table that harms readability
---
## Output format (when generating a pricing page)
Return:
1) **Page outline** (sections + order)
2) **Pricing table spec** (plans, bullets, limits, CTA)
3) **FAQ list** (6–12 Q/A)
4) **SEO/AEO** (title + meta + FAQ schema suggestion)
5) **Layout recommendation** (A/B/C/D + why)
---
## Quick questions (if user gives you only “make a pricing page”)
- Free plan or trial?
- Monthly/annual pricing numbers?
- Value metric?
- Recommended plan (which one and why)?
- Top 3 objections?
© MengTo · MIT · MengTo/Skills