AutoGineer
Generated banner for Pricing Page
Generated logo for Pricing Page

Pricing Page

Meng ToCommunityCreated by Meng To

  • Skill
  • Content generator
  • Business and productivity
  • MIT
  • No issues found
Download ZIP

From the author

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.
— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to building SaaS pricing pages that drive conversions by focusing on clarity, value communication, and objection handling. It covers the entire lifecycle of a pricing page, from initial offer definition and audience analysis to layout selection, copywriting formulas, and SEO/AEO optimization. The guide emphasizes reducing cognitive load through simplified plan structures, outcome-focused feature descriptions, and strategic use of social proof and risk-reduction elements.

What it does

  • Defines the core structure and essential sections for a high-converting pricing page.
  • Provides layout patterns for different business models, including classic tiers, usage-based sliders, and enterprise paths.
  • Offers copywriting templates for headlines, plan descriptions, and call-to-action buttons.
  • Includes a checklist for UI elements, mobile responsiveness, and SEO/AEO best practices.
  • Identifies common pitfalls like analysis paralysis and confusing value metrics.
  • Outlines the necessary information to gather before starting the design process.

When to use it

  • When designing a new pricing page for a SaaS product.
  • When auditing or rewriting an existing pricing page that suffers from low conversion rates.
  • When determining how to present complex pricing tiers or usage-based models to users.
  • When preparing content for search engines and AI answer engines regarding product pricing.

Advantages

  • Reduces user uncertainty by focusing on outcomes rather than just technical features.
  • Provides actionable templates for copy and layout to speed up the design process.
  • Ensures critical business information like security, compliance, and risk-reduction is addressed.
  • Helps balance self-serve and sales-led motions effectively.
  • Optimizes for both human readability and search engine discoverability.

Usage examples

“Help me design a pricing page for my new project management tool. We have three tiers and want to focus on teams.”
The agent will request details on your audience, value metrics, and objections, then provide a page outline, pricing table specification, FAQ list, and layout recommendation.
“My current pricing page has high traffic but low signups. Can you audit it?”
The agent will compare your current page against the provided checklists and common pitfalls to identify areas for improvement in structure, copy, or layout.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/mengto/pricing-page/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip pricing-page.zip -d .agents/skills

Documentation by Meng To

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?

Files

