How to use the Pricing Page Designer agent skill

What the pricing-page skill makes the agent do

Once the skill is active, the agent turns a brief about a product's pricing into one self-contained HTML document. The page has a header, 2 to 4 plan tiers, a feature comparison table and a short FAQ. The output is a single HTML file that can be opened in a browser.

The agent follows a design guide, a DESIGN.md file in your project, so colors, fonts and component patterns match your existing design system. The skill itself is instructions and a sample page. It does not run any programs or contact the internet.

• Hero with page title, one-line subhead and optional monthly/annual toggle
• Plan cards with tier name, price, positioning line, 4 to 6 features and a primary call to action
• Comparison table grouped into 2 to 3 sections with a sticky header
• FAQ of 4 to 6 collapsible questions using details and summary, with no JavaScript
• Footer call to action

Install the pricing-page skill

Download the ZIP from this page and unzip it. The package contains two files: SKILL.md and example.html.

For a personal setup, unzip the folder into ~/.claude/skills/. To limit the skill to one project, unzip it into the project's .claude/skills/ folder instead. If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

• Personal install: ~/.claude/skills/
• Project install: the .claude/skills/ folder inside your project
• Claude apps: Settings → Capabilities → Skills, then upload

Prepare a DESIGN.md file before you start

The skill reads a DESIGN.md file in your project and uses only its colors, type tokens and component patterns. Without one, the workflow expects a design system and will not produce a consistent look.

If you are a developer or designer, put the DESIGN.md at the root of the project you are working in. If you are a founder or marketer without a design system, the skill is a weaker fit.

Trigger the skill with natural requests

The skill activates when your brief uses words such as pricing, pricing page, plans, subscription, compare plans, or the Chinese terms 定价 and 套餐. Describe the product, the audience and any tier preferences in plain language.

Say how many tiers you want if it matters. The skill chooses a 3-tier shape by default, 4 tiers when the brief mentions scale or enterprise plus, and 2 tiers for individual/business or personal/pro.

• "Make a pricing page for our project management SaaS with Free, Pro and Team plans."
• "Create a pricing page with two tiers: personal and pro, for a note-taking app."
• "Compare plans for our API product in a table, with a FAQ at the bottom."

What to check in the output

The skill invents plausible prices and feature names. Treat every number, plan name and claim as placeholder text until you check it against your real offers. The skill is not suited to production billing pages that must be legally accurate.

The agent is asked to mark the recommended tier with an accent border or badge, to keep the accent on one call to action, and to make the comparison table readable at 1024px and below 768px. Check those on screen before sharing the page.

• Replace every price and feature name with your real ones
• Confirm the recommended tier is the one you actually want to promote
• Open example.html in a browser to see the expected layout style
• Test the table at narrow widths

Safety notes: scripts and network

According to the listing, this skill runs no scripts and uses no network access. It consists of instructions and a sample page. The output is an HTML file with CSS in one inline style block. Review the generated file as you would any code before deploying it.

• Runs scripts: no
• Uses network: no
• Licence: Apache-2.0