How I Build a Full SaaS Landing Page with One AI Prompt

Most people ask an AI tool for "a landing page" and get something generic back. The fix isn't a better tool. It's a better brief.

I build sites for clients and for my own products, and over the last year I've settled on one long, structured prompt that gets me a production-ready SaaS landing page in Next.js and Tailwind on the first try. Here's how it's put together, and why each part matters.

Start with what you're building and what it runs on:

Build a complete landing page for a B2B SaaS product called "Flowboard", a project-management tool for small teams. Tech stack: Next.js (App Router) with Tailwind CSS. One page, split into components in a components/ folder. Server Components by default; add "use client" only where interactivity needs it. Enter fullscreen mode Exit fullscreen mode That last line saves a lot of cleanup. Without it, most tools mark every file as a client component.

"Modern and clean" means nothing to a model. Exact colours, radius and font do:

Visual style: clean and modern on a white background. Navy (#002057) for headings, indigo (#2506ad) for primary buttons and links, orange (#ff7b00) as a sparing accent. Rounded 16px cards with a 1px light border, generous white space, a geometric sans-serif font such as Inter. Enter fullscreen mode Exit fullscreen mode 3. List the sections in order This is the part that turns a vague page into a real one. I list all ten sections with what goes in each: sticky navbar, hero (headline of at most 8 words, two buttons, screenshot placeholder), logo cloud, features grid, three-step "how it works", pricing with a highlighted middle plan, testimonials, an accessible FAQ accordion, a final CTA with email signup, and a four-column footer.

Constraints like "a headline of at most 8 words" matter. They stop the model padding everything.

The last block is what separates a demo from something you can ship:

Quality bar: - Fully responsive: design mobile-first, then tablet (768px) and desktop (1200px). - Accessible: semantic HTML landmarks, one h1, alt text on images, visible keyboard focus, colour contrast of at least 4.5:1 for body text. - Fast: no heavy libraries, lazy-load images below the fold, two web fonts at most. - Realistic sample copy (no lorem ipsum). - Respect prefers-reduced-motion. Enter fullscreen mode Exit fullscreen mode 5. Iterate with small follow-ups Once the first version runs, don't send another giant prompt. Send one small request at a time:

Small, specific asks give far better results than one prompt that tries to do everything.

The complete prompt, with all ten sections spelled out, is free on my site: SaaS Landing Page AI Prompt.

I've also published 40 more website prompts (restaurant, portfolio, real estate, fintech, clinic and more) and 180+ free UI templates if you'd rather hand-build a section.

What do you put in your prompts that makes the biggest difference? I'd like to hear in the comments.