How to use AI to design a website

Use AI in six steps. Write a brief, generate a few design directions, build in a tool that gives you real code, fix what AI gets wrong, structure the site for AI search, then keep improving it. AI is fast at first drafts and weak at judgment, accessibility and security. You stay the editor at every step.

I train small teams and large companies to build their sites with AI and then run them on their own. This guide is the process I teach. It works whether you use Lovable, Figma Make, Webflow or a plain chat assistant.

What can AI actually do in website design today?

AI is good at volume. It drafts layouts, copy, colour palettes, components and working code in minutes. In Figma's 2025 survey of 2,500 designers and developers, 22% already used AI to create first drafts of interfaces or websites¹.

AI is weak at the parts that need taste and accountability. It can't tell which of ten layouts fits your buyer. It doesn't check its own contrast ratios. It writes code that runs before it writes code that's safe.

Design still matters more, not less. In Figma's 2026 report, 90% of respondents said design is at least as important as before AI². AI raised the floor. It didn't raise the ceiling for you.

What are the six steps?

1. Brief. Write down who the site is for and what it must do.
2. Directions. Ask for three to five distinct design directions, then pick one.
3. Build. Generate the site in a tool that gives you code and hosting you control.
4. Fix. Check accessibility, security, speed and copy, because AI gets these wrong.
5. Structure. Make the site readable for AI search as well as for people.
6. Run. Keep editing with AI after launch, one small change at a time.

Each step below has the rules I use and the mistakes I see most.

How do I write a brief AI can follow?

The brief decides the quality of everything after it. A vague prompt gets a generic template. A specific brief gets something close to usable.

A good brief answers seven things:

• Who the visitor is and what they already know
• What they should do on the site (book, buy, call, sign up)
• Pages you need, with one job per page
• Proof you have: clients, numbers, reviews, credentials
• Voice in three words, plus one site you like and why
• Constraints: brand colours, fonts, platform, languages, legal pages
• Never list, such as stock photos, jargon or dark patterns

Put the brief in a file, then paste it into every tool you try. Google's Stitch now stores design rules in a plain-language file called DESIGN.md³. I recommend the same habit in any tool, because it keeps every prompt consistent.

You can build your brief with the free AI website brief builder. It turns your answers into a brief, a DESIGN.md file and a first prompt. For prompt patterns that work, see AI website design prompts.

How do I get design directions without a generic look?

Ask for contrast, not polish. The first output from any tool tends to look like every other AI site: a gradient hero, three feature cards, a testimonial slider. That's the average of its training data.

Three rules get you past it:

• Ask for three to five directions at once. Name them by a reference ("Swiss print", "quiet luxury", "field notebook"), never by adjectives like "modern" or "clean".
• Change one variable per direction. Type, density, colour or layout. Then you can see what each choice does.
• Pick with your buyer in mind. Show two directions to two real customers before you build. Their reaction beats your taste and the model's.

Then freeze the winner. Write its type scale, colours, spacing and component rules into your DESIGN.md. Every later prompt points to that file. My UI sizing guide has the button, card and radius rules I add to mine.

Which tool should I build in?

Pick the tool by what you need to own afterwards. Some tools give you a hosted site you edit visually. Others give you code you can move anywhere.

The category is growing fast. Lovable says it passed $500 million in annualised revenue in June 2026, with one million new projects a week⁴. That figure is company-reported. Webflow's AI site builder has generated multi-page sites with a design system since February 2026⁵, and Figma Make publishes straight to the web on paid plans⁶.

Speed to a first draft is similar across the leaders. The differences show up later, in who owns the code, how the CMS works and what it costs to leave. The full comparison is in AI website builders compared.

What does AI get wrong, and how do I fix it?

AI gets the invisible things wrong. The page looks finished, so nobody checks. These four need a human pass on every build.

Accessibility

Most of the web already fails here, and AI learned from the web. WebAIM's February 2026 scan of the top one million home pages found detectable WCAG failures on 95.9% of them, up from 94.8% in 2025⁷. Low-contrast text appeared on 83.9% of pages and missing alt text on 53.1%⁷.

Fix it by running an automated checker such as WAVE or axe on every page. Then tab through the site with your keyboard. If your business sells to EU consumers, the European Accessibility Act has applied to e-commerce services since 28 June 2025⁸.

Security

AI writes code that runs, and you can't see the holes. Veracode tested more than 100 models on 80 coding tasks in 2025. The models introduced security flaws in 45% of cases and failed to defend against cross-site scripting in 86% of relevant samples⁹.

Fix it by keeping secrets out of the front end, using the platform's own authentication, and asking a developer to review any form, login or payment flow.

Accuracy

AI invents facts with confidence. It will write a testimonial, a statistic or a certification you never had. Developers see this daily. In Stack Overflow's 2025 survey, 84% used or planned to use AI tools, yet 46% said they distrust the accuracy of the output¹⁰.

Fix it by reading every sentence as if a lawyer will. Delete any claim you can't prove.

Speed

Generated sites often ship heavy images, unused libraries and animation scripts. Google's Core Web Vitals give you the targets. Largest Contentful Paint under 2.5 seconds, Interaction to Next Paint under 200 milliseconds, and Cumulative Layout Shift under 0.1¹¹.

Fix it by testing in PageSpeed Insights, compressing images and removing every script you can't name.

The full pre-launch list is in the AI website launch checklist.

How do I make an AI-built site readable for AI search?

The web has two readers now, people and AI. A site that only works for people loses the second reader. Search is moving to answers. Pew Research tracked 900 US adults in March 2025 and found that people clicked a result link on 8% of visits when Google showed an AI summary, against 15% without one¹².

So the site has to be the source those answers quote. Four habits do most of the work:

• Answer first. Open each page with a short, plain answer to the question it targets.
• One claim per block. Short paragraphs that a model can lift without losing meaning.
• Structured data. Organization, Person, Service, FAQPage and BreadcrumbList schema that match the visible page.
• Consistent entities. Use the same name, address and descriptions everywhere, so models connect the facts.

Google doesn't penalise content for being AI-written. Its guidance rewards helpful, original content however it's produced¹³. What hurts is thin, unchecked content at scale.

This is the part I build for clients as context systems. For the steps to get quoted by assistants, read how to get your site cited by ChatGPT.

How do I keep improving the site with AI after launch?

Launch is the start of the loop. AI makes small edits cheap, so you can test and improve every week instead of redesigning every three years.

• One change per prompt. Big multi-part prompts break things you didn't ask to change.
• Version everything. Use the tool's history or a Git repository, so you can roll back.
• Measure before you prompt. Pick one number (enquiries, sign-ups, bookings) and change the page that moves it.
• Keep the DESIGN.md current. Every rule you add stops the same mistake from coming back.
• Review monthly. Run the accessibility and speed checks again. Content drifts.

This is the model I teach. People and AI work as one system. People hold the intent and the judgment. AI does the drafting and the repetition. Neither does the other's job well.

When should you bring in a designer?

Do it yourself when the site is simple, the stakes are low, and you have time to learn. A portfolio, a launch page or an event site is a good first AI project.

Bring in help when any of these is true:

• The site sells, takes bookings or stores customer data
• You need a brand, not just a layout
• You must meet accessibility law or a procurement checklist
• Search and AI visibility drive your leads
• You want your team trained to run the site after launch

I work in that last mode most of the time. I build the foundation with your team, then hand over the prompts, the DESIGN.md and the checks so you can run it. See website design, or weigh the options in AI website builder vs web designer.

Questions people ask