skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

pricing-page

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

84.7k|9.9k|Updated Apr 28, 2026
Search Tags:#pricing#plans#ui-design#design-system#subscription#web-design#pricing-page
One-click install
npx skills add https://github.com/nexu-io/open-design --skill pricing-page-nexu-io
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pricing-page
Source: https://github.com/nexu-io/open-design/tree/main/skills/pricing-page
Command: npx skills add https://github.com/nexu-io/open-design --skill pricing-page-nexu-io

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

A standalone capability to generate a polished pricing page when a brief asks for pricing, plans, subscription tiers, or a compare plans page.

Core Features & Use Cases

  • Hero and layout that presents a compelling price proposition consistent with the active design system.
  • Plan cards & comparison: three to four tiers with prices, features, and a clear primary CTA; a feature comparison table; a sticky header for easy scanning.
  • Workflow and reuse: reads the active DESIGN.md, applies color, typography, layout, and component patterns to ensure visual consistency across teams.
  • Use Case: SaaS products wanting to showcase pricing quickly while maintaining design-system conformance.

Quick Start

Provide a brief product context and design-system guidance; the skill will output a self-contained HTML pricing page.

Frequently Asked Questions about pricing-page

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

FAQPage Schema
How do I create a single-screen pricing page for a SaaS product?▼

Generating a pricing page requires brief product context and active design-system guidance. The output is a self-contained HTML document with inline CSS, a responsive grid, and accessible markup for desktop web pages.

How does a design system ensure visual consistency across pricing plan cards?▼

Visual consistency is maintained by reading the active DESIGN.md file and applying its defined color, typography, layout, and component patterns to the generated plan cards and comparison tables.

Can I generate a subscription tier comparison table without external dependencies?▼

Yes, generating a subscription tier comparison requires no external dependencies. It produces a self-contained HTML document with inline CSS, requiring no external libraries or frameworks to display the pricing tiers.

What is the best way to build a responsive subscription tier layout?▼

The best way to build a responsive subscription tier layout is automating a single-screen pricing page. It creates three to four plan tiers with prices, features, a primary CTA, and a sticky header within a responsive grid.

Does the pricing page generator support feature comparison tables with sticky headers?▼

Yes, the pricing page generator supports feature comparison tables with sticky headers for easy scanning. It produces three to four subscription tiers with prices, features, and a clear primary CTA.

Related Skills

Explore More Design & Creative Skills→
pipixia-labspipixia-labs
38

pricing-page

Generate a responsive pricing page HTML document from a design brief.

Official
Intermediate
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Static Web Development

Build accessible, responsive static websites with semantic HTML and CSS.

Official
Intermediate
MyHeavenDyfMyHeavenDyf

saas-landing

Generate a single-page SaaS landing page HTML prototype with hero, features, social proof, and pricing.

Community
Advanced
Cam10001110101Cam10001110101
7

generative-art

Generate seed-driven generative art as self-contained HTML with p5.js.

Community
Intermediate