Build a simple website with vibe coding

Vibe coding means building software by describing what you want and judging the result, instead of writing or reading the code yourself. In this tutorial you build a one-page website for a small bakery that way, from the first sentence to a live address on your own domain. The same steps work for a portfolio, a landing page or a small company site.

You need an OpenKBS account. If you don't have one yet, follow Create your account first. No coding knowledge is needed.

Step 1: Write down what the site is for

Before you open anything, spend two minutes on the content. The AI fills gaps with reasonable guesses, but it can't guess your opening hours. A short list is enough:

• who the site is for and what they should do on it (call, visit, send an inquiry)
• the sections you want
• real facts: name, address, phone, hours, prices
• the look you have in mind, or a site you like

For the bakery, that list becomes this prompt:

A one-page website for Sunrise Bakery, a small neighbourhood bakery in Plovdiv.
Sections: a hero with a photo and the line "Fresh bread from 7 am",
our breads and pastries with prices, opening hours (Mon-Sat 7:00-19:00),
the address with a map, and a contact form that emails orders@sunrisebakery.bg.
Warm colours, cream and brown, a friendly handwritten-style heading font.
It must look good on phones.

Specific beats long. "Warm colours, cream and brown" gives the AI something to work with. "Make it beautiful" does not.

Step 2: Start the project

On your dashboard you will see a box titled What will you build?. Paste the prompt there, give the project a name such as "Sunrise Bakery" and click Start building.

The OpenKBS Studio opens and the AI starts working right away. You can watch it in the chat or close the tab. The first version usually takes a few minutes.

Step 3: Review the first version

When the AI is done, the chat shows a short summary of what it built and a link to the live site. Open the link on your computer and on your phone.

Look at it the way a customer would. Is the phone number easy to find? Do the prices read clearly? Does the contact form send? Write down what is wrong or missing. Don't try to fix anything yourself.

Step 4: Change it by asking

Reply in the chat with what to change, one or a few things at a time:

Move opening hours above the products, customers look for them first.
Make the phone number a tap-to-call button on mobile.
Replace the stock photo in the hero with the one I uploaded.

To use your own photos or logo, upload them in the Studio and say where they go. A spreadsheet of products with prices works too: upload it and ask for the product section to be built from it.

Each change comes back as a new version on the same link. If something gets worse, ask the AI to undo it, or go back to an earlier version in the Version History.

A few prompts that tend to help on small sites:

• "Check the page on a 375 px wide screen and fix anything that breaks."
• "Add a title and description for Google, and a sitemap."
• "Make the contact form show a thank-you message after sending."

Step 5: Put it on your own domain

Until now the site runs on a temporary OpenKBS address. To move it to your own name, open the Cloud tab in the Studio and choose Domain. You have two options:

• Connect a domain you already own. You get name-server records to set at your registrar or hosting company. Once they take effect, the certificate and the site switch over automatically.
• Register a new domain. The price in credits is shown first, and nothing is bought until you confirm.

You can also ask in the chat, for example "connect sunrisebakery.bg". The AI walks you through the same steps. For the details, see Connect or register a domain.

Step 6: Keep it up to date

The site doesn't need a developer after launch. When the summer hours change or a new pastry joins the menu, open the project and write one sentence. If you would rather not open the Studio at all, mail coding lets you send the same requests by email and get the updated link back in your inbox.

When the site needs more than pages, such as online orders, a customer login or an admin panel, continue with Your first web app. It works in the same project.