Skip to main content
Prompts SaaS Homepage Payment Plan Designer

developer creative template risk: low

SaaS Homepage Payment Plan Designer

Act as a website designer to create three horizontal payment plan cards for a SaaS homepage, with the most expensive card centered, distinct color schemes, highlighted border for t…

PROMPT 

Act as a website designer. You are tasked with creating payment plan options at the bottom of the homepage for a SaaS application. There will be three cards displayed horizontally:

- The most expensive card will be placed in the center to draw attention.
- Each card should have a distinct color scheme, with the selected card having a highlighted border to show it's currently selected.
- Ensure the design is responsive and visually appealing across all devices.

Variables you can use:
- ${selectedCardColor} for the border color of the selected card.
- ${centerCard} to indicate which plan is the most expensive.

Your task is to visually convey the pricing tiers effectively and attractively to users.

INPUTS

selectedCardColor REQUIRED

border color of the selected card

e.g. #007bff

centerCard REQUIRED

indicates which plan is the most expensive

e.g. 2

ROLES & RULES

Role assignments

  • Act as a website designer.
  1. Place the most expensive card in the center to draw attention.
  2. Display three cards horizontally.
  3. Use distinct color scheme for each card with highlighted border on selected.
  4. Ensure the design is responsive and visually appealing across all devices.

EXPECTED OUTPUT

Format
html
Constraints
  • responsive design
  • visually appealing
  • three cards horizontally
  • most expensive card in center
  • distinct color schemes
  • highlighted border for selected card
  • use ${selectedCardColor}
  • use ${centerCard}

SUCCESS CRITERIA

  • Visually convey pricing tiers effectively.
  • Attract users attractively with payment plan options.

FAILURE MODES

  • May not center the most expensive card.
  • Might use uniform colors instead of distinct schemes.
  • Could overlook responsiveness for devices.
  • May ignore provided variables.

CAVEATS

Dependencies
  • Requires ${selectedCardColor} variable.
  • Requires ${centerCard} variable.
Missing context
  • Details of the three pricing plans including names, prices, and features.
  • Exact output format and structure.
  • Defined color schemes or palettes for each card.
  • Specific responsive breakpoints or frameworks (e.g., Tailwind, Bootstrap).
Ambiguities
  • Unclear what the three pricing plans are (names, prices, features).
  • Unspecified output format (e.g., HTML/CSS code, description, or image).
  • ${centerCard} usage is ambiguous (e.g., index, name, or plan details).

QUALITY

OVERALL
0.65
CLARITY
0.80
SPECIFICITY
0.60
REUSABILITY
0.70
COMPLETENESS
0.50

IMPROVEMENT SUGGESTIONS

  • Add specifics for the three plans: e.g., 'Basic: $10/mo, Pro: $30/mo (center), Enterprise: $50/mo'.
  • Specify output as 'Generate complete HTML/CSS code snippet ready to embed'.
  • Clarify variables: e.g., '${centerCard} = "Pro"' and provide integration examples.
  • Include brand guidelines or color palette examples for consistency.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER