How to Vibe Code a Website, and Your First App in a Weekend

There is a version of this story where you type a sentence into a chat box, a website appears, you press publish and go to bed pleased with yourself. It does happen. It also tends to produce a site that looks lovely on your laptop and lets you down everywhere else: on a customer's phone with a weak signal, in a search engine, or with a visitor who wanted your phone number and could not find it.

This guide covers two projects, in the order most people meet them. First a website, from a blank page to a live link. Then a small app, as a realistic two-day weekend plan. You do not need to be a programmer. You need patience and a willingness to check your own work, because that is where good results come from.

Is a template the better answer?

Be honest about this at the start. For a simple site that presents your business, a template-based builder is often cheaper, more predictable and less likely to surprise you. Our business website builder is exactly that and does not use AI to write your pages, which is a strength when reliability matters most. Vibe coding a site makes sense when you want something more individual than a template allows, or when you enjoy the process and want to learn. If that is you, carry on.

Part one: a website, from blank page to live link

1. Gather your real material first

The biggest difference between a good AI-built site and a mediocre one is not the tool. It is what you give it. Collect two or three plain sentences about what your business does and who it serves, the pages you want (usually home, about, services or products, contact), real photos of your work or premises, your logo and colours, your phone, WhatsApp, email, address and opening hours, and prices if you are willing to show them. An AI with nothing to go on invents things: pleasant, empty paragraphs and random colours. Feed it real facts and it has something worth building.

2. Write a brief, not a wish

"Make me a nice website for my bakery" produces something bland. A better opening reads like a brief: "Create a simple website for a bakery in Ibadan called Adunni Cakes. Pages: home, cakes, about, contact. The main goal is for visitors to order by WhatsApp. Warm colours, made for phones first. The contact page needs a WhatsApp button, phone number and opening hours. Keep the code light and simple." That names the place and business, states the goal, lists the pages, describes the feel and asks for something lightweight, which is quietly the most important part.

3. Insist on light and fast

AI tools love impressive-looking sites with heavy animations, huge images and extras. For a small business that is usually wrong. Many visitors arrive on a phone, often on a modest connection and paying for data by the megabyte, and a heavy page loses them before it finishes loading. Ask for plain, light pages, compressed images sized for the screen, and no autoplay video or big sliding banners. Then open the site on your own phone using mobile data, not wifi, and count how long you wait. If you are waiting, your visitors are leaving. Free speed-checking tools from the search companies will score a page and point at what is slow, and a warning about image size is worth taking back to your AI tool as a task.

4. Build page by page, and read every word

Start with the home page and ask for small changes, looking at each result before the next. Read every word the AI writes, because it has habits that can hurt a business. It may claim awards you never won, years of experience you do not have, customers you never served, even glowing reviews it made up. That is dishonest, can put you on the wrong side of advertising rules, and a customer who catches it will not trust you again. Delete anything you cannot stand behind; a smaller set of true claims serves you better than a grand set of false ones. Replace filler that could describe any business with specifics: which areas you deliver to, how long an order takes, what people love most about you.

5. The basics that decide whether people find you

• A clear title for each page, like "Custom Cakes in Ibadan | Adunni Cakes", not the same title everywhere.
• A short description for each page, which search engines often show under the title.
• One main heading per page, with clear subheadings.
• Short descriptions for your images, which also help people using screen readers.
• Your address and phone as real text, not only inside a picture.
• A business profile on the major map services. For local businesses this often matters more than the site.

Nobody can honestly promise a ranking, and results take time. What you can do is remove the obvious obstacles so good work is not held back by a badly set-up site.

6. Test the contact route like a customer

For most small businesses the site exists to make people contact you, so test that above everything. Fill in the contact form from a different phone and email and confirm the message arrives. A form that looks fine and delivers nothing is one of the most common failures of quickly generated sites. Tap the WhatsApp button on a phone and check it opens the right chat with the right number. Tap the phone number. Click every link, including those in the footer. Then hand your phone to a friend who has never seen the site and ask them to find your opening hours, and watch where they hesitate.

7. Go live under your own name

Register your own domain, in your name, with your own email. Do not let a tool or helper register it in their account for you. Make sure the address starts with https. Find out where the files are stored and whether you can download them, write down every login and keep a copy with someone you trust, and if your tool can save your code to a service like GitHub, turn that on so every earlier version can be recovered.

8. Keep it alive

A site is not finished when it goes live. Opening hours change, prices change and links break, so review the whole site every few months. If you collect information through a form or mailing list, data protection rules apply in Nigeria and you owe visitors reasonable care. A short privacy note saying what you collect and why is sensible.

Part two: your first app, in a weekend

