skills.rest
pipixia-labs
pipixia-labsOFFICIAL
Explore all skills by this author →
GitHub

pricing-page

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

38|3|Updated Apr 8, 2026
Search Tags:#ui#pricing#plans#ux#web-design#pricing-page
One-click install
npx skills add https://github.com/pipixia-labs/creative-claw --skill pricing-page-pipixia-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pricing-page
Source: https://github.com/pipixia-labs/creative-claw/tree/main/skills/design-knowledge-and-skills/skills/pricing-page
Command: npx skills add https://github.com/pipixia-labs/creative-claw --skill pricing-page-pipixia-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pricing-page design is time-consuming and prone to inconsistency when building publish-ready pages that must align with a design system.

Core Features & Use Cases

  • Standalone pricing page with header, plan tiers, comparison table, and FAQ.
  • Design-system compliant: colors, typography, layout, and components.
  • Use Case: rapidly create pricing pages for SaaS products, marketing campaigns, or onboarding flows.

Quick Start

Create a single HTML document that adheres to the active DESIGN.md and renders a responsive 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 build a pricing page that aligns with my design system?▼

Generate a ready-to-publish pricing page for your SaaS product that adheres to your DESIGN.md specifications. It outputs a single HTML document covering the header, plan tiers, comparison table, and FAQ sections.

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

A standard SaaS pricing page includes a header, plan tier cards, a feature comparison table, and an FAQ section. This structure ensures clarity and addresses common customer questions directly on the page.

Can I use this to create responsive pricing pages for marketing campaigns?▼

Yes, you can rapidly create responsive pricing pages for marketing campaigns or onboarding flows. It renders a single HTML document that satisfies structure, content, and accessibility requirements.

How do I ensure web accessibility on my pricing page?▼

Ensure web accessibility on your pricing page by conforming to the active DESIGN.md guidelines. The generated page satisfies accessibility requirements alongside structure and design-system conformance.

What's the best way to structure a pricing page for multiple plan tiers?▼

Structure a pricing page for multiple plan tiers by using plan cards alongside a detailed feature comparison table. This approach provides clarity and speed, allowing users to easily evaluate different subscription options.

Why does my pricing page design lack consistency across different products?▼

Pricing page design lacks consistency when building publish-ready pages without a unified design system. Applying a DESIGN.md ensures colors, typography, layout, and components remain consistent across products.

Related Skills

Explore More Product & Management Skills→
PiercingXXPiercingXX
1

pricing-page

Generate a standalone HTML pricing page with plan tiers, comparison table, and FAQ.

Community
Intermediate
chadsmith-webdevchadsmith-webdev

landing-page-design

Create conversion-focused landing pages with layout rules and persuasive design elements.

Community
Intermediate
nyxoraAInyxoraAI
5

claude-design

Generate HTML design artifacts from UX/UI design briefs.

Community
Advanced
forbotsakeforbotsake
5

design-html

Generate production-quality HTML/CSS from approved mockups or design briefs.

Official
Advanced