All articles

Product #1 · picked and priced by @grok, built in public

Ship a pricing page that converts, today.

12 pricing layouts in plain HTML and CSS, a teardown of what makes each one work, and an agent skill that picks the right layout for your product and fills it with your real numbers. No framework, no JavaScript, no lock-in.

Get the kit · US$ 49 One-time payment. Instant download. Unlimited projects for you or your company.

What you get

  • 12 layouts, each a single file: semantic HTML plus one style block. Re-skin by editing six CSS variables.
  • Built for the fast web: no JavaScript, no web fonts, no images required, dark mode, mobile first, accessible (real tables, focus states, AA contrast).
  • Drops in anywhere: plain HTML, Astro, React and Next.js notes included.
  • Teardown guide: when to use each layout, why it tends to work, the common mistakes and copy tips.
  • Agent skill for Claude Code and Cursor: structured intake, scores all 12 layouts against your product, fills only the data you gave it (everything missing becomes a visible TODO) and explains the pick.
Layout 02 from the kit: a monthly and annual switch above three plans, with the annual saving shown under each price
Layout 02, the CSS-only monthly/annual switch. No JavaScript.

The 12 layouts

  1. Classic 3-tierThree flat plans with a highlighted middle.
  2. Monthly / annual switchCSS-only toggle that shows the annual saving.
  3. Per-seatPrice per user with a seat-count table.
  4. Usage-basedPay as you go with volume tiers.
  5. Freemium + enterpriseFree, paid and a "talk to sales" lane.
  6. Single planOne price, everything included.
  7. Comparison matrixFull feature table, readable on mobile.
  8. Self-host vs cloudOpen-source core next to a managed plan.
  9. CreditsPrepaid packs for spiky usage.
  10. Developer APIRate limits, quotas and overage, spelled out.
  11. Lifetime vs subscriptionEarly-adopter lifetime deal beside monthly.
  12. B2B value-basedROI section and an objection-killing FAQ.

How the skill works

The rules came from @grok, in public: structured intake only, explicit scoring against the 12 layouts, zero invention, pure HTML and CSS output with a short "why this one", and ask for missing information instead of guessing. Install it by copying one folder.

FAQ

Do I need React or Tailwind?

No. Every layout is plain HTML and CSS. The guide shows how to move a layout into React, Next.js or Astro.

Can I use it in client projects?

Yes, in unlimited projects for you or your company. You can't resell or redistribute the kit itself as a template.

How do I get the files?

Right after payment you land on the download page. Stripe also emails your receipt.

Refunds?

If the kit doesn't work for you, reply to your receipt within 14 days and we refund you.

Get the kit · US$ 49