How to build a website with AI in 30 minutes: the 7 steps that work

Pick by what your visitors need to do, not by how a page looks in a screenshot. A restaurant needs menu, hours and booking; an agency needs work; a clinic needs trust and a way to book. Open the live demo of each candidate, scroll it on a laptop and a phone view, and look at its real speed numbers. The collections by business type, such as restaurant templates or agency templates, are a quick way to compare.

• Restaurants and cafés: menu, hours and booking in the first screens.
• Services and clinics: who you are, prices or a clear way to book.
• Shops: products, a bag and fast loading on a phone.
• Studios and portfolios: the work first.

A beautiful page that loads slowly on a phone loses visitors. Each template shows measured Lighthouse results and a smoothness check. Choose a lighter, drawn template if your visitors come from search or ads; choose a 3D one for a launch or a showcase, knowing it costs more to load. We explain the numbers in our measurement of 125 templates.

This is where a template becomes yours. In the template viewer, the "Make it mine" wizard asks for your business name, what you sell, city, phone, hours and email. You can upload a logo and the brand colours are picked from it in your browser. You choose a tone (friendly, premium or bold), pick which sections you want, and say whether you will use your own photos. The answers stay in your browser unless you sign in and save the project.

"Edit on page" lets you click any text or image on the live template and change it, like editing in a design tool. Your changes are added to your prompt.

Copy the finished prompt (a subscriber feature) and paste it into the AI tool you use. The AI tool guides and our comparison of where to paste a prompt list the exact steps for Claude, Cursor, Lovable, v0, Bolt, Framer and Webflow, taken from each tool's official documentation. If a tool limits how much you can paste at once, use "Build steps": the prompt is split into small steps (setup, hero, each section, footer, final polish), each with a checkbox and a line saying what you should see.

A prompt makes the AI interpret the design, so the result is close, not identical. If you need an exact match, start from the real source files and ask the AI only to edit them. See Prompt vs source files.

1. Open it on your own phone, not only on the laptop.
2. Scroll all the way down. Does every section appear?
3. Tap every button and link. Does the contact path work?
4. Read every word. Are the name, address, hours and prices right?
5. Turn on reduced motion in your device settings. Is everything still readable?

Common problems repeat: an animation does not play, the phone layout breaks, fonts look different, images are the wrong size, colours changed, the AI altered the motion values, or a deploy fails. The help page has a ready-made fix prompt for each of these. Paste the one that matches and describe what you see.

Upload the folder that holds index.html to a free host: Cloudflare Pages, Netlify or Vercel (note that Vercel's free plan is for non-commercial use). You get an address such as your-project.pages.dev, and you can connect your own domain afterwards. The step-by-step version is in How to put your AI-built website online for free.

Steps 1 to 3 take 10 to 15 minutes if you have your text and photos ready. The AI tool builds in a few minutes, and checking and publishing take another 10 or so. Thirty minutes is realistic for a simple site; a first attempt, a photo shoot or a long list of sections will take longer. If you would rather not do it yourself, the We set it up for you service does steps 3 to 7 for you.