skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

pricing-page

Generates a self-contained HTML pricing page with plan tiers, comparison table, and FAQ.

Updated May 20, 2026
Search Tags:#html#landing page#design system#prototype#pricing page#comparison table#subscription tiers
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill pricing-page-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pricing-page
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/pricing-page
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill pricing-page-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing a pricing page from scratch requires deciding tier structure, layout, comparison tables, and FAQ content while staying consistent with an existing design system. This Skill produces a complete single-screen pricing page as one self-contained HTML document that follows the active DESIGN.md tokens. ## Core Features & Use Cases - Tier classification: Picks a 2, 3, or 4-tier structure based on the brief (e.g., Free/Pro/Team or Individual/Business). - Full page sections: Generates a hero with billing toggle, plan cards with a highlighted recommended tier, a feature comparison table with sticky header, a collapsible FAQ using native <details> elements, and a footer CTA. - Design system compliance: Uses only colors, typography, and component patterns defined in the active DESIGN.md, with data-od-id markers on tiers and table rows. - Use Case: Given a brief asking for a SaaS subscription page, the Skill emits one <artifact> HTML document with plausible prices, responsive grid layout, and no JavaScript dependencies. ## Quick Start Ask the agent to create a pricing page for your product with three subscription tiers and a plan comparison table.

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 plan tiers in HTML?▼

Provide a brief mentioning pricing, plans, or subscription tiers, and the Skill emits one self-contained HTML document. It includes a hero, plan cards per tier, a comparison table, and an FAQ, all styled from the active DESIGN.md tokens.

How many pricing tiers does the page support?▼

The Skill classifies the brief and picks 2, 3, or 4 tiers. Three tiers is the default, four is used for scale or enterprise-plus briefs, and two for individual-versus-business positioning.

Does the pricing page require JavaScript for the FAQ or toggle?▼

No JavaScript is required. The FAQ uses native HTML `<details>` and `<summary>` elements for collapsible Q&A items, keeping the output a single static HTML document.

Is the generated pricing page responsive on mobile screens?▼

Yes. The comparison table must render cleanly at 1024px and stack readably below 768px, and the plan-card grid collapses to a single column on narrow viewports, as shown in the included example.html.

What are the limitations of this pricing page generator?▼

It produces a static prototype-mode HTML page only, with no real checkout, billing logic, or backend integration. It also requires an active DESIGN.md, since all colors, typography, and components must come from that design system.

Related Skills

Explore More Design & Creative Skills→
Intension-usIntension-us

design-consultation

Generate a DESIGN.md documenting typography, color, spacing, layout, and motion guidelines.

Official
Advanced
domhhvdomhhv
3

clerk-billing

Manage Clerk subscription plans, pricing tables, checkout flows, and billing webhooks.

Community
Advanced
Maccio-huangMaccio-huang

saas-landing

Generates a single-page SaaS landing page with hero, features, pricing, and CTA sections.

Community
Intermediate
PaddleHQPaddleHQ
4

paddle-pricing-pages

Render country-localized SaaS pricing with Paddle.js PricePreview API in Next.js.

Official
Intermediate