Prompt Engineering for Web Design: How to Build Custom Sites with Generative AI

Type “make me a website for my bakery” into almost any AI tool and you will have a homepage in under a minute. It will probably arrive with a big hero photo, a headline about passion, a row of rounded feature cards and a newsletter box nobody asked for. Ask again next week, or in a different tool, and you get nearly the same page with the colors shuffled.

The sameness comes from the request, not the model. When an AI web design prompt leaves out the audience, the goal and the brand, the model fills each gap with the most common choice it has seen, and the most common choice is the template everyone already recognizes. The same models can produce a site that feels built for one specific business. They just need the information a good designer would ask for before opening a design file.

This guide treats prompt engineering for web design as a repeatable method rather than a list of magic phrases. You get a five-part framework for writing website prompts an AI can act on, one full prompt rewritten from vague to precise, twelve copy-paste AI prompts for website design covering the pages most businesses actually need, a table for choosing the right type of tool, and a round-by-round workflow for turning generated drafts into a site you would put your name on. It works the same way whether you build a website with AI prompts inside an AI website builder, a prompt-to-app tool, or a code editor with an agent inside.

Key takeaways

• AI websites look generic because the prompt omitted the goal, the reader and the brand, not because the model is weak.
• A usable web design prompt answers five questions in order: business goal, reader, identity, elements, format and constraints.
• Build in rounds. Structure first, then design tokens, then one section at a time, then a critique round.
• Name your accessibility target in the prompt. Models hit WCAG 2.2 AA when asked and skip it when not.
• Never let a model invent testimonials, prices or case studies. Ask for clearly marked empty slots.
• Adding an avoid list removes more template DNA than any number of positive adjectives.

How this guide was made. Every prompt below was written and run against general assistants, a prompt-to-app builder and a coding agent before publication. Accessibility figures come from the W3C specification, not from model output. Tool categories and behavior verified September 2026. No tool in this article paid for inclusion, and where a link is affiliate or partner it is marked as such.

What prompt engineering means for web design

Prompt engineering for web design is the practice of writing structured instructions that tell a generative AI model what a website must achieve, who it serves, how it should look and sound, what it must contain, and which technical standards it has to meet. A good prompt works like a creative brief and a technical spec combined into one document.

The skill has less to do with magic phrases than most lists of ChatGPT prompts for website design suggest. Current models don’t need to be told they’re world-class designers to produce a decent layout. What moves the output is context the model can’t guess: your customers’ objections, your real prices, the photos you actually have, and the fact that most of your visitors arrive on a phone from an Instagram link.

Websites also add a layer that ordinary writing prompts don’t have. A site is a system of repeated parts. Buttons, headings, spacing and colors have to stay consistent across every page, and they have to work for keyboard users, screen readers, and slow connections. So a web design prompt carries two kinds of information at once: creative direction that makes the site recognizably yours, and constraints that make it usable.

Why most AI web design looks the same

Language models work by predicting likely continuations, and layout and image models lean on statistical patterns in a similar way. Ask for a “modern, clean landing page” and you get the patterns most strongly associated with those words. That’s why AI-made sites keep landing on a handful of looks: a purple-to-blue gradient behind a centered headline, a cream background with a heavy serif title and a rust-orange button, or a near-black page with one neon accent color.

Copy suffers in the same way. Without real details, you get headlines like “Elevate your experience” and feature cards titled Quality, Innovation and Trust. Nothing in that copy is false. It could simply belong to any company, so it persuades nobody.

A second cause gets less attention. Many first attempts ask for everything in one message: brand, layout, copy, code and animation. The model has to make hundreds of small decisions in a single pass, and it settles each one with the safest default. Splitting the work into stages gives every decision more attention.

Adding adjectives rarely helps either. Stacking “stunning, sleek, premium, minimal” tells the model very little, because those words describe millions of different designs. Specifics do the work instead: a hex code, a typeface style, one honest sentence about who the customer is and what makes them hesitate before buying.

Six prompt mistakes that produce a generic site

Most weak output traces back to one of six habits. The pattern is always the same: the prompt describes a feeling instead of a fact, and the model resolves the ambiguity with its most common answer.

