Mmcp.market

pricing-page skill

by nexu-io·nexu-io/open-design·98k stars·Apache-2.0

A standalone pricing page — header, plan tiers, feature comparison table, and an FAQ. Use when the brief asks for "pricing", "plans", "subscription tiers", or a "compare plans" page.

A100/100content scan

Is the pricing-page skill safe?

Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.

No findings.

Install the pricing-page skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design
mkdir -p ~/.claude/skills
cp -r /tmp/open-design/design-templates/pricing-page ~/.claude/skills/pricing-page
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

Pricing Page Skill

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

Workflow

tokens, and component patterns.

  1. Read the active DESIGN.md (injected above). Use only its colors, type
  1. 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".

monthly/annual toggle.

  1. Sections, in order:
  2. Hero — page title (e.g. "Pricing"), one-line subhead, optional

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.

  1. Plan cards — one card per tier. Each card: tier name, price (use the

Group features into 2–3 logical sections (Core, Collaboration, Support, Security…). Sticky header.

  1. Comparison table — feature rows × tier columns, ✓ / — / value cells.

collapse — no JS.

  1. FAQ — 4–6 collapsible Q&A items. Use for the
  1. Footer CTA — single line + button, accent band sparingly.
  2. Write one self-contained HTML document:
  • <!doctype html> through , CSS in one inline .
  • CSS Grid for the plan-card row; CSS Grid for the comparison table.
  • data-od-id on each tier card and each table row.

currency and "/mo" — sizes per DESIGN.md scale.

  1. Money rendering: use the display font for the big number, body for the
  1. Self-check:

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

  • 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

would actually offer.

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

Output contract

Emit between tags:

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

One sentence before the artifact, nothing after.

More skills from nexu-io/open-design

  • Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
  • Acard-twitterTwitter quote or data card designed to pair with a post.
  • Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
  • Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.

All agent skills → · MCP servers