跳到正文
cccskills
免费在 GitHub 公开

pricing-page

Plan or rewrite a SaaS pricing page so visitors can compare options and choose a plan. Produce a page outline, pricing table specifications, FAQs, search metadata, and a layout recommendation based on the offer and audience.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

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.

查看安装方法

适用场景

  • Planning a pricing page for a new SaaS product
  • Clarifying differences between pricing plans
  • Writing FAQs that address purchase concerns
  • Reviewing pricing page layout and search metadata

包含的文件(5)

  • SKILL.md5.7 KB
  • demo/index.html16.5 KB
  • demo/preview.jpg53.2 KB
  • demo/PROMPT.md1.8 KB
  • REFERENCES.md278 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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?

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Build woven fabric in Three.js with visible threads, realistic sheen, seams, and thick hems. The skill covers folds that preserve texture proportions, light passing through thin cloth, and variations in dye and wear.

中文简介正在准备中。当前显示英语简介。

  • Creating backlit curtains
  • Differentiating linen, silk, and wool
  • Adding hems and stitches for close-up views
MengTo/Skills69442026年10月18日 更新

Build falling leaves in Three.js and similar 3D scenes, with visible front, edge, and back views as they tumble and drift. Coordinate wind, scene depth, camera-aware recycling, and performance checks for a convincing autumn effect.

中文简介正在准备中。当前显示英语简介。

  • Adding falling autumn leaves to a 3D scene
  • Coordinating leaf tumble, sideways drift, and wind
  • Managing leaves around buildings and camera movement
MengTo/Skills69442026年10月18日 更新

Add coordinated seasonal transitions to an existing 3D scene. Blend foliage, lighting, sky, ground, snow, and particles from one shared state while preserving camera controls and interactions, so the same place remains recognizable throughout spring, summer, fall, and winter.

中文简介正在准备中。当前显示英语简介。

  • Add a four-season selector to an outdoor 3D scene
  • Show seasonal changes in an architectural walkthrough
  • Coordinate foliage, sunlight, sky, and ground appearance
MengTo/Skills69442026年10月18日 更新

Create or integrate detailed 3D models with smooth outlines and believable edges for close-up views. Prepare lower-detail versions for distant viewing, prioritize loading, and measure rendering costs in the actual scene.

中文简介正在准备中。当前显示英语简介。

  • Creating a detailed 3D model for close-up views
  • Replacing visibly faceted curves with smoother geometry
  • Preparing detailed architectural assets for rendering
MengTo/Skills69442026年10月18日 更新

Prepare detailed 3D materials that remain clear in close-up views. The skill guides texture resolution, physically based material maps, surface mapping, filtering, and progressive loading while checking download size and GPU memory use.

中文简介正在准备中。当前显示英语简介。

  • Prepare wood, stone, and fabric materials for close-up views
  • Fix texture seams, grain direction, and normal map orientation
  • Preserve floor and foliage detail at oblique or distant views
MengTo/Skills69442026年10月18日 更新

Create realistic metal surfaces in Three.js by combining structured reflections, studio lighting, scratches, fingerprints, and beveled edges. Includes polished, brushed, and aged finishes for objects such as tools, rings, and metal product parts.

中文简介正在准备中。当前显示英语简介。

  • Fixing metal that looks like gray plastic
  • Creating polished or brushed metal finishes
  • Adding patina and worn edges
MengTo/Skills69442026年10月18日 更新

查看 MengTo 的全部技能

报告此技能的问题