Skip to main content
Zee Academy · Lesson 15 · Building a Website with AI: From Prototype to Production

A Quick Prototype with AI: Material, Prompt and a Vercel Preview

How to turn publicly available information about a business and a well-written prompt into a clickable website prototype within a few hours, and why a prototype beats a PDF or a sketch.

Next lesson

What you will learn

  • Material first: name, line of business, services, opening hours, address, colours and photos. Good sources are the existing website, social media and the business's Google profile.
  • A good prompt is a specification: who the visitor is, which sections are needed, what must be on the first screen, the tone of the text and examples. The more specific the prompt, the better the prototype.
  • AI prototyping tools (e.g. Claude, Google AI Studio or v0) turn a prompt into working code that you can run and edit straight away.
  • Live preview: the code goes to GitHub, and Vercel creates a preview link that opens on a phone. Decisions are made on a real page, not a sketch.

What goes into a prototype prompt

Write the prompt as a short specification:

  • Context: line of business, city, target visitors and the main goal of the page (a call, an enquiry or a booking).
  • Structure: a list of sections and what each one must show.
  • Content: real text, services and opening hours. Clearly mark anything that isn't real as a placeholder.
  • Style: colours, fonts and an example of a site you like.

From generated code to a preview link

The steps:

  • 1. Generate the code in the AI tool and run it.
  • 2. Review and correct the text and any details the AI guessed.
  • 3. Commit the project to GitHub.
  • 4. Vercel automatically creates a preview link you can share and open on your phone.

Step by step

  1. Push the prototype to GitHub

    git add . && git commit -m "feat: interactive prototype preview" && git push

    Sends the prototype to GitHub and automatically starts a Vercel preview deployment.

Tip from practice

Check every detail the AI filled in: opening hours, addresses, prices and reviews must be real. AI is happy to invent convincing details.