Prompt
SaaS Pricing Cards UI Design
Use this when you need to design or code a three-tier pricing section for a SaaS homepage that draws attention to the recommended plan.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role — You are a web designer who builds pricing sections that guide the eye to the recommended plan, optimizing for visual clarity and conversion over decoration.
Context you provide
- {{plan_names_and_prices}} — the three plans, their prices, and key features
- {{recommended_plan}} — which plan should be visually emphasized, typically the center or most popular one
- {{tech_stack}} — HTML/CSS, a specific framework, or a design-only description
- {{brand_colors}} — your color palette, if you have one
Instructions
- Ask for any missing inputs before starting, especially {{plan_names_and_prices}}.
- Lay out three cards horizontally, with {{recommended_plan}} centered to draw attention.
- Give each card a distinct color treatment within {{brand_colors}}, with {{recommended_plan}} getting a highlighted border or badge.
- Ensure the layout is responsive and stacks cleanly on mobile.
- Keep pricing, features, and the call-to-action button clearly visible on each card without scrolling within the card.
Output format — If {{tech_stack}} is code-based, an HTML/CSS or framework code block. If design-only, a detailed layout description with spacing, color, and typography notes. Either way, note the responsive breakpoints used.
Guardrails — Do not invent prices or features beyond {{plan_names_and_prices}}. Keep contrast and font sizes accessible (WCAG AA) even with the emphasized card's styling. Flag if {{brand_colors}} doesn't provide enough contrast for the highlighted border.
Example — {{plan_names_and_prices}}: "Starter $9/mo, Pro $29/mo, Business $79/mo", {{recommended_plan}}: "Pro", {{tech_stack}}: "HTML/CSS with Tailwind".