30 AI Web Design Prompts for SaaS Landing Pages, Ready to Copy

The gap between a generic AI-generated page and a good one is rarely the tool. It is the brief. A model given a vague request returns the most statistically likely page, which is the centred hero, the gradient and the three icon cards you have seen a thousand times. Given a specific request, the same model can produce something that looks deliberate.

Below are thirty prompts you can copy, grouped by product type, visual direction, section and page type. Replace the bracketed parts with your own details. They work in most AI web designers and app builders, and they work best when you combine pieces from more than one group.

The five-part brief behind every prompt

1. 01Product and audience. What it is, in category terms, and exactly who uses it. A scheduling tool for dental clinics, not a productivity platform.
2. 02Outcome. The change a customer gets. This becomes the headline.
3. 03Visual direction. A named style with two or three concrete traits. Editorial with a serif display face and wide margins.
4. 04Constraints. One accent colour, a typeface, light or dark. Fewer, firmer constraints beat a long wish list.
5. 05Structure and action. The sections in order and the one primary call to action.

Words to replace in any prompt

Prompts by product type

1. 01Developer tool. Landing page for [product], an API for [job] used by backend engineers. Technical direction: dark theme, monospaced labels, a code sample in the hero beside the headline, dense feature list with short lines, docs link in the navigation. Primary action: Get an API key.
2. 02AI product. Landing page for [product], an AI assistant that [outcome] for [audience]. Avoid purple gradients and glowing orbs. Use a light editorial layout with a serif headline, a real product screenshot showing an actual output, and a short section on how data is handled. Primary action: Try it free.
3. 03Fintech. Landing page for [product], [category] for finance teams at mid-sized companies. Restrained, high-contrast design, navy and off-white with one green accent, tabular figures, a security and compliance section near the top. Primary action: Book a demo.
4. 04HR and people tools. Landing page for [product], which helps HR teams [outcome]. Warm, human direction with a rounded sans-serif, soft neutral background, photography of real teams rather than illustrations, and testimonials with names and roles. Primary action: Start free trial.
5. 05Analytics. Landing page for [product], analytics for [audience]. The hero is a large, readable dashboard screenshot. Below it, three rows each pairing one chart with one insight it reveals. Neutral greys with one blue accent. Primary action: Connect your data.
6. 06Design or creative tool. Landing page for [product], a tool for designers who [job]. Expressive layout with oversized type, asymmetric grid, a full-width gallery of work made with the product. Black and white with one bright accent. Primary action: Start creating.
7. 07Security and compliance. Landing page for [product], which helps [audience] pass [standard] audits. Calm, trustworthy direction: lots of whitespace, a muted palette, certification badges in a quiet row under the hero, and a plain-language explanation of the process. Primary action: Talk to us.
8. 08Consumer productivity app. Landing page for [product], an app that helps people [outcome]. Friendly and bright, large phone mockups, short benefit-led sections, app store buttons in the hero and the footer. Primary action: Download free.

Prompts by visual direction

Add one of these to any product prompt above in place of its visual direction.

1. 01Editorial. Serif display headlines, a sans-serif body, narrow text columns, thin horizontal rules between sections, and lots of white space, like a well-designed magazine feature.
2. 02Technical. Dense and precise, like good developer documentation. Monospaced labels, small caps section numbers, a grid of thin borders, and code blocks used as design elements.
3. 03Brutalist. Raw and confident. Heavy black borders, oversized grotesque type, flat primary colours, no rounded corners, no shadows.
4. 04Minimal mono. Black, white and one grey. A single typeface in two weights. Strict alignment to a twelve-column grid. No decoration at all.
5. 05Warm paper. Off-white and cream backgrounds, warm brown text, a humanist typeface, soft shadows, and the feeling of a printed notebook.
6. 06Dark premium. Near-black background, light grey text, a single metallic or electric accent, large product renders lit from one side, slow and spacious.
7. 07Soft pastel. Light pastel section backgrounds that change as you scroll, rounded cards, friendly rounded sans-serif, playful but not childish.
8. 08Kinetic type. Typography is the hero. Very large headlines that dominate each section, tight letter spacing, strong contrast between huge and small type, minimal imagery.

Prompts by section

Use these to regenerate one part of a page. The default version of each core section is in the SaaS landing page design guide; these are the variations.

1. 01Hero with sign-up field. Headline and subheading on the left, an email field and button inline on the right, with a one-line note that no card is required. Product screenshot full width below.
2. 02Hero with product video. Centred headline, short subheading, one button, and a large framed product video below it that autoplays muted with a visible play control.
3. 03Comparison table. A table comparing [product] with the old way of doing the job across five rows, with checkmarks avoided in favour of short plain-text answers.
4. 04Integrations. A grid of twelve integration logos in one muted tone, a heading that says what connecting them achieves, and a link to the full list.
5. 05Security. Three short columns covering data encryption, access control and compliance certifications, each with one sentence and a link to details.
6. 06Metrics band. A full-width band with three large numbers and a one-line label under each, on a contrasting background.
7. 07Use cases. Tabs for four audiences. Each tab shows a screenshot and three sentences specific to that audience.
8. 08Founder note. A short letter from the founder in a narrow column with a signature and photo, placed just before the final call to action.

Prompts for the pages around the landing page

1. 01Pricing page. Pricing page for [product] with a monthly and annual toggle, three plans with the middle one recommended, a full comparison table below, and an FAQ about billing. Same visual direction as the landing page.
2. 02Waitlist page. A single-screen waitlist page: product name, one sentence on what it does, an email field, and a counter of people already waiting. Nothing else.
3. 03Sign-in page. A centred sign-in card with email and password, a Google sign-in button, and a link to create an account. A quiet product quote on the left half of the screen.
4. 04About page. About page with the founding story in a narrow editorial column, team photos in a simple grid, and the company's three principles as large numbered statements.
5. 05Changelog. A changelog page with dated entries in a single column, version tags, and short descriptions grouped under New, Improved and Fixed.
6. 06404 page. A 404 page with a large, witty headline, one sentence of help, a search field and links to the three most useful pages.

Follow-up prompts for refining a page

Most of the improvement happens after the first generation. Small, specific edits work far better than asking for the whole page again.

• Make the hero quieter: smaller headline, less colour, more space around the button.
• Move pricing above testimonials.
• Replace the icon grid with three alternating screenshot rows.
• Use the accent colour only on buttons and links.
• Tighten the spacing between sections by about a third.
• Rewrite every heading to describe what the user achieves.
• Remove the second button in the hero.
• Make the footer a single row with five links.

Prompt mistakes that guarantee a generic page

• Asking for the whole site in one sentence with no direction.
• Listing ten adjectives instead of naming one direction.
• Letting the tool invent copy, then pasting real copy into a layout sized for different text.
• Requesting every section you have ever seen on a competitor's page.
• Regenerating the entire page to fix one section.

Why vague prompts converge on the same design is explained in why AI-generated websites all look the same.

Using these prompts in ResetUI

Disclosure: ResetUI is our product. It matches your brief to an authored design specification automatically, so the visual direction part of the brief is optional: a two-sentence description of the product and audience is enough to get a committed design. If you do name colours or typefaces, they take priority. Most of the page-type prompts above, pricing, waitlist, sign-in, about and 404, map directly to page types it composes. More on theResetUI AI web designer page.