Pricing page templates whose numbers add up
A pricing page is read by people close to buying, and one saving that doesn’t add up costs their trust. These skills build it from your real plans: your agent writes one file of prices and links, and the build turns it into a pricing page or section, checked at four screen widths. Pricing Section and Pricing Kit, the first two, work out or check every saving for you.
Free skills to start. Pro is $79 a year for every skill, or $9.99 a month for 10. See pricing
Pricing page examples, by kind of pricing
From the Lookbk catalog only: skills that build a pricing section or page. Plan tables come first, then pricing inside a whole landing page, then pricing that isn’t a plan table at all: a service menu and a fee calculator. Each builds from one JSON file your agent writes from your real prices and checks the result at four screen widths. None of them takes payment; where there are buttons, they link to your own checkout or sign-up pages. Pricing Kit, Services Menu Kit and Fee Calculator are free; the rest are Pro.
- Pricing SectionClaude CodeCodexCursor+3 more agents
01 · Page Kits · Pro
Pricing Section
Drop-in pricing section from pricing.json · odometer prices that carry digit into digit · computed yearly saving · seats, comparison table, FAQ · HTML, embed and React component
The one built for a SaaS pricing page. Every price sits on a mechanical odometer: flip the monthly/yearly switch and its wheels turn and carry into each other, plan after plan. Every saving on the page, from the switch’s "save up to 20%" to "You save $432 a year", is worked out from your prices, and the build refuses a phrase that types one. A seat counter multiplies per-seat plans, and you get a page, a paste-in embed and a React component.
Worth knowing: It needs a yearly discount: the build refuses a paid plan whose yearly price isn’t lower, and usage-based pricing with meters is out. Two to four plans, in two fixed styles, ledger and gallery; the accent colour is yours.
Needs: Node.js 18+, and Chrome for the checks; ffmpeg only for the clip
See what Pricing Section makes - Pricing KitClaude CodeCodexCursor+3 more agents
02 · Page Kits · Free
Pricing Kit
Pricing section system · page + embed · 1080p preview
Free, and built around one idea: every plan hangs from its real price on one ruled scale. Flip the switch and each price rolls digit by digit while its dot slides along the scale and a hatched stretch shows the money kept, with the arithmetic printed under every price. An optional usage calculator lights the cheapest plan as you slide and names the point where another plan becomes cheaper.
Worth knowing: You write the saving ("2 months free") and the build checks it against every plan, rather than working it out. Two to four plans, as a page and an embed, with no React component.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Pricing Kit makes - Motion Sections KitClaude CodeCodexCursor+3 more agents
03 · Page Kits · Pro
Motion Sections Kit
Animated landing-page sections you compose in page.json · rolling prices, comparison table, pinned quote stack, counters with real meters, editorial and terminal FAQs · two styles with their own layouts · 1080p video of the scroll
A whole pricing page from sections that share one motion language: a masthead, the plans with a monthly/yearly switch that rolls every digit like an odometer, an FAQ and a footer, in the order you choose. In the dark graphite style, a comparison list turns the plans into a table whose header, with the switch, every price and every button, pins while you read down it.
Worth knowing: The line under each price, such as "Billed $120 once a year", is text you give it, so check the sums before you ship. Two styles, paper and graphite.
Needs: Node.js 18+, and Chrome for the checks; ffmpeg only for the video
See what Motion Sections Kit makes - Dark Glass LandingClaude CodeCodexCursor+3 more agents
04 · Landing Pages · Pro
Dark Glass Landing
A whole landing page in one dark glass system · real backdrop blur, pointer-lit edges, volumetric light · two layouts for every section · two art directions with different skeletons · 1080p video of the scroll
Pricing inside a whole dark landing page: three plans as glass cards, or as a ledger of rows beside a sticky heading, with a monthly/yearly switch whose prices cross over and a featured plan whose edge stays lit. A plan can show "Free" or "Let’s talk" instead of a price.
Worth knowing: Exactly three plans, dark only, and the pricing is one of the page’s seven fixed parts rather than a section on its own.
Needs: Node.js 18+, and Chrome for the checks; ffmpeg only for the video
See what Dark Glass Landing makes - Vernissage Launch KitClaude CodeCodexCursor+3 more agents
05 · Landing Pages · Pro
Vernissage Launch Kit
A whole launch set in one style from one launch.json · landing page with a balanced hanging mobile · OG 1200×630, post 1600×900 and square 1080×1080 cards · a 12 s 1080p launch film · two type pairings, any wall colour
Pricing for a launch page: one to three admission tickets with a perforated stub and a serial number, a monthly/yearly switch that shows exactly the prices you give it, and a round sticker on the featured ticket. It comes with the rest of the launch in the same style: the page, three share cards and a launch film.
Worth knowing: Up to three tickets, in the gallery style only; it is made for a launch page rather than a pricing page on its own.
Needs: Node.js 18+, and Chrome for the cards and checks; ffmpeg only for the film
See what Vernissage Launch Kit makes - Paper Technical LandingClaude CodeCodexCursor+3 more agents
06 · Landing Pages · Pro
Paper Technical Landing
A whole landing page in an engineering-paper design system · SVG technical drawing that plots itself · dimensioned section heads · pinned anatomy index · tokens and rules included · 1080p video of the scroll
Pricing set as engineering drawing sheets: two or three sheets, each with a title-block strip, a price and a bill of materials with quantities, and a revision cloud drawn round the featured one. "From $12k" and "On request" are set the way a drawing would set them. Suits hardware, instruments and developer tools.
Worth knowing: One price per sheet, with no monthly/yearly switch. Light only, and the sheets come as part of the whole page.
Needs: Node.js 18+, and Chrome for the checks; ffmpeg only for the video
See what Paper Technical Landing makes - Services Menu KitClaude CodeCodexCursor+3 more agents
07 · Page Kits · Free
Services Menu Kit
Services section system · page + embed · 1080p preview
Free, for agencies, studios and consultancies that price by the job. Every service says what the client is handed, how long it takes and its usual and lowest price, and set menus print their totals as an itemised bill added up from their parts. A help-me-choose form takes a budget and a deadline and marks each service as fits, a stretch or not now, with the reason.
Worth knowing: Not for subscription plans with a monthly and yearly switch.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Services Menu Kit makes - Fee CalculatorClaude CodeCodexCursor+3 more agents
08 · Page Kits · Free
Fee Calculator
Transfer and card-fee calculator section from one JSON config: exact money, cut-off time strip, sourced comparison
Free, for transfer, payroll and card-processing pages where the price is a fee on an amount. The visitor types an amount and sees the whole sum: every fee on its own line, the exchange margin shown as money against a timestamped rate, and the total cost as money and as a percentage. A typical-bank column can’t be built without a source and a collection date.
Worth knowing: It fetches no live rates out of the box; you add an adapter. For subscription plans, use Pricing Kit.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Fee Calculator makes
What a pricing page needs
A pricing page is read by someone close to buying and looking for a reason not to. It should answer three questions fast: which plan is for me, what will I actually pay, and what happens if I pick wrong. Every figure on it should match what your checkout charges.
01
Two to four plans
Each named for who it suits, saying what it adds to the one before. Every plan table on this page stops at four.
02
A recommended plan with a reason
Say who it suits, not "most popular", unless you have the number. Pricing Kit asks for a reason a buyer would believe; Pricing Section puts your own words on its label.
03
An honest yearly saving
Worked out from the prices, rounded down, and shown in money as well as per cent. More on the toggle below.
04
A comparison table
For the buyer looking for the one feature that decides it. Pricing Kit can hide the rows that are the same on every plan.
05
Questions
Billing, cancelling, taxes and what happens at a limit. FAQ Kit is made for landing and pricing pages and puts a short answer beside every question.
06
Buttons that go to a real checkout
Every button links to the checkout or sign-up for its plan and billing period. Try each one in your payment provider’s test mode before you ship.
The monthly/yearly pricing toggle, done right
The billing switch is the one moving part most pricing pages have. Pricing Section builds it as a real radio group: click, Space, the arrow keys, Home and End all change the period, and the focus follows the choice. Each price is also written as text for screen readers, a polite live region says what changed, and the choice can be kept in the address, so a link can open on yearly.
The saving is where trust is lost. Two months free on a $12 plan is $10 a month billed yearly, which saves 16.7%, not 20%. Pricing Section works every percentage out from your prices and rounds it down, so it never overstates, and Pricing Kit refuses a saving phrase that any of your plans doesn’t meet. In both, prices change at once instead of rolling for visitors who ask for reduced motion.
Install
Install a pick with your agent
Every pick is a SKILL.md folder, so it installs the same way in Claude Code, Codex, Cursor and other agents. The example below uses Pricing Kit, which is free; each skill page has its own prompt.
1. Paste the install prompt
Your agent runs the installer. The first time, it shows a sign-in link so you can approve it in the browser.
Install the "Pricing Kit" skill from Lookbk (https://lookbk.dev/skills/pricing-kit). 1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add pricing-kit 2. When the install finishes, read the SKILL.md it installed and tell me what you need from me to make the first result.
Or run it in a terminal
curl -fsSL https://lookbk.dev/cli.js | node - add pricing-kit2. Start a new session
Agents load skills when a session starts. The installer writes the folder where your agent looks:
- Claude Code
- ~/.claude/skills/pricing-kit
- Codex
- ~/.agents/skills/pricing-kit
- Cursor
- ~/.agents/skills/pricing-kit
3. Ask for the result
Describe it in plain words, for example:
Build our pricing section with our three plans, monthly and yearly prices, a feature comparison and a seat calculator
Another agent? Install a skill in any agent
FAQ
Questions
Still stuck? The guides cover installing, agents and licensing in more detail.
Read the guidesDoes the pricing table take payments?
No. The buttons are plain links to your checkout: Stripe Payment Links, Paddle or Lemon Squeezy checkouts, or your own sign-up pages, and Pricing Section switches them with the billing period. Nothing is charged on the page, so test each link once in your payment provider’s test mode.
How should I show a yearly discount?
As money and as a percentage, both worked out from your prices and rounded down. Two months free on $30 a month is $25 a month billed yearly, or $300 once a year. Pricing Section writes every saving line from your prices; Pricing Kit checks the saving you write against every plan.
Can I use it in Next.js or React?
Pricing Section writes a React client component and its CSS. It renders the same markup as the page, so the prices are in the server-rendered HTML. Pricing Kit, Services Menu Kit and Fee Calculator give a self-contained page and a paste-in embed; ask your agent to wrap the embed in a component.
Is there a free pricing table template?
Yes. Pricing Kit is free: 2 to 4 plans on a shared price scale, a monthly/yearly switch, a comparison and an optional usage calculator. Services Menu Kit and Fee Calculator are free too, for prices by the job and fees on an amount. The install steps below use Pricing Kit.
What about usage-based pricing?
Pricing Section is not built for meters and tiers. Pricing Kit’s optional calculator handles plans that include an amount and charge for each unit over it, on a linear or logarithmic slider, and lights the cheapest plan at every value.