Pricing Page Skill
SkillMediapricing-page is a skill that lets an AI agent build a complete standalone pricing page. Given a brief that asks for pricing, plans, subscription tiers, or a compare plans page, it produces a single-file HTML page with a hero, plan cards, a feature comparison table, an FAQ, and a footer CTA, styled according to the project's DESIGN.md.
Available today. Use it from your connected AI after setup.
No other account needed.
Have a DESIGN.md style guide available, since the skill uses its colors, typography, layout, and component sections.
Then ask your AI: use the Pricing Page Skill skill
What your AI can do with it
- Picks a tier structure (2, 3, or 4 tiers) based on the brief
- Writes plan cards with prices, features, CTAs, and a recommended-tier badge
- Builds a feature comparison table with grouped sections and a sticky header
- Adds a collapsible FAQ using <details><summary> with no JavaScript
- Generates one self-contained HTML document using CSS Grid
- Self-checks price plausibility, accent usage, and responsive behavior
Getting started
- Have a DESIGN.md style guide available, since the skill uses its colors, typography, layout, and component sections.
- Make sure the laws-of-ux skill is present, as the skill requires it.
- Write a brief that mentions pricing, plans, subscription tiers, or comparing plans so the skill triggers.
- Ask the agent to build the pricing page; it will return a single HTML artifact.
- Review the output at desktop width and below 768px to confirm the table stacks readably.
What this skill tells your AI
The instructions your AI receives, as published by nexu-io/open-design in design-templates/pricing-page/SKILL.md and read by ahel’s review.
Produce a single-screen pricing page that respects the active DESIGN.md.
Workflow
- Read the active DESIGN.md (injected above). Use only its colors, type tokens, and component patterns.
- Classify the product from the brief and pick a tier shape:
- 3-tier (most common): Free / Pro / Team or Starter / Growth / Enterprise.
- 4-tier when the brief says "scale" or "enterprise plus".
- 2-tier when it says "individual / business" or "personal / pro".
- Sections, in order:
- Hero — page title (e.g. "Pricing"), one-line subhead, optional monthly/annual toggle.
- Plan cards — one card per tier. Each card: tier name, price (use the display font + larger scale for the number), 1-line positioning, 4–6 bullet features, primary CTA. Mark the recommended tier with the DS accent border or a small badge.
- Comparison table — feature rows × tier columns, ✓ / — / value cells. Group features into 2–3 logical sections (Core, Collaboration, Support, Security…). Sticky header.
- FAQ — 4–6 collapsible Q&A items. Use
<details><summary>for the collapse — no JS. - Footer CTA — single line + button, accent band sparingly.
- Write one self-contained HTML document:
<!doctype html>through</html>, CSS in one inline<style>.- CSS Grid for the plan-card row; CSS Grid for the comparison table.
data-od-idon each tier card and each table row.
- Money rendering: use the display font for the big number, body for the currency and "/mo" — sizes per DESIGN.md scale.
- Self-check:
- Prices are plausible for the product (not "$X / month").
- Accent is on the recommended tier and one CTA only.
- Comparison table renders cleanly at 1024px and stacks readably below 768px (rotate column headers or scroll-x).
- No fake feature names — every row reads as something a real product would actually offer.
Output contract
Emit between <artifact> tags:
<artifact identifier="pricing-slug" type="text/html" title="Pricing — Product Name">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
Signals
- GitHub stars
- 98k
- Forks
- 11k
- Last commit
- Sep 2026
Others that do the same job
Questions
- When should this skill be used?
- When the brief asks for "pricing", "plans", "subscription tiers", or a "compare plans" page. It also triggers on related terms like "pricing page" and "subscription".
- What does the output look like?
- A single self-contained HTML document with inline CSS, emitted as an artifact. It contains a hero, plan cards, a comparison table, an FAQ, and a footer CTA.
Advanced
- Item type
- skill
- Key
pricing-page-2- Source
- github.com/nexu-io/open-design