pricing-page

Generate a self-contained HTML pricing page with inline CSS from a design system.

Updated Aug 27, 2026

Search Tags:#html #pricing #css #responsive #ui-design #pricing-page

Ready to run

npx skills add https://github.com/junainfinity/osmDesign --skill pricing-page-junainfinity

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pricing-page
Source: https://github.com/junainfinity/osmDesign/tree/main/skills/pricing-page
Command: npx skills add https://github.com/junainfinity/osmDesign --skill pricing-page-junainfinity

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pricing-page prototypes enable teams to ship pricing UI quickly by translating a brief into a publish-ready page.

Core Features & Use Cases

Hero section with page title, subhead, and optional monthly/annual toggle.
Plan cards for multiple tiers with names, pricing, positioning, features, and a primary CTA.
Comparison table that contrasts features across tiers and groups items into Core, Collaboration, and Support.
FAQ section with collapsible questions and answers.
Footer CTA to drive conversion and signups.

Quick Start

Open the design brief and generate a self-contained HTML document that uses the active DESIGN.md tokens to render a pricing page with hero, pricing plans, and a 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 responsive HTML pricing page from a design brief?▼

To generate a responsive HTML pricing page, provide a design brief to produce a self-contained HTML document with inline CSS, rendering hero, plan cards, comparison table, FAQ, and footer CTA sections.

What sections are included in a SaaS pricing page prototype?▼

A SaaS pricing page prototype includes a hero section with a monthly/annual toggle, multi-tier plan cards with feature lists, a grouped comparison table, a collapsible FAQ, and a footer CTA.

Can I use my existing design tokens to style the pricing page UI?▼

Yes, the pricing page UI strictly applies active design tokens defined in a DESIGN.md file, ensuring the generated HTML and inline CSS adhere to your established design system.

How do I create a feature comparison table for multiple pricing tiers?▼

The feature comparison table is generated by contrasting features across tier columns, grouping items into Core, Collaboration, and Support categories within the HTML document output.

Do I need external CSS frameworks to build this pricing page?▼

No external CSS frameworks are needed; the pricing page is output as a single self-contained HTML document with all styling handled by inline CSS for immediate deployment.

What is the best way to prototype a marketing landing page for pricing?▼

The best way to prototype a marketing landing page for pricing is translating a brief into a publish-ready HTML document, utilizing design system tokens to render structured pricing UI components.