pricing-page

Name: pricing-page
Availability: InStock
Author: piercingxx

Generate a standalone HTML pricing page with plan tiers, comparison table, and FAQ.

1|Updated Jul 9, 2026

Search Tags:#pricing #marketing copy #subscription #pricing page #landing page design #comparison table #plan tiers

Ready to run

npx skills add https://github.com/PiercingXX/xx-stack --skill pricing-page-piercingxx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pricing-page
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/runtime/skills/design/pricing-page
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill pricing-page-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

It removes the effort of designing and writing a complete pricing/plan comparison page by providing a ready-to-render, design-system-aware HTML layout.

Core Features & Use Cases

Design-system compliant output: Builds the pricing page using the active DESIGN.md tokens for colors, typography, and components.
Tiered plan generation: Automatically structures 2-, 3-, or 4-tier layouts based on the brief (e.g., individual vs. teams vs. enterprise).
Conversion-focused sections: Produces a hero, tier cards with recommended emphasis, a comparison table, an FAQ using HTML details/summary, and a footer CTA with plausible plan details.

Quick Start

Use the pricing-page skill when your brief asks for "pricing", "plans", "subscription tiers", or a "compare plans" page, and request: "Generate a pricing page for Acme with Free/Pro/Team tiers and a short FAQ."

Frequently Asked Questions about pricing-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate a pricing page with subscription tiers and a comparison table?▼

To generate a pricing page with subscription tiers, provide a brief specifying your plan names and desired features, and the skill outputs a standalone HTML document containing tier cards, a comparison table, and an FAQ section.

Can I create a 4-tier subscription plan layout for a marketing website?▼

Yes, you can create a 4-tier subscription plan layout by defining the individual, teams, and enterprise tiers in your brief, which generates a conversion-focused pricing page with recommended plan emphasis.

Does the generated pricing page HTML require external CSS dependencies?▼

No, the generated pricing page HTML does not require external CSS dependencies because it renders as a self-contained document with inline CSS that adheres to the active DESIGN.md tokens.

How does the pricing page handle design system tokens for typography and colors?▼

The pricing page handles design system tokens by reading and following the active DESIGN.md file, applying its defined colors, typography, and component styles directly into the inline CSS of the output HTML.

What is the best way to structure an FAQ section within a generated pricing page?▼

The best way to structure an FAQ section within a generated pricing page is using native HTML details and summary tags, which creates an accessible, interactive accordion without relying on external JavaScript dependencies.

Are there limitations when using this approach to build a plan comparison page?▼

A limitation of building a plan comparison page this way is that the output is restricted to a standalone one-screen HTML layout designed specifically for desktop preview scenarios and subscription sales contexts.