如何用一條 AI 提示詞建立完整的 SaaS 登陸頁面

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.

1. Name the product and the stack

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.

That last line saves a lot of cleanup. Without it, most tools mark every file as a client component.

2. Give it a real visual system

"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.

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.

4. Set a quality bar

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.

5. Iterate with small follow-ups

Once the first version runs, don't send another giant prompt. Send one small request at a time:

• "Add a monthly/yearly toggle to the pricing section that updates the prices and shows 'Save 20%'."
• "Add a dark mode using CSS variables and a toggle in the navbar that remembers the choice."
• "Connect the email signup to a Server Action that validates the email with Zod."
• "Write SEO metadata (title, description, Open Graph) and FAQPage JSON-LD for this page."

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

Running it

1. Paste the full prompt into Claude, ChatGPT, Cursor, v0 or Bolt. Tools that write files directly are the most convenient.
2. Create a project with npx create-next-app@latest, add the generated files, and run npm run dev.
3. Check it at phone width, describe anything that looks off in plain words, then work through the follow-ups.

Get the full prompt

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.