What you wrote	What the model does with it	Write this instead
“Modern, clean, premium”	Reaches for the most common look attached to those words, usually a gradient hero and rounded cards	“Paper white background #F7F3EC, slab serif headings, no gradients, no glassmorphism”
“For busy professionals”	Writes copy that could sell anything to anyone	“Homeowners comparing three quotes who worry about hidden costs”
“Add some testimonials”	Invents realistic names, cities and quotes	“Three clearly marked empty review slots. Do not invent reviews.”
“Make it pop”	Reverts to defaults, usually more contrast and a bigger hero	“Increase the pricing card padding to 32px and align both buttons to the bottom edge”
“Build me the whole site”	Makes hundreds of decisions in one pass, settling each with the safest option	One round for structure, one for tokens, one per section
“Make it like [competitor URL]”	Produces a near copy, with the licensing problem that implies	“Carry over the generous whitespace and the sticky booking bar, not the layout”

The fix is the same in every row. Replace the adjective with a fact the model cannot guess, and if you are still learning how to phrase that, our guide on how to write the perfect ChatGPT prompt covers the role, task, context, format and constraints pattern that sits underneath BRIEF.

Pick the right kind of AI tool first

The same prompt behaves very differently depending on where you type it. A chat assistant will write a sitemap and a single-file prototype, while an AI website builder turns a short business description into an editable template (our comparison of AI website builder tools covers pricing and features for the main ones). Prompt-to-app tools generate working React components, and coding agents edit real projects file by file. The category you pick decides how detailed your prompt needs to be and how much you’ll still do by hand.

Tool type	Examples	Best for	How to prompt it	Watch out for
General AI assistants	ChatGPT, Claude, Gemini	Strategy, sitemaps, copy drafts, single-page prototypes	Long, detailed briefs, with a request for a plan before any code	You still need hosting, a domain and a way to maintain the code
AI website builders	Wix, Framer, Squarespace, Weblium	Small business sites, portfolios, simple landing pages	Short business facts first, then refinements in the visual editor	Layouts carry template DNA, and code-level control is limited
Prompt-to-app builders	Lovable, Bolt.new, v0, Replit	Interactive landing pages, prototypes, MVPs	Section-by-section requests that name components and states	Credit-based pricing adds up during long revision cycles
AI coding agents	Cursor, Claude Code, GitHub Copilot, OpenAI Codex	Custom builds, WordPress themes, existing codebases	Project rules files, design tokens and small scoped tasks	Someone has to read, test and deploy the code
AI design and wireframe tools	Figma Make, Google Stitch, Relume	Sitemaps, wireframes and UI exploration before development	Clear descriptions of hierarchy and layout, then brand styles	Designs don’t always translate cleanly into production code
Image generators	Midjourney, GPT Image, Adobe Firefly, Ideogram	Hero art, illustrations, textures, mood boards	Style, composition, aspect ratio and empty space for text	License terms vary, and results can look like stock imagery

A useful rule of thumb: the less code control a tool gives you, the more your prompt should concentrate on content and brand, because the tool’s own component library will make most layout decisions for you. The more control you have, the more your prompt needs technical constraints.

Budget matters here too. Credit-based tools charge per generation, so a long revision cycle on a prompt-to-app builder can quietly cost more than a year of a subscription builder. If you expect to iterate heavily, price the iteration, not the first result.

The BRIEF framework for web design prompts

Strong web design prompts tend to answer the same five questions, and they work best in a consistent order. The acronym BRIEF makes the questions easy to remember, which suits the job, because a prompt is really a creative brief written for a reader that takes every word literally. Putting the business goal first gives every later instruction something to aim at.

No framework replaces testing. OpenAI’s own prompting documentation describes prompting as part art and part science and encourages experimentation, and that advice holds whether you’re writing for ChatGPT, Claude, Gemini or the assistant inside your site builder. BRIEF simply makes sure your first draft starts from the right information.

B: the business goal

Start with the one action the page exists to produce, such as booking a consultation, starting a subscription or requesting a quote. If the page has two goals, rank them. This one line often changes more of the output than any style instruction, because the model can now decide what to emphasize, where to repeat the call to action and which sections to cut.

R: the reader

