Pricing Page

Name: Pricing Page
Author: nexu-io

nexu-io/open-design

249 installs
83.7k repo stars
Updated August 5, 2026
nexu-io/open-design

pricing-page is a design agent skill that builds conversion-oriented pricing pages with tier comparison, feature matrices, FAQs, and CTAs for developers testing SaaS packaging and willingness to pay.

About

pricing-page is a nexu-io/open-design skill for drafting high-conversion pricing pages before or during packaging experiments. The skill structures tier comparison tables, feature matrices, FAQ sections, and primary CTAs so developers can test how plans are presented and understood. It emphasizes clarity between free, pro, and enterprise tiers and surfaces common objection-handling copy developers often postpone. Reach for pricing-page when you have defined plans but need a polished page layout and comparison copy for a landing site or in-app upgrade screen. Outputs include section outlines, tier labels, feature checklists, and FAQ drafts ready for implementation in React, Next.js, or static site generators.

tier comparison
feature matrices
pricing CTAs
plan framing
conversion layout

Pricing Page by the numbers

249 all-time installs (skills.sh)
+1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #875 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/nexu-io/open-design --skill pricing-page

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/pricing-page.svg)](https://skillselion.com/skills/nexu-io/open-design/pricing-page)

Installs	249
repo stars	★ 83.7k
Last updated	August 5, 2026
Repository	nexu-io/open-design ↗

How do you design a SaaS pricing comparison page?

Design conversion-oriented pricing pages with tier comparison, feature matrices, FAQs, and CTAs to test packaging and willingness to pay.

Who is it for?

Developers validating SaaS packaging who need a structured pricing page with tier comparison and FAQ copy before frontend implementation.

Skip if: Teams still defining unit economics or payment backend integration without settled plan tiers or feature boundaries.

When should I use this skill?

The user asks to design a pricing page, tier comparison table, feature matrix, pricing FAQ, or packaging layout to test willingness to pay.

What you get

Pricing page layout, tier comparison matrix, feature checklist, FAQ section, and CTA copy

pricing page outline
tier comparison matrix
FAQ copy draft

Files

SKILL.mdMarkdownGitHub ↗

Pricing Page Skill

Produce a single-screen pricing page that respects the active DESIGN.md.

Workflow

1. Read the active DESIGN.md (injected above). Use only its colors, type tokens, and component patterns. 2. Classify the product from the brief and pick a tier shape:

3-tier (most common): Free / Pro / Team or Starter / Growth / Enterprise.
4-tier when the brief says "scale" or "enterprise plus".
2-tier when it says "individual / business" or "personal / pro".

3. Sections, in order: 1. Hero — page title (e.g. "Pricing"), one-line subhead, optional monthly/annual toggle. 2. Plan cards — one card per tier. Each card: tier name, price (use the display font + larger scale for the number), 1-line positioning, 4–6 bullet features, primary CTA. Mark the recommended tier with the DS accent border or a small badge. 3. Comparison table — feature rows × tier columns, ✓ / — / value cells. Group features into 2–3 logical sections (Core, Collaboration, Support, Security…). Sticky header. 4. FAQ — 4–6 collapsible Q&A items. Use <details><summary> for the collapse — no JS. 5. Footer CTA — single line + button, accent band sparingly. 4. Write one self-contained HTML document:

<!doctype html> through </html>, CSS in one inline <style>.
CSS Grid for the plan-card row; CSS Grid for the comparison table.
data-od-id on each tier card and each table row.

5. Money rendering: use the display font for the big number, body for the currency and "/mo" — sizes per DESIGN.md scale. 6. Self-check:

Prices are plausible for the product (not "$X / month").
Accent is on the recommended tier and one CTA only.
Comparison table renders cleanly at 1024px and stacks readably below

768px (rotate column headers or scroll-x).

No fake feature names — every row reads as something a real product

would actually offer.

Output contract

Emit between <artifact> tags:

<artifact identifier="pricing-slug" type="text/html" title="Pricing — Product Name">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Pricing — Filebase</title>
  <style>
    :root {
      --bg: #fafaf9; --fg: #1c1b1a; --muted: #6b6964; --border: #e6e4e0;
      --accent: #c96442; --surface: #ffffff;
    }
    * { box-sizing: border-box; }
    body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 -apple-system, system-ui, sans-serif; }
    .wrap { max-width: 1080px; margin: 0 auto; padding: 64px 32px 96px; }
    header { text-align: center; margin-bottom: 64px; }
    header h1 { font-size: clamp(40px, 5vw, 60px); letter-spacing: -0.02em; margin: 0 0 14px; }
    header p { font-size: 18px; color: var(--muted); margin: 0 auto; max-width: 50ch; }
    .toggle { display: inline-flex; margin-top: 28px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); overflow: hidden; }
    .toggle button { font: inherit; cursor: pointer; padding: 8px 18px; border: none; background: transparent; color: var(--muted); }
    .toggle button.active { background: var(--fg); color: white; }
    .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 64px; }
    @media (max-width: 800px) { .tiers { grid-template-columns: 1fr; } }
    .tier { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 36px 32px; }
    .tier.featured { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(201,100,66,0.08); }
    .tier h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: -0.01em; }
    .tier .desc { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
    .tier .price { font-size: 48px; letter-spacing: -0.025em; line-height: 1; margin-bottom: 6px; }
    .tier .price small { font-size: 14px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
    .tier ul { list-style: none; padding: 0; margin: 24px 0 28px; font-size: 14px; }
    .tier ul li { padding: 8px 0; color: var(--fg); border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-start; }
    .tier ul li::before { content: '✓'; color: var(--accent); flex-shrink: 0; }
    .tier ul li:first-child { border-top: none; }
    button.cta { font: inherit; cursor: pointer; padding: 12px 18px; border-radius: 8px; width: 100%; font-weight: 500; }
    .cta-primary { background: var(--accent); color: white; border: 1px solid var(--accent); }
    .cta-secondary { background: transparent; color: var(--fg); border: 1px solid var(--border); }
    .featured-pill { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: white; margin-bottom: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
    .compare { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
    .compare h3 { padding: 24px 28px; margin: 0; font-size: 16px; border-bottom: 1px solid var(--border); }
    table { width: 100%; border-collapse: collapse; font-size: 14px; }
    th, td { padding: 12px 18px; text-align: left; border-top: 1px solid var(--border); }
    th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; background: var(--bg); }
    td.has { color: var(--accent); font-weight: 500; }
    td.no { color: var(--muted); }
    .faq { margin-top: 56px; }
    .faq h3 { font-size: 22px; letter-spacing: -0.01em; margin-bottom: 24px; }
    details { padding: 16px 0; border-top: 1px solid var(--border); }
    details summary { font-weight: 500; cursor: pointer; }
    details p { margin: 10px 0 0; color: var(--muted); }
  </style>
</head>
<body>
  <div class="wrap">
    <header data-od-id="header">
      <h1>One flat rate. No throttling.</h1>
      <p>Start free. Pick a paid tier the day you outgrow it. Switch yearly billing for two months off.</p>
      <div class="toggle">
        <button class="active">Monthly</button>
        <button>Yearly · save 17%</button>
      </div>
    </header>

    <section class="tiers" data-od-id="tiers">
      <div class="tier">
        <h2>Solo</h2>
        <p class="desc">For individuals.</p>
        <div class="price">$8 <small>/ month</small></div>
        <ul>
          <li>1 TB storage</li>
          <li>Block-level sync</li>
          <li>2 devices</li>
          <li>Email support</li>
        </ul>
        <button class="cta cta-secondary">Choose Solo</button>
      </div>
      <div class="tier featured">
        <span class="featured-pill">Recommended</span>
        <h2>Team</h2>
        <p class="desc">For teams up to 50 people.</p>
        <div class="price">$14 <small>/ seat / month</small></div>
        <ul>
          <li>5 TB pooled storage</li>
          <li>Shared folders & granular roles</li>
          <li>Unlimited devices</li>
          <li>Audit log + usage analytics</li>
          <li>Priority support</li>
        </ul>
        <button class="cta cta-primary">Choose Team</button>
      </div>
      <div class="tier">
        <h2>Enterprise</h2>
        <p class="desc">SSO, on-prem keys, 99.99% SLA.</p>
        <div class="price">Custom</div>
        <ul>
          <li>Unlimited storage</li>
          <li>SAML / SCIM provisioning</li>
          <li>On-prem encryption keys</li>
          <li>Dedicated CSM</li>
        </ul>
        <button class="cta cta-secondary">Talk to sales</button>
      </div>
    </section>

    <section class="compare" data-od-id="compare">
      <h3>Plan comparison</h3>
      <table>
        <thead><tr><th>Feature</th><th>Solo</th><th>Team</th><th>Enterprise</th></tr></thead>
        <tbody>
          <tr><td>Block-level sync</td><td class="has">✓</td><td class="has">✓</td><td class="has">✓</td></tr>
          <tr><td>End-to-end encryption</td><td class="has">✓</td><td class="has">✓</td><td class="has">✓</td></tr>
          <tr><td>Shared folders</td><td class="no">—</td><td class="has">✓</td><td class="has">✓</td></tr>
          <tr><td>SAML / SCIM</td><td class="no">—</td><td class="no">—</td><td class="has">✓</td></tr>
          <tr><td>Audit log</td><td class="no">—</td><td class="has">✓</td><td class="has">✓</td></tr>
          <tr><td>SLA</td><td class="no">—</td><td>99.9%</td><td>99.99%</td></tr>
          <tr><td>Support</td><td>Email</td><td>Priority</td><td>Dedicated CSM</td></tr>
        </tbody>
      </table>
    </section>

    <section class="faq" data-od-id="faq">
      <h3>Common questions</h3>
      <details><summary>Can I change tiers mid-month?</summary><p>Yes. Switching upward charges a prorated difference; downgrades take effect at the next billing cycle.</p></details>
      <details><summary>Is there a free tier?</summary><p>14-day free trial on every paid tier. No credit card required.</p></details>
      <details><summary>How does seat-based billing work for Team?</summary><p>You pay per active seat per month. Inactive seats automatically free up after 30 days; we'll prorate the credit.</p></details>
    </section>
  </div>
</body>
</html>

Related skills

Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k

Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k

Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k

Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476

Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k

Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k

FAQ

What sections does pricing-page include?

pricing-page designs tier comparison tables, feature matrices, FAQ blocks, and CTAs for conversion-focused pricing screens. The skill targets SaaS packaging tests before full implementation.

When should developers use pricing-page?

pricing-page fits validate-stage packaging work when plan tiers exist but the pricing screen needs structured comparison copy and layout guidance before frontend coding begins.

Design & UI/UXpricing