Skip to content
Get packs

Pricing Page Template

Generates a three-tier SaaS pricing page with a feature comparison table and FAQ

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

This skill gives an AI agent a layout recipe for a standard software-as-a-service pricing page. When asked, the agent produces a single HTML page with a monthly/annual toggle, three plan cards (Free, Pro, Enterprise) with the middle plan highlighted as most popular, a feature comparison table with checkmarks and dashes, an expandable FAQ, and a closing call-to-action. An example HTML file in the folder shows the expected look. The skill is a template and style guide, not a tool that changes anything on its own.

Great for

  • Founders or product teams mocking up a pricing page before building it
  • Front-end developers who want a starting HTML structure for tiered plans
  • Designers exploring how a three-tier comparison can be laid out

Skip it if

  • Live pricing that must match real billing data: the template is static and invents plan names and prices, which could mislead visitors if published unchecked
  • Pages that need legal or compliance wording for subscriptions, since the skill contains no such text

Try asking

  • “Create a pricing page for my note-taking app with Free, Pro and Enterprise plans”
  • “Make a three-tier pricing page with a monthly/annual switch and a feature comparison table”
  • “Build an HTML pricing page with an FAQ section and a bottom call-to-action”
Step-by-step guide: how to use Pricing Page TemplateInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    pricing-page.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

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

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name your product and give real plan names, prices and features in the request so the output is not generic placeholder text
  • Ask for a desktop width of about 1440px, which matches the skill's suggested aspect hint
  • Review and replace any sample prices and FAQ answers before publishing

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.