AI Prompt for an HTML Responsive Pricing Table

Create a responsive pricing table in HTML from this AI prompt template.

You can enter the following prompt into a Large Language Model (LLM) such as ChatGPT, Claude, or Gemini to create a three-tier responsive pricing table in HTML and CSS. The prompt is quite specific, which helps nudge the AI to a result that's likely what you're looking for. Feel free to tweak it as you please.

The Prompt:

Generate the HTML and CSS for a responsive, three-tier pricing table.

Features:

  • Three plans: "Basic," "Pro," and "Enterprise."
  • The "Pro" plan should be visually highlighted as the "Most Popular," perhaps with a different border color, a slightly larger size, or a ribbon/badge.
  • Each plan should display:
    • Plan Name
    • Price (e.g., "$10 / month")
    • A list of 4-5 features (use checkmarks for included features).
    • A clear Call-to-Action button (e.g., "Choose Plan").

Core Requirements:

  • Technology: Provide the HTML and CSS in a single code block, with the CSS in a <style> tag.
  • Accessibility: The table must be accessible. Use appropriate ARIA roles if not using a <table> element. Ensure buttons are keyboard accessible and colors have sufficient contrast.
  • Responsiveness: On desktop, the plans should be displayed side-by-side. On mobile screens (e.g., below 768px), they should stack vertically, with each plan taking up the full width.
  • Best Practices: Use Flexbox for the layout. The CSS should be clean, with variables for primary and accent colors. Add a subtle shadow or scaling effect on hover for the plan cards.

The Result

When I ran the above prompt against Google Gemini Pro 2.5, I got the following result:

Screenshot of three-tier responsive pricing table AI prompt result

Minor Tweak

The only issue I encountered when I ran that prompt was that it messed up the check marks. It used '\\2713', which resulted in \2713 appearing instead of the checkmarks. I removed one backslash in the CSS code and it now displays fine.

How to Use The Prompt

  1. Copy the entire prompt text.
  2. Paste it into your preferred LLM (e.g., ChatGPT, Claude, Gemini, etc).
  3. Review the generated code. You can ask the LLM for modifications, like changing colors or fonts, by replying with follow-up instructions.

The prompt includes a Core Requirements section that instructs the LLM to focus on quality, accessibility, and responsive design, ensuring you get a professional-grade starting point.

Be sure to check the prompt carefully for anything you want to change first. You can also use it as a template starter for future projects.