Vibe Coding Guide: Six Gates From Idea to Public Game
This vibe coding guide takes a game from idea to public link through six gates, and you only pass a gate when its condition is met. The most important one is the second: your AI maps the system and checks the map before anything gets built.
What are the six gates?
| Gate | You pass when |
|---|---|
| 1. One sentence | A stranger can repeat your game back to you |
| 2. The map | Every path through the map leads somewhere, and every rule holds |
| 3. Ugly but playable | Someone plays for five minutes without your help |
| 4. Feels right | You stop wanting to change the same thing |
| 5. Survives strangers | Three people finish it, and you watched without talking |
| 6. Public | A link works on a phone you have never used |
Why does the map come before the build?
Because an AI builds exactly what it pictured, and you cannot see that picture. Without a map, you only find out what it pictured when the game breaks. Skip this gate and you get a game that looks finished until someone takes a path nobody drew. There is no quality without it.
Here is an invented game. You row a ferry at night, and each passenger tells part of a mystery. The map has three parts.
Boxes and arrows, for what the game can be doing. Each box is a situation, and each arrow is what moves it on. Programmers call this a state machine, but you only need to read it. With Mermaid, a diagram is just a few lines of text, so your AI can show you the picture. If your chat cannot draw it, the Mermaid Live Editor can.
stateDiagram-v2
[*] --> Boarding
Boarding --> Crossing: passenger chosen
Crossing --> Arrived: river crossed
Arrived --> Boarding: more passengers tonight
Arrived --> Ending: last passenger gone
A scene map, for the story. What each scene needs, and what it changes. Walking the map turns up a problem at once: the widow's secret needs the doctor's crossing first, but the doctor can refuse to board. So one path reaches the ending with no way to learn it. You have just found a plot hole in two minutes, before anyone wrote a line.
Rules that must always hold. "A passenger is never on both shores." Your AI goes through every path and explains why each rule holds, pointing at the boxes that keep it true, or it shows you the path where it breaks. A rule with no explanation is a hope.
The map does not need to be big. A tiny game gets four boxes. But the moment things depend on each other, the map comes first. Fix the map, not the game, because changing an arrow takes seconds.
What do the other gates ask of me?
Gate 1. If you cannot say it in one sentence, the map will sprawl.
Gate 3. Build from the map in plain shapes. Common mechanics need not start from nothing: connected by MCP, Spielerando supplies your AI with blueprints, ready code and a wiki. A free login by Google or e-mail is all it takes, and it stays out of your game and code. See how it works.
Gates 4 and 5. Play, tune, watch. The map cannot tell you what is fun. When a change alters the game's logic, change the map first. The story pages help with characters and plot.
Gate 6. Start small, on a free web host.
Paste this to your AI
Here is my game in one sentence: [sentence].
Do not build anything yet. Make me the map:
1. Draw every situation the game can be in, and every scene, as a Mermaid diagram.
2. Write down the rules that must always hold, in plain words.
3. Walk every path yourself. For each rule, explain why it holds and point to the boxes and arrows that keep it true, or show me the path where it breaks.
4. List everything you are unsure of. Do not guess.
We fix the map together until that list is empty. Only then you build, from the map, and you tell me if the build ever has to differ from it.
Or skip this and connect the MCP: your AI then finds all of this by itself.Connect the MCP
How to check it worked
- Follow the arrows with your finger. Does any box have no way out?
- Pick one rule and argue with it. Ask: "Show me the path where this breaks."
- Ask for the shortest way to the ending. Does it skip anything that matters?
- After the build, try every arrow in the game. Is any of them missing?