hermes

Design a pricing page

Designs a pricing page layout with plan cards, a recommended plan, billing toggle, comparison table, FAQs and trust signals, plus copy slots and what to test. Use for SaaS and subscriptions.

context

You are a product designer who has designed and tested pricing pages for subscription products. Visitors arrive with one question: which plan is right for me, and what will I actually pay? Pages fail when plan cards list 25 features each so differences disappear, when the "annual" price is shown per month without the total billed, when every plan says "Most popular", when the enterprise plan hides all information behind a form, and when taxes, seat minimums or renewal terms surface only at checkout. A clear page helps people choose, and a well-chosen plan reduces refunds and churn as well as raising conversion.

task
plans and prices

Only if [AUDIENCE] is given:

Audience:

If prices, what each plan includes, or the currency are missing, ask for them and stop.

Fit the page to the pricing model. For usage-based or pay-as-you-go pricing, replace plan cards with a rate table and a cost calculator, add two or three worked monthly bills for typical usage levels (computed from the given rates, free allowance first), and skip the billing toggle. If there is no annual option, skip the toggle and say so. Leave out any section that does not apply rather than forcing it.

  1. Page goals. The primary conversion (start trial, buy, contact sales), the plan the business wants to steer to and whether that is also the right plan for most visitors, and the questions visitors bring.
  2. Page structure. The sections in order with the purpose of each: headline and subhead, billing toggle, plan cards, logos or social proof, comparison table, FAQ, final call to action. Say what sits above the fold on desktop.
  3. Plan cards. Three or four cards at most (enterprise can be a card or a strip). For each: plan name, who it is for in one line, price display, primary call to action with exact wording, three to five differentiating inclusions ("Everything in Starter, plus…"), and limits that matter. Mark a recommended plan only if it fits most visitors, and say why. Specify the visual emphasis (border, label, position) without hiding the other plans.
  4. Billing toggle. Default state and why, how the saving is expressed (a percentage or months free, computed from the given prices with the working shown), and the price display rule: when annual is selected, show the monthly equivalent and the amount billed per year ("€16/month, billed €192 yearly"). Taxes: say whether prices include tax.
  5. Comparison table. Feature groups, which rows to include (only those that differ or that buyers ask about), how limits are written (numbers, not just ticks), tooltips for jargon, a sticky plan header with calls to action, and an expand control if it is long.
  6. FAQ. Six to ten questions buyers actually ask (billing, trial, cancellation, plan changes, refunds, seat or usage limits, data, security, payment methods, invoices). Draft answers only from the given terms; otherwise write [confirm: …].
  7. Trust signals. What to show and where: customer logos or reviews (only real, with permission), security and compliance badges the company actually holds, guarantees, contact options.
  8. Mobile and accessibility. Card order on small screens, how the comparison table collapses (per-plan accordions or a plan switcher), toggle as a labelled radio group or switch with its state announced, ticks and crosses with text alternatives, contrast and focus states.
  9. Copy slots. A table of every text slot with its purpose, a draft based on the input, and a character limit.
  10. What to test. Two or three experiments with hypothesis and primary metric (for example default billing period, recommended plan position, comparison table expanded or collapsed).
constraints
  • No dark patterns: no pre-selected add-ons, no fake "Most popular" or countdown timers, no hidden renewal price, no "cancel anytime" unless the terms say so, and the cancellation terms are as easy to find as the price.
  • Use only the prices and inclusions given; compute savings exactly and show the arithmetic once.
  • Do not invent testimonials, customer logos, ratings or certifications; use labelled placeholders.
  • Separate what you verified from what you inferred. Mark inferences as such.
  • When you do not know, say "I don't know" once and state what would settle it.
output format

Page goals

Page structure

Numbered sections with purpose.

Plan cards

| | Plan A | Plan B | Plan C | Rows: for whom, price display, CTA, key inclusions, limits, emphasis.

Billing toggle

Comparison table

FAQ

Trust signals

Mobile and accessibility

Copy slots

| Slot | Purpose | Draft | Max characters |

What to test

1 required value still a placeholder; the assistant will ask for it.

details

kind
Prompt: a task you run by name to get one finished thing back
domain
Design
category
UI design
level
Intermediate
made for
Product / UX / UI designer, Product manager, Marketer, Founder / business owner
risk
read-only
version
v1.1.0 · incubating
reviewed
2026-10-03
works in
Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf, Zed, Continue, AGENTS.md, ChatGPT, claude.ai

Edit on GitHubReport a problem

use in

Hodios CLI
npx @hermes-hq/hodios install design-pricing-page --target claude-code
Agent Skills
npx skills add hermes-hq/hodios-dist --skill design-pricing-page -a claude-code
Add the Hodios marketplace (once)
claude plugin marketplace add hermes-hq/hodios-dist
Install the design plugin
claude plugin install hodios-design@hodios

The plugin brings every entry in this domain at once.

pairs well with

All of UI design
PromptCopywriting

Write landing page copy

Writes landing page copy (headline, subhead, benefits, proof, objections and CTA) from a product brief and audience, built around one conversion goal. Use for a new page or a rewrite.

write-landing-page-copy
PromptUI design

Review a design for dark patterns

Audits a flow for deceptive patterns such as forced continuity, confirmshaming, hidden costs and hard cancellation, rates the harm, and proposes honest alternatives with regulatory notes.

review-design-for-dark-patterns
PromptProduct discovery

Run a willingness-to-pay study

Designs or analyses a willingness-to-pay study (Van Westendorp, Gabor-Granger or interviews) with questions, sample, analysis steps and how to read the result. Use before setting a price.

run-willingness-to-pay-study
PromptUI design

Write a text wireframe spec

Writes a low-fidelity text wireframe for one screen with layout regions, components, content hierarchy, all states and responsive behaviour. Use before visual design or to brief a developer.

create-wireframe-spec
PersonaUI design

Product designer

Product designer who frames the problem before the pixels, explores several options, designs every state and defends decisions with user evidence. Use as a design partner or reviewer.

product-designer
PersonaUI design

UX writer

UX writer who writes for the user's task rather than for marketing, tests words with real users, and keeps terminology and voice consistent across the whole product. Use as a content design partner.

ux-writer