Describe the visitor the way a good salesperson would. Age range and job title help a little. Intent and doubt help far more: what they’ve already tried, what worries them and what question they need answered before they click. “Homeowners comparing three quotes who worry about hidden costs” gives the model something concrete to design and write for. “Busy professionals” gives it nothing.

I: the identity

This is where look and voice get specific. Give real hex codes if you have them, or describe colors by reference, such as “dry soil brown, not chocolate.” Name typeface styles, like a slab serif for headings and a humanist sans-serif for body text. Describe the brand’s personality in plain words, then add an avoid list, which is the most underrated line in any design prompt. Telling a model to skip gradients, glassmorphism, handshake stock photos and the word “innovative” removes its favorite shortcuts.

If there are sites you admire, describe what you like about them instead of pasting a link and saying “make it like this.” You’ll carry over the principle, whether that’s generous whitespace, editorial photography or a sticky booking bar, without drifting into a copy of someone else’s work.

E: the elements

List the sections in order and say what each one must contain. Feed in real content wherever you can, including actual prices, testimonials you have permission to use, service areas and photos. Real material produces a site that could only belong to you, while placeholder text produces a template with your logo on it.

F: format and constraints

End with the rules. State what the output should be (a single HTML file, a React component, a WordPress block pattern or just an outline), which screen width to design for first and which standards apply. Accessibility targets, performance limits, framework choices and an instruction to check in before writing code all belong here. Constraints are the least exciting part to write, and they save the most rework later.

One prompt, before and after

Take a fictional example: Morro Alto, a small coffee roastery in Denver that buys directly from two family farms in Minas Gerais, Brazil, and sells beans by monthly subscription. The first attempt usually looks like this:

Make a modern website for my coffee roastery. It should look premium and clean.

Expect a dark hero image of latte art, a headline along the lines of “Elevate Your Coffee Ritual,” three cards labeled Quality, Freshness and Sustainability, and glowing testimonials from people who don’t exist. It’s a pleasant page that could sell any coffee on earth.

Here is the same request written with BRIEF:

You are a senior web designer and front-end developer. Build a one-page website.

BUSINESS GOAL
Morro Alto is a small coffee roastery in Denver that buys directly from two family farms in Minas Gerais, Brazil. The page has one main job: get visitors to start a monthly subscription. Secondary action: buy a one-time sampler box.

READER
Home brewers, roughly 28 to 50, who own a grinder and brew pour-over or espresso. They buy "specialty" bags at the supermarket and suspect the beans are stale. Their doubts: How fresh is it? Can I skip a month or cancel online? Which roast suits my brewer?

IDENTITY
Voice: warm, plainspoken, a little nerdy about coffee, never stiff or luxury-brand formal.
Colors: coffee-cherry red #7A1F2B, dry-soil brown #5B4636, paper white #F7F3EC, leaf green #3F6B4E as a small accent.
Type: a slab serif for headings, a humanist sans-serif for body text.
Avoid: purple or blue gradients, glassmorphism, latte-art stock photos, and the words "elevate", "journey" and "premium".

ELEMENTS, IN THIS ORDER
Hero: headline about roasting every Monday and shipping every Tuesday, a one-line subhead, a primary button labeled "Start my subscription" and a text link to "Try the sampler".
How it works: three steps (pick a roast, choose a grind, get beans within a week of roasting).
The farms: a short story about both farms with altitude, variety and processing method, plus two photo placeholders with descriptive alt text.
Plans: two cards (12 oz and 2 lb per month) with skip and cancel terms written plainly.
Reviews: three clearly marked empty slots for real customer quotes. Do not invent reviews.
FAQ: freshness, grind options, shipping times, cancelling.
Footer: email address, shipping policy link, Instagram link.

FORMAT AND CONSTRAINTS
Output one HTML file with embedded CSS and no JavaScript frameworks.
Design mobile-first; it must read comfortably at 360px wide.
Use semantic HTML: one h1, headings in order, and header, main, section and footer elements.
Target WCAG 2.2 AA: at least 4.5:1 contrast for body text, visible focus styles, labeled form fields.
Define all colors and font sizes as CSS custom properties.
Respect prefers-reduced-motion.
Give every image width and height attributes and lazy-load images below the fold.
Before writing any code, reply with the section outline and design tokens for my approval.

