How to build a website with AI: a beginner’s guide

This walkthrough shows you how to build a small business website with AI (vibe coding), using a fictional garden design studio as an example. Replace the sample details with your own business description, final content, imagery and visual direction, then use them with your preferred AI tool (Codex, Claude Code, Lovable and more).

1. Start with the why and what the webpage needs to do

Start with the reason you’re building the website. For our fictional business, Small Garden Studio, it’s to turn interest in its garden design service into consultation bookings. The homepage’s job is to help a homeowner decide whether the service is right for them and book a call.

Write down answers to these 3 questions:

• Who is this page for? Homeowners with small gardens who need help planning the space.
• What should they understand? Small Garden Studio designs practical outdoor spaces, from a first consultation to a plan.
• What should they do next? Book an introductory call.

Keep these answers beside you as you build. They give you a way to judge every section you add: does it help this visitor understand the service or move them toward the next step?

Your page can have more than one call to action, but they should have a clear hierarchy. Choose one primary action that matters most to the business, then support it with secondary actions.

2. Choose your AI tool

Pick one tool and stick with it for your first build. Popular AI website and coding tools include: Codex, Claude Code, Cursor, Lovable, Bolt.new, Replit, v0, Base44 etc.

Keep your first build in a single project so the tool can reference your earlier decisions, prompts, and files as you work.

3. Build one page at a time

Let's plan out the homepage first since this is where most people will land first. It'll give you somewhere to refine the messaging and visual style before repeating them across a larger site.

For Small Garden Studio, the first page needs 5 sections: a value proposition in the hero, services section, project examples, the design process, testimonials and a way to book a call. Then collect the information and imagery you'll want to share per section.

4. Ask AI for a first pass

Generate a first draft with AI using a prompt. Here’s a prompt you can adapt:

Build one homepage for Small Garden Studio, a garden design business for homeowners with small outdoor spaces. The page should explain our services, show examples of our work and encourage visitors to book an introductory call. Include an introduction, services, project examples, our process and a final booking section. Label the main button “Book a call” and link it to [booking URL]. Use the final content and photos attached. Where information is missing, show a clearly labelled placeholder; do not invent projects, testimonials or business claims.

Fill in the brackets with the your content.

5. Clean up the visuals

Once you're happy with the content and structure you can work on how the page looks. Choose a heading font, a body font, background and accent colours, a consistent button style and a way to crop your images. Apply those choices throughout the page.

For the garden studio, you might ask:

Keep the current content and section order. Use [warm off-white] backgrounds, [dark green] text and one green accent for the main buttons. Pair a readable [serif heading font] with a simple [sans-serif body] font. Use [generous] space between sections and crop the project photos to the same landscape shape. Keep body text at least 16px on phones, and check that the text and buttons have enough contrast to read clearly.

Fill in the brackets with HEX codes and font family names or files.

If you’re struggling to choose combinations that work, this is a great point to bring in a Veronica G Theme. It gives your website design guidelines for typography, colour, spacing and imagery to help the website feel polished, intentional and consistent.

If you're tight on time and would live a pre-structured website with the theme built in, explore the website templates.

6. Iterate and refine the page

Iterating means making a change, reviewing the results and deciding what to adjust next.

Work through the page section by section. Name the part you want to change to your vibe coding tool, explain the problem and describe the result you want.

Instead of “make this better”, try:

In the services section, make the three service names easier to scan by increasing their size to 20px and adding more space above each description. Keep the wording, colours and fonts. On phones, stack the three services in one column.

After each change, ask yourself: can I find the information more quickly? Is the main action still obvious? Did the change affect anything else on the page?

7. Build the next page and keep the visuals consistent

When the homepage feels right, move on to the next page. Start again by deciding its purpose first and make sure you reuse the design decisions you’ve already made so the website is visually consistent as this builds trust.

For Small Garden Studio, building out a Service page may look like this:

Add a Services page to this website. Its purpose is to help a homeowner understand what happens during a garden consultation and book one. Use the same navigation, footer, fonts, colours, buttons and spacing as the homepage. Include what’s covered, how to prepare, the process and the booking link. Use the content attached. Reuse the existing styles instead of creating a new visual style for this page. Add Services to the main navigation.

Open both pages side by side. Do the headings, buttons and image shapes look like they belong to the same website? Ask AI to record the agreed design rules in the project and reuse them for each new page.

8. Test the responsive design

Responsive design means the layout adjusts to the screen someone is using. Check every page on a phone and a larger screen, and make the browser window narrower to see what happens between them.

Work through these checks:

• Text: Can you read it without zooming? Are any headings or words cut off?
• Layout: Does the page fit the screen without sideways scrolling? Do columns stack in a sensible order?
• Navigation: Can you open and close the mobile menu and reach every page?
• Buttons: Are they easy to tap, and do they open the right destination?
• Forms: Send a test enquiry and confirm you receive it. Check that required fields show a useful message when left empty.
• Keyboard: Use the Tab key to move through links, buttons and form fields. You should be able to see which control is selected.

Give AI the page, screen size and problem when something looks wrong. For example: “On the Services page at 390px wide, the heading runs off the screen. Make it wrap within the page width while preserving the desktop layout.”

9. Publish your website

When the pages are ready, ask your chosen tool to walk you through publishing this project. Follow its current instructions and connect your domain when you’re ready to use it.

Open the public address in a private browser window so you can check it as a visitor. Visit each page, open the mobile menu and complete the main action again.

If you want the site to appear in search, check that the finished public pages allow indexing. Use the website launch checklist for the remaining checks.

Before sharing the link, perform a usability test by asking someone who hasn’t seen the website before: “What does this business do, and what would you click next?” Their answer will tell you whether your page is doing what you intended.

Questions before you start

Can AI build a website without me knowing how to code?

Yes, you can describe the pages and changes you want in everyday language, and an AI tool can generate the code; this is called vibe coding. You still need to provide accurate content, review the design and test what visitors will use.

Do I need a template to build a website with AI?

No. You can start with your own content and a blank page, as this walkthrough does. A template gives you a designed structure to adapt, while a theme gives you visual guidelines for a layout you choose. Compare templates and themes if you’re deciding which would help.

How do I ensure the website looks consistent on every page?

Keep the pages in the same project and ask AI to reuse your existing fonts, colours, spacing, buttons, navigation and footer. Approve the first page’s design before adding more pages, and compare each new page with it.

Is a website built with AI automatically ready for Google?

No, it still needs useful content, accessible public pages, descriptive titles and working links. Publishing alone doesn’t guarantee Google indexing. Follow the search checks in the launch checklist, then review your site’s performance once people begin finding it.