skills.rest
junainfinity
junainfinityCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/junainfinity/osmDesign --skill pricing-page-junainfinity
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
concept2cureconcept2cure

design-tokens

Generate CSS variable and Tailwind design tokens for light and dark modes.

Community
Advanced
nexu-ionexu-io
84.7k

pricing-page

Generate a self-contained HTML pricing page with inline CSS and responsive grid.

Official
Intermediate
AtlasRoXAtlasRoX

Landing Page Skill

Generate a marketing landing page structure with Next.js and Tailwind CSS components.

Community
Intermediate
JordiNodeJSJordiNodeJS

component-development

Create accessible React 19 UI components with Shadcn UI and Tailwind CSS 4.

Community
Intermediate