Create a website with ai: a practical, step‑by‑step guide

Last month I needed a landing page for a side project and wanted it live in under two hours. I tried a couple of AI website builders, got stuck with generic templates, and wasted time tweaking colors and fonts. After working through the process myself, I can show you how to turn a simple prompt into a live site, where to host it, and what to check when the AI output looks off.

Why do AI website tools keep spitting out the same template?

Most guides promise that AI will “just work” and give you a unique design. In reality, many builders rely on a limited set of layout blocks and fill them with placeholder text. The result looks like a dozen other sites you’ve seen before. If you accept the first output, you end up with a cookie‑cutter page that doesn’t reflect your brand.

What most guides get wrong is they skip the step of shaping the prompt. A vague request like “make a website for my coffee shop” leaves too much room for the model to default to its training data. You need to give the AI concrete constraints: number of sections, tone, color preferences, and any required elements such as a menu or booking form.

Concrete prompt that yields a custom layout (with real tool and cost)

I used Durable.co because it lets you paste a prompt and get a full HTML/CSS bundle in seconds. The free tier gives you one generated site; the paid plan starts at $15/mo and includes custom domain hosting.

Here is the exact prompt I pasted into Durable.co’s AI builder:

Create a one‑page website for a mobile coffee truck named “Bean on Wheels”. Use a warm color palette with burnt orange and cream. Include a hero section with a tagline, a menu section showing three items with prices, a location map embed, and a contact form for catering inquiries. Use a friendly but professional tone. Make the layout mobile‑first and ensure the menu items are displayed as cards.

The AI returned a zip file with index.html, style.css, and a small script for the form. I opened index.html in a browser and saw a clean layout that matched my description. The only tweak I needed was to replace the placeholder map URL with my actual Google Maps embed.

Note: The free tier only lets you preview; to download the code you need a paid plan. At $15/mo you get unlimited exports, which is fair if you plan to build a few sites each month. If you only need one site, the free preview is enough to copy the HTML manually.

How to turn the AI‑generated HTML into a live site

1. Extract the zip file from Durable.co.
2. Open index.html and replace any placeholder text (like “Your Map Here”) with your own content.
3. If you want a custom domain, push the folder to a GitHub repository.
4. Enable GitHub Pages on the repo (Settings → Pages) and point it to the main branch /root folder.
5. Wait a minute, then visit yourusername.github.io/repo-name to see the live site.
6. Optionally, add a CNAME file to point a custom domain you own.

I’ve used this flow three times now and each deployment took less than ten minutes after the initial prompt work. The only hiccup I ran into was the form action pointing to a non‑existent endpoint; I replaced it with a free Formspree URL and the form started sending emails.

What breaks when you scale beyond a single page?

Durable.co’s AI is optimized for one‑page sites. When I asked it to generate a multi‑page layout with a blog and an archive, it gave me a single long page with repeated sections. The workaround is to generate each page separately and then stitch them together using a simple navigation bar.

Another common issue is the CSS file growing large because the AI duplicates styles for each block. I fixed this by opening style.css in VS Code, running a CSS cleanup tool (like cssnano), and removing duplicate rules. After the cleanup the file size dropped from 42 KB to 18 KB, which improved load time on mobile.

If you notice the site looks off on Safari but fine on Chrome, check for vendor‑specific prefixes. The AI sometimes omits -webkit- properties for gradients. Adding them manually solved the rendering gap.

Is the free tier actually usable?

Yes, but with limits. You can preview the AI output and copy the HTML by hand, which works for a single experiment. However, you cannot export the assets, connect a custom domain, or enable form handling without upgrading. For a solopreneur who needs to ship a site quickly, the $15/mo plan pays for itself in saved time.

I think paying $20/mo for an AI site builder is overpriced for a simple landing page—honestly, I’d rather spend that money on a domain and hosting and use the free AI preview plus a few manual tweaks.

My concrete gripe: Durable.co’s AI often repeats the same placeholder lorem ipsum text for service descriptions, forcing you to rewrite each block manually.

My concrete love: I love how the tool instantly generates a mobile‑responsive layout with a single prompt, saving me hours of fiddling with flexbox grids.

Price mention with opinion: $15/mo is fair for the speed you get, but the $30/mo plan adds features like priority support and extra storage that I rarely need.

— and good luck finding docs for this — the Durable.co help center is sparse, so I relied on community forums to learn how to embed a map.

If you’d rather skip the build and deploy a working version in an afternoon, we’ve packaged this workflow as a blueprint at deepusecase.com/vault.