An app is different from a website. The moment something takes payments, holds accounts or stores customer details, it needs more care. So the plan below is deliberately modest, and the modesty is the secret. The people who finish choose something small. The people who do not usually set out to build the next big platform between Saturday breakfast and Sunday dinner.

Friday evening: choose the right idea (15 minutes)

Pick an idea that solves a small, real problem for you or someone you know, does one main thing (not three), does not handle money in the first version, does not hold sensitive information about other people, and can be described in two sentences. Good examples: a quote-request page for your workshop, an order tracker for a small tailoring business, a volunteer sign-up sheet, a price calculator for your own services. Bad examples for a first weekend: a marketplace, a payment app, a social network, or anything you describe with the word "platform." Write your two sentences on paper, for example: "A simple website where customers of my tailoring shop enter their phone number and see whether their outfit is being cut, sewn or ready. I can log in and update the status."

Saturday morning: plan before you prompt (1 hour)

Resist the urge to open the tool and type. Write a short plan with four parts: who uses it (the owner and each customer); what each can do (the owner adds and updates orders, a customer sees only their own); what information it keeps (name, phone number, outfit description, status, expected date); and what is not included yet (payment, reviews, photos, notifications). Writing the last list down means that when the temptation to add "just one more feature" comes, you have already decided.

Saturday late morning: pick one tool and start small (2 hours)

Choose one chat-and-preview builder and use its free tier. Do not spend the morning comparing tools; the comparison will eat your weekend (see how to choose a vibe coding tool). Your first prompt should be short and concrete: "Create a simple web app for a tailoring shop. The owner logs in and can add orders with customer name, phone number, a short description and a status of cut, sewing or ready. Show the orders in a list. Make it clean and easy to use on a phone." When the first version appears, judge it as a first draft. Click everything, add an order, change a status, and write down what is missing instead of typing every complaint at once. Then work through your notes one change at a time. It is slower than dumping ten requests together, but you always know what caused what, and if the tool bills by usage you waste far less.

Saturday afternoon: the customer side (2 hours)

Add the part customers see: "Add a page where a customer enters their phone number and sees only the orders linked to that number." Take extra care, because this is where it can go wrong in a way that matters. A page that lets people look things up can accidentally let them look up things that are not theirs. Check that a customer can only ever see their own orders, whatever they type. If you can, ask the tool to explain how it decides who sees what, and read the answer. Then save a checkpoint: connect to a code storage service like GitHub or use the builder's version history. It takes five minutes and is the best insurance against a bad Sunday.

Saturday evening: stop

Close the laptop. The hardest problems look simpler in the morning, and tired prompting is bad prompting. It is also when frustrated people make the large, risky changes that break everything.

Sunday morning: try to break it (2 hours)

• Create two customer entries and confirm neither can see the other's information.
• Open the app in a private browser window without logging in. Can you see anything you should not?
• Type absurd things into every field: very long text, letters where numbers belong, nothing at all.
• Press buttons twice, quickly.
• Use it on your phone, on mobile data, in a place with poor signal.
• Ask someone who has not seen it to use it without your help.

Fix problems in order of importance: people seeing information they should not first, failures on a phone second, cosmetic issues last.

Sunday afternoon: put it online properly (2 hours)

Register a domain in your own name with your own email. Keep anything like a password or key in the tool's settings for secrets, never pasted into a prompt or left visible. Write down every login (tool, domain, database or storage, code storage) and share a copy with someone trustworthy. Find out how your data is backed up and how you would restore it. If the answer is "I don't know," find out before real customers use it.

Sunday evening: decide what happens next

Before you feel too pleased, answer three questions honestly. Is this a practice project or the real thing? If it is real, who checks it? Someone who understands security should look at anything that stores customer details, even if all it holds is names and phone numbers. And when something breaks, who fixes it and how?

If you get stuck

Everyone gets stuck, usually on Saturday afternoon. Do not send the same request again with more force. First, describe the problem instead of the solution: what you expected and what actually happened. Second, ask the tool to explain what it thinks is going wrong before it changes anything. Third, if you are still going in circles after fifteen minutes, return to your last saved version and try a smaller change. Keep a short note of what you have tried; in the evening you will often see the pattern you missed. If something is truly beyond you, finish the parts that work and treat the stuck part as the thing to hand to someone experienced later.

What to expect, and what comes next

By Sunday night you can expect a small, useful, working tool and a much better sense of what these builders can and cannot do. You cannot expect a polished product ready for thousands of users, and you should be suspicious of anyone who says otherwise.

A sensible middle path for both a site and an app is to generate a first version and then ask a developer to review it, tidy the rough edges and take responsibility for the technical side. That is often quicker and cheaper than starting from nothing, and you keep the design you like. We can review what you have with our audit and rescue service, or build the proper version through a custom project request. If you are still weighing the risks, read is vibe coding bad?, and if you are brand new, start with what vibe coding is.