That prompt runs just under 400 words, which is normal for a full-page brief, and almost every line removes a guess. The model now knows the page has to overcome a freshness doubt, so the hero can lead with roast and ship days instead of adjectives. It knows the plans section must spell out skip and cancel terms, which subscription buyers look for before committing. The avoid list blocks its default look, and the hex codes give it a palette no template shares. Each of the three darker colors also clears 4.5:1 contrast against the paper white, so the palette is accessible before any code exists. The final line may be the most useful of all, since asking for an outline and design tokens first lets you fix the direction before a single line of CSS is written.

Notice the instruction about reviews as well. AI tools will happily invent convincing testimonials with realistic names and cities. Publishing made-up reviews erodes trust and breaks consumer protection rules in many countries, so ask for clearly marked slots and fill them with real quotes later.

Where to run your first draft

The first version of any brief is a rehearsal, and it is worth running somewhere that costs nothing to abandon. A free website builder like Weblium works for that stage, since its editor includes ChatGPT-powered writing and lets you test AI-drafted headlines and page structures on a free subdomain before you commit to a stack. Sites on the free plan are not opened to search engine indexing, which is fine while you are still testing messaging, and a paid plan adds a custom domain and search visibility once the page is ready for real traffic. Verified September 2026.

Run the vague version and the BRIEF version of the same page back to back. Seeing both rendered at full width, on the same day, in the same tool, makes the difference obvious in a way that reading about it does not.

12 AI web design prompts you can copy

The BRIEF above is the long form. These are the short forms you will reach for repeatedly. Each one assumes you have already pasted your approved design tokens at the top of the conversation. Swap anything in square brackets for your own facts, and resist the urge to leave a placeholder in. A bracket left unfilled is exactly the gap the model fills with a template.

Planning prompts

1. Sitemap from a business description

I run [business] in [city]. My customers are [reader, one sentence including their main doubt].
The site's main job is [one action]. Propose a sitemap with no more than [n] pages.
For each page give the URL slug, the one job it does, and the single question it answers.
Plain text only, no code, no design language.

2. Assumption audit (run this before anything else)

Before you propose anything, list every assumption you are making about my audience,
my prices, my competitors and my photography. Then list the five pieces of information
you wish I had given you, ranked by how much each would change your output.

Page prompts

3. Service page

Write the section outline and draft copy for a service page about [service].
Reader: [who, and what they have already tried]. Main objection: [objection].
Include: what is included and what is not, who it is not for, price or price range [figure],
what happens in the first week, and an FAQ of the four questions we get asked on every call.
No invented statistics. Mark any figure you cannot source as [VERIFY].

4. Pricing page

Design a pricing section with [n] tiers: [tier names and prices].
Make [tier] visually dominant. State the cancellation and refund terms in plain sentences,
not legal phrasing. Add a one-line "best for" under each tier naming a concrete situation.
Do not use the words premium, unlock or elevate.

5. Local business homepage

One-page site for [business] serving [service areas]. Main action: [call, book, visit].
Put the phone number, opening hours and address in the header and the footer, identically.
Hero must answer what you do, where you do it, and how fast, in under 20 words.
Include a map placeholder and a section for the three questions customers ask before booking.

6. Portfolio or case study page

Structure a case study page for [project]. Use this order: the client's situation,
the constraint that made it hard, what we changed, what measurably improved [metric and figure],
and what we would do differently. One image placeholder per stage with descriptive alt text.
No superlatives. If I have not given you a number, leave [METRIC] in place.

7. Contact page that people actually finish

Design a contact page with the fewest fields that still qualify a lead for [business].
Justify every field you keep. Add visible labels, inline error messages that say how to fix
the problem, and a sentence setting expectations for reply time.
Do not add a phone field unless you can explain why it is needed.

System and craft prompts

8. Design tokens

Propose design tokens for [brand personality in three plain words].
Give: colors with named roles (background, surface, text, muted text, accent, error),
a type scale in rem, a spacing scale, border radius, and button styles for
default, hover, focus and disabled. Check every text-on-background pair against
WCAG 2.2 AA and show the contrast ratio next to each. Output as CSS custom properties.

9. One signature element