demo/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:,">
  <title>Pricing Page · Skill Demo</title>
  <style>:root{--bg:#ece9e2;--panel:rgba(255,255,255,.68);--panelStrong:#f8f6f1;--ink:#171917;--muted:#686b66;--line:rgba(23,25,23,.16);--accent:hsl(246 92% 68%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{min-width:320px;margin:0;background:radial-gradient(circle at var(--mx,76%) var(--my,16%),color-mix(in srgb,var(--accent) 16%,transparent),transparent 34%),var(--bg);color:var(--ink)}button,a{font:inherit;color:inherit}button{border:1px solid var(--line);border-radius:999px;padding:11px 15px;background:var(--panel);cursor:pointer}button:hover,button:focus-visible{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 42%,transparent);outline-offset:3px}.shell{width:min(1280px,calc(100% - 40px));min-height:100svh;margin:auto;padding:22px 0 40px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 30px;border-bottom:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.brand{display:flex;gap:9px;align-items:center}.brand i{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 24px var(--accent)}.topbar a{text-decoration:none}.intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:44px;align-items:end;padding:clamp(54px,9vw,116px) 0 42px}.intro small{display:block;margin-bottom:22px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.intro h1{max-width:11ch;margin:0;font-size:clamp(48px,8vw,112px);font-weight:580;letter-spacing:-.075em;line-height:.86}.intro p{max-width:48ch;margin:0;color:var(--muted);font-size:clamp(14px,1.2vw,18px);line-height:1.6}.showcase{position:relative;min-height:470px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--panel);isolation:isolate}.showcaseHeader{position:absolute;z-index:5;top:18px;right:18px;left:18px;display:flex;justify-content:space-between;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;pointer-events:none}.layoutStudy{display:grid;grid-template-columns:1.15fr .85fr;min-height:470px}.layoutHero{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,5vw,70px);border-right:1px solid var(--line)}.layoutHero>span,.kicker{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.layoutHero h2,.landing h2{max-width:9ch;margin:18px 0;font-size:clamp(42px,6vw,84px);line-height:.9;letter-spacing:-.065em}.layoutHero p,.landing p{max-width:38ch;color:var(--muted);line-height:1.55}.layoutCards{display:grid;grid-template-rows:repeat(3,1fr)}.layoutCards article{display:flex;align-items:end;justify-content:space-between;padding:26px;border-bottom:1px solid var(--line)}.layoutCards article:last-child{border:0}.layoutCards b{color:var(--accent);font-size:34px}.layoutCards span{text-transform:uppercase;font-size:10px;letter-spacing:.15em}.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;min-height:470px;background:var(--line)}.pricing article{display:flex;flex-direction:column;padding:80px 28px 28px;background:var(--panelStrong)}.pricing article.featured{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 20%,var(--panelStrong)),var(--panelStrong))}.pricing p{font-size:11px;letter-spacing:.13em;text-transform:uppercase}.pricing strong{margin:24px 0 8px;font-size:56px;letter-spacing:-.06em}.pricing span{color:var(--muted)}.pricing button{margin-top:auto}.landing{display:flex;min-height:470px;flex-direction:column;justify-content:center;padding:clamp(40px,8vw,100px);background:radial-gradient(circle at 75% 36%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 24%)}.landing .actions{display:flex;gap:10px;margin-top:24px}.landing .actions button:first-child{color:var(--bg);background:var(--ink)}.landing .proof{display:flex;gap:28px;margin-top:54px;color:var(--muted);font-size:11px}.marquee{display:flex;min-height:470px;align-items:center;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}.marqueeTrack{display:flex;width:max-content;animation:marquee 18s linear infinite}.marqueeTrack span{min-width:220px;padding:34px;border:1px solid var(--line);font-size:22px;font-weight:700;letter-spacing:-.04em;text-align:center}.iconGrid,.contactSheet{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;min-height:470px;background:var(--line)}.iconGrid article,.contactSheet article{position:relative;padding:70px 28px 28px;background:var(--panelStrong)}.number{position:absolute;top:22px;right:22px;color:var(--accent);font-size:11px}.glyph{display:grid;width:110px;height:110px;place-items:center;margin:30px auto;border:1px solid var(--line);border-radius:34px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 20%,transparent),transparent);font-size:48px}.iconGrid h3{text-align:center}.contactSheet .asset{height:280px;margin-bottom:22px;border-radius:2px;background-size:cover}.assetOne{background:radial-gradient(circle at 70% 30%,#d9f7ff,transparent 20%),linear-gradient(145deg,#203962,#8db3d6 48%,#d7d5c8)}.assetTwo{background:radial-gradient(circle at 50% 28%,#f1c6a2 0 10%,transparent 11%),linear-gradient(120deg,#1b2738,#754c5a 52%,#e1a77f)}.assetThree{background:repeating-radial-gradient(circle at 30% 65%,#c8b8ff 0 9px,#4c4274 10px 18px,#151629 19px 29px)}.contactSheet b,.contactSheet span{display:block}.contactSheet span{margin-top:8px;color:var(--muted);font-size:11px}.surfaceStudy{display:grid;grid-template-columns:1.4fr .6fr;grid-template-rows:1fr auto;gap:18px;min-height:470px;padding:70px 24px 24px}.surfaceStudy article{border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 12%,var(--panelStrong)),var(--panelStrong))}.surfaceHero{display:flex;grid-row:1/3;flex-direction:column;justify-content:flex-end;padding:42px}.surfaceHero strong{max-width:8ch;margin-top:20px;font-size:clamp(40px,5vw,72px);line-height:.92;letter-spacing:-.06em}.surfaceHero span,.surfaceCard span{color:var(--muted);font-size:10px;letter-spacing:.14em;text-transform:uppercase}.surfaceCard{display:flex;flex-direction:column;padding:26px}.surfaceCard b{margin:auto 0 4px;font-size:56px}.surfaceCard small{color:var(--muted)}.surfaceControl{align-self:end}.motionStage{display:flex;min-height:470px;flex-direction:column;justify-content:center;padding:70px clamp(28px,7vw,90px)}.maskLine{overflow:hidden;margin:0;font-size:clamp(44px,7vw,98px);font-weight:600;letter-spacing:-.075em;line-height:.84}.maskLine span{display:block;transform:translateY(110%);animation:wordIn .8s cubic-bezier(.16,1,.3,1) forwards}.maskLine:nth-child(2) span{animation-delay:.12s}.maskLine:nth-child(3) span{animation-delay:.24s}.accentLine{color:var(--accent)}.timeline{display:flex;gap:8px;margin:42px 0 20px}.timeline i{width:58px;height:3px;background:var(--line);transform-origin:left;animation:grow .8s .42s both}.timeline i:nth-child(2){animation-delay:.54s}.timeline i:nth-child(3){animation-delay:.66s}.timeline i:nth-child(4){animation-delay:.78s}.replay{width:max-content}.visualization{position:relative;min-height:470px}.visualization canvas{position:absolute;inset:0;width:100%;height:100%}.vizMeta{position:absolute;right:28px;bottom:24px;left:28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;color:var(--muted);font-size:10px;letter-spacing:.14em;text-transform:uppercase}.vizMeta strong{color:var(--ink);font-size:48px;letter-spacing:-.06em}.vizMeta span:last-child{text-align:right}.simulation{position:relative;min-height:470px}.goo{position:absolute;inset:0;width:100%;height:100%}.goo circle{fill:var(--accent)}.orbA{animation:orbA 4.4s ease-in-out infinite alternate}.orbB{animation:orbB 5.1s ease-in-out infinite alternate}.reset{position:absolute;right:24px;bottom:24px}.demoNote{display:flex;justify-content:space-between;gap:24px;padding:20px 2px;color:var(--muted);font-size:11px;line-height:1.5}.demoNote a{color:var(--ink)}
.pricingWrap{min-height:470px;padding-top:52px}.billingBar{display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:8px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.billingBar .billingToggle{padding:8px 12px;background:var(--panelStrong);font-size:10px}.pricingWrap .pricing{min-height:360px}.pricingWrap .pricing article{padding:42px 28px 28px}.vizMeta button{justify-self:end;padding:8px 11px;font-size:9px;letter-spacing:.1em;text-transform:uppercase}

@keyframes marquee{to{transform:translateX(-50%)}}@keyframes wordIn{to{transform:translateY(0)}}@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes orbA{to{transform:translate(-120px,70px)}}@keyframes orbB{to{transform:translate(80px,120px)}}@media(max-width:760px){.intro{grid-template-columns:1fr;padding-top:60px}.intro h1{font-size:54px}.layoutStudy,.pricing,.iconGrid,.contactSheet,.surfaceStudy{grid-template-columns:1fr}.layoutHero{border-right:0;border-bottom:1px solid var(--line)}.pricing article{min-height:320px}.surfaceHero{grid-row:auto}.showcase{min-height:540px}.topbar span:last-child{display:none}.demoNote{flex-direction:column}.landing .proof{flex-direction:column;gap:8px}.vizMeta{grid-template-columns:1fr auto}.vizMeta span:last-child{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marqueeTrack,.maskLine span,.timeline i,.orbA,.orbB{animation:none;transform:none}}</style>
</head>
<body data-kind="pricing" data-skill="pricing-page">
  <main class="shell">
    <nav class="topbar" aria-label="Demo navigation"><a class="brand" href="#"><i></i>Pricing Page</a><span>Standalone skill reference · 01</span></nav>
    <header class="intro">
      <div><small>web design / reference demo</small><h1>Pricing Page</h1></div>
      <p>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.</p>
    </header>
    <section class="showcase" aria-label="Pricing Page demonstration">
      <div class="showcaseHeader"><span>Live example</span><span>pricing</span></div>
<div class="pricingWrap">
  <div class="billingBar"><span>Simple plans · cancel anytime</span><button class="billingToggle" type="button" aria-pressed="false">Show annual pricing</button></div>
  <div class="pricing">
    <article><p>Starter</p><strong data-monthly="$18" data-annual="$15">$18</strong><span>For focused prototypes</span><button type="button">Choose starter</button></article>
    <article class="featured"><p>Studio · Recommended</p><strong data-monthly="$42" data-annual="$35">$42</strong><span>For teams shipping weekly</span><button type="button">Start with Studio</button></article>
    <article><p>Scale</p><strong data-monthly="$96" data-annual="$80">$96</strong><span>For multi-product systems</span><button type="button">Talk to us</button></article>
  </div>
</div>
    </section>
    <footer class="demoNote"><span>Open <strong>PROMPT.md</strong> for the exact recreation and remix prompts.</span><a href="PROMPT.md">Read prompt →</a></footer>
  </main>
  <script>const reduced=matchMedia("(prefers-reduced-motion: reduce)").matches;addEventListener("pointermove",event=>{document.body.style.setProperty("--mx",event.clientX+"px");document.body.style.setProperty("--my",event.clientY+"px")},{passive:true});const billing=document.querySelector(".billingToggle");if(billing)billing.addEventListener("click",()=>{const annual=billing.getAttribute("aria-pressed")!=="true";billing.setAttribute("aria-pressed",String(annual));billing.textContent=annual?"Show monthly pricing":"Show annual pricing";document.querySelectorAll(".pricing strong").forEach(price=>price.textContent=annual?price.dataset.annual:price.dataset.monthly)});const replay=document.querySelector(".replay");if(replay)replay.addEventListener("click",()=>{document.querySelectorAll(".maskLine span,.timeline i").forEach(node=>{node.style.animation="none";node.offsetHeight;node.style.animation=""})});const reset=document.querySelector(".reset");if(reset)reset.addEventListener("click",()=>document.querySelectorAll(".orbA,.orbB").forEach(node=>{node.style.animation="none";node.offsetHeight;node.style.animation=""}));const canvas=document.querySelector("canvas");if(canvas&&!reduced){const context=canvas.getContext("2d");let width=0,height=0,frame=0,time=0;const mode="field";const bodies=Array.from({length:14},(_,i)=>({x:80+(i%7)*92,y:40+Math.floor(i/7)*70,vx:(i%3-1)*.7,vy:0,r:12+(i%4)*5}));const resetBodies=()=>bodies.forEach((body,i)=>{body.x=40+(i%7)*Math.max(32,(width-80)/6);body.y=35+Math.floor(i/7)*58;body.vx=(i%3-1)*.7;body.vy=0});const resetBodiesButton=document.querySelector(".resetBodies");if(resetBodiesButton)resetBodiesButton.addEventListener("click",resetBodies);const resize=()=>{const rect=canvas.getBoundingClientRect();const ratio=Math.min(devicePixelRatio||1,2);width=rect.width;height=rect.height;canvas.width=Math.round(width*ratio);canvas.height=Math.round(height*ratio);context.setTransform(ratio,0,0,ratio,0,0)};const draw=()=>{frame=requestAnimationFrame(draw);time+=.008;context.clearRect(0,0,width,height);const accent=getComputedStyle(document.documentElement).getPropertyValue("--accent").trim();if(mode==="globe"){const radius=Math.min(width,height)*.29;const cx=width*.5,cy=height*.47;context.fillStyle=accent;for(let i=0;i<360;i++){const phi=Math.acos(1-2*(i+.5)/360);const theta=Math.PI*(1+Math.sqrt(5))*i+time;const x=Math.sin(phi)*Math.cos(theta);const y=Math.cos(phi);const z=Math.sin(phi)*Math.sin(theta);const scale=(z+1.7)/2.7;context.globalAlpha=.16+.74*scale;context.beginPath();context.arc(cx+x*radius,cy+y*radius,Math.max(.7,2.2*scale),0,Math.PI*2);context.fill()}context.globalAlpha=.16;context.strokeStyle=accent;context.beginPath();context.ellipse(cx,cy+radius*.18,radius*1.34,radius*.34,time*.4,0,Math.PI*2);context.stroke()}else if(mode==="object"){const size=Math.min(width,height)*.24,cx=width*.5,cy=height*.48;const vertices=[[-1,-1,-1],[1,-1,-1],[1,1,-1],[-1,1,-1],[-1,-1,1],[1,-1,1],[1,1,1],[-1,1,1]];const edges=[[0,1],[1,2],[2,3],[3,0],[4,5],[5,6],[6,7],[7,4],[0,4],[1,5],[2,6],[3,7]];const points=vertices.map(([x,y,z])=>{const a=time*1.1,b=time*.73;const x1=x*Math.cos(a)-z*Math.sin(a),z1=x*Math.sin(a)+z*Math.cos(a),y1=y*Math.cos(b)-z1*Math.sin(b),z2=y*Math.sin(b)+z1*Math.cos(b),p=3.8/(z2+5);return{x:cx+x1*size*p,y:cy+y1*size*p,z:z2,p}});context.strokeStyle=accent;context.lineWidth=1.4;context.shadowColor=accent;context.shadowBlur=12;for(const [a,b] of edges){context.globalAlpha=.25+.45*((points[a].z+points[b].z+4)/8);context.beginPath();context.moveTo(points[a].x,points[a].y);context.lineTo(points[b].x,points[b].y);context.stroke()}context.fillStyle=accent;for(const point of points){context.globalAlpha=.55+.35*(point.z+2)/4;context.beginPath();context.arc(point.x,point.y,3.2*point.p,0,Math.PI*2);context.fill()}context.shadowBlur=0}else if(mode==="matter"){context.fillStyle=accent;for(const body of bodies){body.vy+=.16;body.x+=body.vx;body.y+=body.vy;if(body.x<body.r||body.x>width-body.r){body.vx*=-.94;body.x=Math.max(body.r,Math.min(width-body.r,body.x))}if(body.y>height-body.r-30){body.y=height-body.r-30;body.vy*=-.78}context.globalAlpha=.28+.45*(body.r/32);context.beginPath();context.arc(body.x,body.y,body.r,0,Math.PI*2);context.fill()}context.globalAlpha=.22;context.fillRect(0,height-31,width,1)}else{context.strokeStyle=accent;context.lineWidth=1;for(let i=0;i<18;i++){const y=(i/17)*height;context.globalAlpha=.08+.12*Math.sin(time+i*.4);context.beginPath();for(let x=0;x<=width;x+=12){const wave=Math.sin(x*.012+i*.54+time*3)*18*Math.sin(i/17*Math.PI);context.lineTo(x,y+wave)}context.stroke()}context.globalAlpha=.65;const x=width*(.52+.16*Math.sin(time*.6));const gradient=context.createLinearGradient(x,0,x+2,0);gradient.addColorStop(0,"transparent");gradient.addColorStop(.5,"white");gradient.addColorStop(1,"transparent");context.fillStyle=gradient;context.fillRect(x,0,3,height)}};resize();new ResizeObserver(resize).observe(canvas);const visibility=()=>{if(document.hidden){cancelAnimationFrame(frame);frame=0}else if(!frame)draw()};document.addEventListener("visibilitychange",visibility);draw();}</script>
</body>
</html>

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/pricing-page · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download pricing-page.zip