pricing-page

Generate a pricing page prototype from an active DESIGN.md file.

1|Updated May 8, 2026
One-click install
npx skills add https://github.com/MyHeavenDyf/UXAI --skill pricing-page-myheavendyf
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pricing-page
Source: https://github.com/MyHeavenDyf/UXAI/tree/main/packages/app/octoapp/templates/pricing-page
Command: npx skills add https://github.com/MyHeavenDyf/UXAI --skill pricing-page-myheavendyf

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the creation of a pricing page, offering a quick and efficient solution for designing plans, features, and comparisons.

Core Features & Use Cases

  • Prototype Generation: Automatically produce a single-screen pricing page with predefined structures.
  • Design System Integration: Ensures consistency with the active DESIGN.md.
  • Customization: Select from different tier shapes and configure sections to meet brief requirements.
  • Use Case: Ideal for UX/UI designers and product managers who need to present pricing options and feature comparisons for a service or product.

Quick Start

Use the pricing-page skill to generate a pricing page for a new SaaS product, adhering to the latest design system standards.

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 pricing page prototype for subscription plans?

To create a pricing page prototype for subscription plans, you need an active DESIGN.md file to provide styling and component guidance. The system automatically generates a single-screen visual representation featuring plan cards, comparison tables, and FAQs based on that design system.

What is needed to generate a pricing page UI with a design system?

Generating a pricing page UI requires an active DESIGN.md file for styling and component guidance. This ensures the prototype maintains consistency with your existing design system while structuring subscription plans, features, and comparisons.

Can I customize the tier shapes and sections of my pricing page design?

Yes, you can customize the pricing page design by selecting from different tier shapes and configuring sections to meet your brief requirements. This allows you to tailor the subscription plan cards and comparison tables for your specific SaaS product.

Does the pricing page generator work without a predefined design system?

No, the pricing page generator requires an active DESIGN.md file to function properly. This design system integration is necessary to ensure the generated prototype adheres to your established styling and component standards.

What is the best way to present subscription plan comparisons for a SaaS product?

The best way to present subscription plan comparisons is by generating a structured pricing page prototype with plan cards and comparison tables. This approach ensures visual consistency with your design system while clearly outlining features for each tier.