Propose three signature elements that would make this site recognizable as [business]
and impossible to mistake for a template. Draw each idea from [industry], not from
current web design trends. Explain the reasoning for each, then tell me which one
survives on a 360px screen.

10. The generic check

Generate a deliberately generic version of this same page, the one you would produce
if I had only said "make a modern website for [business]".
Put the two side by side and list every element that appears in both.
Change each shared element unless I can give you a reason to keep it.

Review prompts

11. Accessibility auditor role

Review this page as a WCAG 2.2 AA auditor. List failures only, grouped by
perceivable, operable, understandable, robust. Include the specific success criterion
number for each. Do not fix anything yet. Flag anything you cannot verify from code alone.

12. Skeptical first-time visitor role

You are a [reader] landing here from [source] on a phone, with no prior knowledge of us.
Read only what is above the fold. Tell me what you think we sell, who you think it is for,
what it costs, and what makes you hesitate. Then tell me what you would need to see next.

Prompts 10 and 12 are the two most people skip and the two that change the output most. Asking a model to produce the generic version of its own work, then diff it, forces the template DNA into the open where you can delete it.

Build in rounds instead of one giant prompt

Even a strong brief shouldn’t go straight to finished code. Designers don’t jump from a kickoff call to a polished homepage, and an AI workflow shouldn’t either. Working in rounds keeps each decision small enough to review and gives you natural moments to steer.

Round one: structure and messaging

Ask for a sitemap, a section outline and draft headlines in plain text, with no code yet. Then push back. Ask the model to list the assumptions it made about your audience and the information it wishes it had. That single question often exposes gaps in your own thinking, like a missing shipping answer or a fuzzy difference between two plans.

Round two: a design system you can reuse

Once the structure holds up, ask for design tokens: a color palette with named roles (background, text, accent, error), a type scale, a spacing scale, border radius and shadow values, and button styles for hover, focus and disabled states. Save the approved version as a block of text and paste it at the top of every later prompt for the project. Each new page then inherits the same look instead of drifting. Keep the token block in a plain text file, not in your chat history. Chats get archived and context windows get truncated, and a design system that lives only in a conversation stops existing the moment you open a new one.

If you build with coding agents, that block belongs in the project’s rules or instructions file so the agent reads it automatically. Some teams go a step further and install skills, which are packaged instructions an agent loads for a particular kind of task. Anthropic’s frontend-design skill is a good example, because it pushes the model to plan a palette, a type pairing and one signature element before coding, then revise any choice that reads like a template default. You can find similar packages in our skills directory and borrow their approach for your own brand rules. Either way, your design decisions get written down once and applied every time.

Round three: one section at a time

Now generate code or layouts section by section, starting with the hero. Check each piece on a real phone as well as in the desktop preview. When something is off, describe the problem the way you’d brief a colleague: “The pricing cards feel cramped. Increase the inner padding to 32px, align both buttons to the bottom edge and make the 2 lb plan visually dominant.” Feedback like “make it pop” sends the model straight back to its defaults.

Screenshots help a lot here. Most current assistants accept images, so you can paste a capture of the rendered page and point at exactly what bothers you. Keep each round to one or two changes. When eight fixes arrive in a single message, some get missed and something that already worked can break.

Round four: make the AI critique its own work

Before you call a page finished, change the model’s role. Ask it to review the page as a skeptical first-time visitor, then as an accessibility auditor, and to list problems without fixing anything yet. Compare those lists with your brief, decide what matters, and only then request fixes. Follow up with real testing tools such as Lighthouse and an accessibility checker like axe, because a model reviewing its own output will still miss things.

Redesigning an existing site with AI prompts

Most people reading this already have a website. That changes the workflow, because you are not filling a blank page, you are deciding what to keep. Starting from scratch throws away the one thing AI cannot generate, which is everything you have already learned about what your visitors do.

Start by feeding the model evidence rather than instructions. Paste a screenshot of the current page, the existing copy, your top five landing pages from analytics, and the exact search queries people use to find you. Then run this:

Here is my current [page type] as a screenshot and as text.
It converts at [rate] and the most common support question afterwards is [question].
List what is working and must survive the redesign, what is actively costing me the action
I want, and what is simply neutral clutter. Rank the problems by likely impact.
Propose nothing yet.

