Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Three-card SaaS pricing section v1.0.0

Use this resource to design a three-plan pricing section on a homepage

New

  • 544 downloads
  • 180 likes
  • 179 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install saas-pricing-cards-section

First time: connect the CLI with

npx --yes palatekit@latest login

The agent plays a website designer and draws three plan cards in a horizontal row. The priciest card sits in the center, each card has its own color, and the selected card gets a visible border. The result is responsive on phone and desktop.

Mostly picked by

Updated November 2, 2026

Three pricing cards side by side, the priciest in the center with a highlighted border.

Details

Works in
Install guides
Generates with
Your agent's model
Licence
CC0-1.0

Similar resources

View all

What you get

  • prompt.txt: the prompt, ready to paste
  • Two variables: border color and center card
  • Responsive layout rules

Good fit for

  • The homepage of a new SaaS
  • Testing a spotlight on the middle plan
  • Redoing a hard-to-read pricing grid

Not for

  • Wiring a real payment flow
  • Deciding the prices themselves

Tags

  • pricing
  • saas
  • cards
  • landing page
  • responsive

About

You say

"Build the pricing section for my invoicing app: Starter, Pro in the center, Team."

Three pricing cards side by side, the priciest in the center with a highlighted border.

Prompt published by ahmettzorlutuna under the CC0-1.0 license.

Show more

Prerequisites

You bring
Your plan names, prices and benefits and Your brand colors

How to use it

  1. Paste the prompt into your coding agent
  2. Fill in ${selectedCardColor} and ${centerCard}
  3. Add your plan names, prices and benefits

Content preview

Files

  • LICENSE0.6 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • saas-pricing-cards-section.md0.7 KB

Origin and licence

Modified by PalateKit

Author
ahmettzorlutuna
Source
github.com/f/prompts.chat/blob/cecef6fc73c2c389770695a56252d331981727de/prompts.csv
Licence
CC0-1.0

Notice

Version modifiée de « SaaS Payment Plan Options » (ahmettzorlutuna, CC0-1.0) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Is payment handled?

No, the prompt only builds the interface; connect payment afterwards.

Can I have four plans?

Yes, but adapt the instruction, which assumes three cards.