AI Prompt for a SaaS Landing Page

Create a SaaS landing page or other online business 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 website for a SaaS landing page or website for an online business. 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:

Create an HTML template for a landing page for a new SaaS product called "ZezzFlo." The design should be professional, trustworthy, and aimed at converting visitors into users.

Page Structure:

  1. Header: A clean header with the "ZezzFlo" logo on the left and a prominent "Sign Up for Free" call-to-action button on the right.
  2. Hero Section: A compelling hero section with a clear value proposition (e.g., "Your Team's Workflow, Unified"), a short descriptive paragraph, an email input field, and a "Get Started" button. To the right, include a placeholder for a product screenshot or illustration.
  3. Features Section: A three-column layout showcasing the top three features. Each feature should have an icon (placeholder SVG), a heading, and a short description.
  4. Social Proof/Testimonials: A section to build trust, featuring a quote from a customer. Include the customer's name and company. Design it to be visually distinct, perhaps with a different background color.
  5. Pricing Section: A simple pricing table with two or three tiers (e.g., "Free," "Pro," "Enterprise"). Each tier should list its key features, price, and have a call-to-action button. One tier should be visually highlighted as "Most Popular."
  6. Footer: A comprehensive footer with links to "Features," "Pricing," "About Us," "Contact," and "Terms of Service." Also include social media links.

Core Requirements:

  • Technology: Generate a single HTML file with CSS in a <style> tag.
  • Accessibility: Must be WCAG 2.1 AA compliant. Use semantic HTML, ARIA roles where appropriate (e.g., on the pricing table), and ensure all interactive elements are keyboard-navigable.
  • Responsiveness: Mobile-first design. All sections, especially the feature columns and pricing table, must stack cleanly on smaller screens.
  • Best Practices: Clean, commented CSS with variables for colors and fonts. Layouts should use Flexbox or Grid. All content should be placeholder but descriptive. The CTA buttons should have a subtle hover effect.

The Result

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

Screenshot of SaaS landing page AI prompt result

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.