Vibe coding 101: vibe a site tonight

Vibe coding means describing what you want in plain English and letting an AI tool write the code. It's how SideFrog was built: Claude, Notepad, GitHub and a $16 domain, by someone whose last job was sales. This guide is the version of that process we'd hand a friend.

1. Write the one-sentence version

Before you open any AI tool, write one sentence: who it's for, and the one thing it does for them. “A page where dog owners in my building can book a walk for tomorrow.” If you can't write the sentence, the AI can't build it either. It will build something, just not your thing.

2. Brief it like a new contractor

The AI is fast and knows nothing about your business. Tell it who uses the page, what they see, what happens when they click, and what it should not do. Paste in real wording and real examples. A good first brief is a few paragraphs, not a few words.

Then give it your point of view, because if you don't, it fills in the most average one. Say what you believe about the work, how it should feel, a look you like (an old diner menu, a 1970s travel poster, a brand you admire) and one detail only someone in your business would think of. Stripe's head of design, Katie Dill, calls the generic alternative “zombie UI”: pages that work but could belong to anyone.

Brief it like the contractor who started this morning. Skip the acronyms, and don't assume it read last quarter's deck.

3. Ask for the smallest thing that works

Ask for one page in one file, with no logins, no database and no accounts. You can add those later if anyone uses it. SideFrog's “Build the page” prompt, under every answer, is a ready-made brief for exactly this kind of first version.

4. Change one thing at a time

Ask for one change, open the page, check that it worked, then ask for the next. When something breaks, copy the exact error message and paste it back in. “It doesn't work” gets you guesses; the error message gets you a fix.

5. Use it like a customer before you call it done

AI makes things look finished very fast, often before they are. When it works, open it on your phone from a link, the way a customer would, and try to do the one thing it's for without explaining anything to yourself. Does it solve the problem? Where did you hesitate?

Then ask the AI to critique its own work: “Look at this as a skeptical customer. List the five things that feel generic, confusing or unfinished.” Fix the best few, and go one detail further than you think anyone will notice. SideFrog's “Build the page” prompt asks for this pass automatically.

6. Save your work when it works

GitHub is a free place to keep your files with every version saved. Each save point is called a commit. Make one every time something works, and you can always get back to the last good version when a change goes sideways. It's the undo button you'll wish you had the first time the AI “improves” something that was fine.

7. Write a handoff before the chat runs out

Long chats get slower, start forgetting decisions you made an hour ago, and eventually hit a limit. When that happens mid-project, the next chat starts from zero. A handoff file fixes that: a short note, saved as HANDOFF.md next to your code, that tells a brand-new chat what the project is, what's done and what's next. SideFrog is built this way, one session at a time.

Write one at the end of every working session, and any time the AI starts repeating old mistakes or forgetting what you agreed. Don't wait for the limit message. Ask for it like this:

We're wrapping up this session. Write a HANDOFF.md I can paste into a new chat so it can pick up exactly where we left off. Include: what the project is and who it's for, in two sentences; how it's built (files, tools, hosting, where the code lives); what's done and working; what we're in the middle of and the exact next step; decisions we made and why, including anything we tried and dropped; known bugs and loose ends; and the file names, web addresses and setting names I'll need. Never include secret keys or passwords. Keep it short and plain, written for someone who has never seen this chat.

Save it with your code and commit it, so it lives next to the work it describes. Then start the next chat like this, with the handoff and your current files attached:

Here's the handoff from my last session and my current files. Read them, tell me in three lines what you understand the project to be and what's next, and wait for me to confirm before changing anything.

That last line matters. It catches misunderstandings before they turn into changes you have to undo. Update the same file at the end of each session rather than starting a new one.

8. Put it online

A simple page can live for free or close to it on hosts like GitHub Pages, Netlify or AWS Amplify (what SideFrog uses), pointed at your domain. Before you share the link with anyone, read Before you put it on the internet. It's an hour of boring work that saves you from the expensive kind of surprise.

Questions people ask

Do I need to learn to code first?

No. It helps to learn a little as you go, like reading an error message or knowing which file does what, and the AI will explain anything you ask about. Start building and learn what the project needs.

Which AI tool should I use?

Any of the big ones can write a first version. Claude, ChatGPT and Gemini all work in a chat window. Tools like Cursor or Claude Code work directly on your files once you're comfortable. Pick one and stick with it for the first project.

What if it breaks something that used to work?

Go back to your last commit on GitHub, then ask for the change again in a smaller step. This is the main reason to save often.

What do I do when I hit the chat limit?

Start a new chat and paste in your HANDOFF.md and your current files, then ask the AI to tell you what it understands before it changes anything. If you didn't write a handoff in time, paste your files and describe where you were in a few sentences, and write the handoff at the end of this new session.

Why does my AI-built site look like every other site?

Because the AI gives you the most likely answer when you don't give it yours. Tell it what you believe about the work, how it should feel, a look you like and one detail only your business would think of, then have it critique the result as a skeptical customer.

Is code written by AI safe to put online?

It can be, but don't assume it. AI tools will happily put a secret key where anyone can read it. The next guide covers what to check before you share the link.

Read next

• Before you put it on the internetRead
• Six people use it. Now what?Read
• What it costs me to test an ideaRead