SaaS Pricing Plan Design Prompt: 3 Cards with Center Focus
Description
About this prompt
This tool helps web designers and developers quickly create a visually appealing pricing plan block for a SaaS application homepage. It automates the structuring of three cards with a focus on the most expensive tier.
Who is it for
- Web designers looking for quick UI/UX solutions.
- Frontend developers needing ready-to-use structures for integration.
- SaaS business owners wanting to optimize conversion through clear visual emphasis.
Key benefits
The prompt ensures the most expensive tier is placed in the center to attract attention. It supports responsive design for all devices and allows customization of color schemes via variables, ensuring flexibility and a professional look.
>_ 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.