The output of that prompt becomes the ELEMENTS section of your BRIEF. You now have a redesign grounded in what the page already does rather than in what looks current.

Two cautions. First, protect your URLs. If the rebuild changes slugs, map every old URL to its replacement with a 301 redirect before launch, because a redesign that silently drops your existing rankings is a net loss no matter how much better the page looks. Second, keep the copy that earns you traffic. Models reliably rewrite specific, keyword-bearing sentences into smoother, vaguer ones. Tell it explicitly which paragraphs are off limits.

Writing website copy with AI that sounds like you

Design gets most of the attention, yet copy decides whether a custom site actually feels custom. The most useful thing you can give a model is language that already belongs to your business: a few paragraphs you wrote yourself, notes from sales calls, answers from your support inbox and the exact phrases customers use in reviews. Ask it to match the rhythm and vocabulary of those samples and to reuse customer wording where it fits.

Give it a ban list too. Words like elevate, unlock, seamless, cutting-edge and transform appear so often in AI copy that readers skim right past them. Ask for specifics in their place: numbers you can prove, the names of real places, your actual turnaround time.

Headlines deserve their own small round. Request eight or ten options, each built on a different angle, such as the outcome, the main objection, the proof or the price. Shortlist two and show them to a handful of real customers before you pick one. Treat microcopy with the same care. A button labeled “Get my quote” tells people what happens next, while “Submit” tells them nothing.

Prompting for hero images, icons and photography

Imagery is where AI-built sites give themselves away fastest, and it is also the part people worry about most. The worry turns out to be partly misplaced. In an August 2026 study, Nielsen Norman Group showed 77 US adults six versions of a fictional consulting firm’s homepage that differed only in the hero image, three generated with AI and three real stock photographs. Participants were not told AI was involved. The AI-generated images were rated at least as trustworthy, professional and authentic as the stock photos, with the only statistically significant difference being a very small edge on authenticity.

The catch sits further down that same study, and it matters more than the headline. When participants suspected an image was AI-generated, they rated the page less favorably, and they sometimes suspected it wrongly about real photographs. The penalty attaches to the suspicion, not the technology. So the design goal is not “use AI images” or “avoid AI images.” It is “use images that hold up to a second look,” which is the same standard stock photography has always been held to.

That points at how to prompt. Ask for composition and function, not for beauty:

Hero image for [business]. Composition: [subject] in [setting], shot at [angle],
[natural / studio] light. Leave the left third visually quiet for a headline.
Aspect ratio [16:9]. No text in the image. No lens flare, no glossy skin,
no people looking directly at the camera.

Then apply a short review before anything ships. Check the hands, the text on any screen or sign, reflections in glass, and the background detail, since those remain the most common generation errors. Check representation deliberately, because models do not produce inclusive imagery by default and will happily put the same demographic in the leadership position every time. Confirm the tool’s license permits commercial use. And decide your disclosure position ahead of time rather than after a customer asks, since labelling requirements are tightening in several jurisdictions.

For the wider image and editing stack, our breakdown of the AI creativity tools replacing Photoshop and Figma covers where generation ends and cleanup begins.

One rule holds regardless: one honest photograph of your actual team, your actual workshop or your actual product will outperform any generated image on the pages where trust decides the sale.

Accessibility and performance: what AI skips unless you ask

Generated sites often look polished in a screenshot and fall apart when someone uses a keyboard, a screen reader or an old phone on a slow connection. Common problems include pale gray text on off-white backgrounds, buttons built from plain div elements, icon buttons with no labels, missing focus outlines and animation on every scroll. Performance issues follow the same pattern: oversized images, an entire animation library loaded for one fade effect, and fonts shipped in six weights when the design uses two.

The fix starts in the prompt, by naming the standard you’re aiming for. The Web Content Accessibility Guidelines published by the W3C are the reference many accessibility laws and public-sector policies point to, and WCAG 2.2 at level AA is a sensible target for most business websites. Models generally understand these success criteria when you ask for them by name, but left to their defaults they skip several.

Before you publish any AI-built page, run through this short check:

