Skip to content
Get packs

Pricing Page Designer

Builds a single-file HTML pricing page with plan tiers, comparison table and FAQ.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent can turn a short brief into a complete, self-contained web page for a product's pricing. It follows a design guide (a DESIGN.md file) so colors and fonts match the project, lays out 2 to 4 plan cards, adds a feature comparison table and a short FAQ, and outputs one HTML file that can be opened in a browser. The skill itself is instructions and a sample page; it does not run any programs or contact the internet.

Great for

  • Founders or marketers who need a quick pricing page mockup for a SaaS or subscription product
  • Front-end developers who want a starting HTML/CSS layout for plan tiers and a comparison table
  • Designers prototyping a pricing layout within an existing design system

Skip it if

  • Production billing pages that must be legally accurate: the skill invents plausible prices and feature names, so every number and claim needs checking against real offers
  • Users without a DESIGN.md or design system: the workflow expects one and will not produce a consistent look without it

Try asking

  • “Create a pricing page for my note-taking app with Free, Pro and Team plans”
  • “Make a compare-plans page with a feature table and FAQ for our B2B analytics tool”
  • “Build a two-tier individual vs business pricing page in our brand colors”
Step-by-step guide: how to use Pricing Page DesignerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    pricing-page.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip pricing-page.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip pricing-page.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the brief a product name, tier count (2, 3 or 4) and key features so the generated plans are relevant
  • Replace the sample prices and feature names with your real offer before publishing
  • Open the generated HTML at desktop and below 768px width to check the table layout

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.