Skip to content

Build a website with AI and a free template

AI chat assistants like ChatGPT, Gemini, Claude and Copilot are very good at two jobs that stop most people: writing the words for a website, and making small, careful changes to HTML. Pair one with a good template and the AI never has to invent the design. You get a professional layout and your own words in an afternoon. Here is how, with prompts you can copy.

Why start from a template?

When you ask an AI to build a whole website from nothing, you usually get something generic, with code that is hard to change later. A template already has a tested design that works on phones, readable code and working extras like menus and forms. The AI's job shrinks to filling it in, which is exactly what it is good at.

Before you start

  1. Pick a template and download it. Open index.html in your browser to see it.
  2. Make a copy of the folder. If an AI edit goes wrong, you can always go back.
  3. Write a few notes about your business: what you sell, who it is for, where you are, prices, opening hours, contact details. Real facts make the AI's writing good; without them it guesses.

Prompt 1: Write all the words

Open index.html in a text editor, select everything, copy it, and paste it into the AI with this prompt:

Here is the HTML for my website template. Rewrite only the visible text for my business.
Keep every HTML tag, class, id and attribute exactly as it is. Do not add or remove sections.

About my business:
- Name: [your name]
- What we do: [one or two sentences]
- Who it is for: [your customers]
- Location and hours: [details]
- Prices: [real prices]
- Phone and email: [details]

Write in a warm, plain voice, short sentences, no buzzwords. Do not invent facts, reviews,
awards or numbers: if something is missing, leave a clear [placeholder] for me to fill in.
Return the complete file.

Copy the answer back into index.html, save, and refresh your browser. Read every word: you know your business better than the AI does.

Prompt 2: Make one careful change

For later edits, give the AI just the part you want changed. It is faster and safer:

Here is one section of my website's HTML. [Describe the change, for example:
add a fourth service card for "Gift boxes" with the same design as the others.]
Keep the same classes and structure so it matches the rest of the site.
Return only the updated section.

Prompt 3: Change the colors and fonts

Our templates keep the colors at the top of style.css, under :root. Paste that part in:

Here are the color settings from my website's style.css. My brand colors are [colors or
"a calm green and warm cream"]. Suggest new values for each one, making sure the text stays
easy to read against its background. Return the updated :root block only.

Prompt 4: Fix something that broke

If a section looks wrong after an edit, paste the section and describe what you see:

After I edited this section, [what looks wrong, for example: the buttons are stacked and
the photo disappeared]. Here is the HTML. Find what is broken and return the fixed section.

If that does not work, put back the section from your copy and try a smaller change.

Prompt 5: Get ready for Google

Write a page title (under 60 characters) and a meta description (under 155 characters) for
this website, using my business name and location: [details]. Then list five questions
customers often ask about [your type of business], with short, honest answers I can check.

Other things AI is great for

  • Turning notes into a menu, price list or FAQ in the same style as the template.
  • Writing image alt text (the short descriptions screen readers use) for your photos.
  • Translating your page into another language.
  • Explaining what any piece of code does, in plain words, before you change it.

What to watch out for

  • Check every fact. AI can state wrong prices, hours or claims with total confidence.
  • No made-up reviews or numbers. Only publish real reviews from real customers, with their permission. Many countries treat fake reviews as illegal.
  • Keep the license. Leave the LICENSE file in the folder. Our footer credit link is optional.
  • Do not paste passwords or private customer data into any AI chat.
  • Images: AI image tools can make illustrations, but check each tool's terms, and never show AI pictures as real photos of your shop, team or work.

Then put it online

When it looks right, follow our guide on how to launch a website: domain, hosting, upload and going live. Every one of our Premium templates also includes a START-HERE.html file with the same steps, written for that template.

Keep reading