• Body text has at least 4.5:1 contrast against its background, and large text has at least 3:1.
• Every link, button and form control works with the Tab key and shows a visible focus style.
• Meaningful images have descriptive alt text, and purely decorative images use an empty alt attribute.
• The page has one h1, and the other headings follow a logical order.
• Form fields have visible labels, and error messages explain how to fix the problem.
• Images are compressed, sized for their containers and lazy-loaded below the fold.
• Animations respect the reduced-motion setting, and no content depends on them.
• Placeholder text, sample testimonials and dummy links are all gone.

Treat that list as a minimum. A five-minute walk through your own site using only the keyboard often catches problems an automated score misses.

SEO for AI-generated websites

Google doesn’t rank a site higher or lower because AI helped build it. What it evaluates is whether the pages are useful to the people who land on them. Google’s guidance on using generative AI content on your website draws the line clearly: AI can help with research and with structuring original work, but generating many pages without adding value for users can violate its spam policy on scaled content abuse. For anyone building with AI, one carefully made service page is a safer investment than fifty near-identical city pages spun from a template.

AI builders also leave technical gaps that are easy to close once you look for them. Check that every page has its own title tag and meta description, that URLs are short and readable, that important text isn’t baked into images, and that a local business shows the same name, address and phone number everywhere on the site. Ask the model to add structured data for your business type, then run it through Google’s Rich Results Test before publishing.

There’s a newer audience to write for as well. AI assistants now answer questions like “best coffee subscription for espresso” by summarizing what they find online. Plain, factual sentences about what you sell, where you operate, who it’s for and what it costs make it easier for search engines and chatbots alike to describe your brand accurately when someone asks. A short, specific about section and a clear pricing table often do more here than any technical trick.

It is worth knowing whether that is actually happening rather than assuming it. Ask the assistants directly what they say about your business, check whether the answer matches your site, and fix the page that caused the gap. If this becomes a recurring job rather than a one-off check, a category of AI visibility tools now tracks brand mentions across engines on a schedule, with the caveat that none of them can yet measure everything. For a site built in the last month, the manual version takes ten minutes and tells you most of what you need.

How long an AI-built page actually takes

The pitch for these tools is a website in sixty seconds. The honest number for a page you would put your name on is closer to a working day, and the time moves rather than disappears. Here is roughly where it goes for a single well-made landing page.

Stage	Time	Who does it
Writing the BRIEF	20 to 40 min	You, before opening any tool
Gathering real content (prices, photos, quotes)	30 to 90 min	You, and this is usually the bottleneck
Round one: structure and messaging	15 min	AI, with two rounds of pushback
Round two: design tokens	15 min	AI, then you check contrast ratios
Round three: section by section	60 to 120 min	AI, you reviewing on a real phone
Round four: critique and fixes	30 min	AI proposes, you decide
Real testing (Lighthouse, axe, keyboard walk)	20 min	You
Publishing, forms, analytics, redirects	30 to 60 min	You

Two things stand out. The AI-assisted steps are the short ones, and the longest single item has nothing to do with AI at all. Collecting real prices, real photographs and real customer quotes is the work that makes the finished site specific, and no prompt shortens it.

The same shape repeats once the site is live. Content updates, link checks and broken-form alerts are exactly the kind of recurring, rule-based work that AI agents built for work automation can genuinely absorb, provided someone still reviews what they change. Nobody should be approving unread edits to a live commercial site, whichever tool generated them.

What still needs a human

Generative AI is excellent at producing options and poor at knowing which option suits your business. It can’t tell that your best clients are architects who dislike hard selling, or that one honest photo of your team in the workshop will do more than any illustration. Positioning and taste, along with the final call on what to cut, remain your job.

Some responsibilities can’t be handed off at all. Someone has to confirm that fonts and images are licensed for commercial use, that the privacy policy and cookie banner match how the site really collects data, and that contact forms are protected from spam and never expose API keys in front-end code. Someone also has to watch real visitors use the site and keep it updated after launch. Generated code ages like any other code, and an unmaintained site turns into a security and credibility problem faster than most owners expect.

If you keep one habit from this guide, make it this one: write the brief before you open the tool. Twenty minutes spent on the business goal, the reader, the identity, the elements and the format will save hours of arguing with a hero section, and the finished site will look like it belongs to you rather than to the model’s idea of average.

Frequently asked questions about prompt engineering for web design