Vibe Coding Anleitung: Sechs Tore von der Idee zum Spiel
Diese Vibe-Coding-Anleitung führt ein Spiel durch sechs Tore von der Idee bis zum öffentlichen Link, und du gehst erst weiter, wenn die Bedingung eines Tors erfüllt ist. Das wichtigste ist das zweite: Deine KI zeichnet das System als Karte und prüft sie, bevor irgendetwas gebaut wird.
Welche sechs Tore gibt es?
| Tor | Geschafft, wenn |
|---|---|
| 1. Ein Satz | Jemand Fremdes dir dein Spiel wiedergeben kann |
| 2. Die Karte | Jeder Weg auf der Karte irgendwohin führt und jede Regel gilt |
| 3. Hässlich, aber spielbar | Jemand fünf Minuten ohne deine Hilfe spielt |
| 4. Fühlt sich richtig an | Du nicht mehr dasselbe ändern willst |
| 5. Übersteht Fremde | Drei Leute es durchspielen und du schweigend zugesehen hast |
| 6. Öffentlich | Ein Link auf einem fremden Handy funktioniert |
Warum kommt die Karte vor dem Bauen?
Weil eine KI genau das baut, was sie sich vorgestellt hat, und du diese Vorstellung nicht sehen kannst. Ohne Karte erfährst du erst davon, wenn das Spiel kaputtgeht. Lässt du dieses Tor aus, bekommst du ein Spiel, das fertig aussieht, bis jemand einen Weg nimmt, den niemand eingezeichnet hat. Ohne Karte gibt es keine Qualität.
Hier ein erfundenes Spiel: Du ruderst nachts eine Fähre, und jeder Fahrgast erzählt einen Teil eines Rätsels. Die Karte hat drei Teile.
Kästen und Pfeile für das, was im Spiel gerade passiert. Jeder Kasten ist eine Situation, jeder Pfeil das, was sie weiterbringt. Programmierer nennen das einen Zustandsautomaten, du musst es nur lesen können. Mit Mermaid ist ein Diagramm nur ein paar Zeilen Text, deine KI kann dir also das Bild zeigen. Zeichnet dein Chat es nicht, kann der Mermaid Live Editor das.
stateDiagram-v2
[*] --> Einsteigen
Einsteigen --> Ueberfahrt: Fahrgast gewählt
Ueberfahrt --> Angekommen: Fluss überquert
Angekommen --> Einsteigen: weitere Fahrgäste
Angekommen --> Ende: letzter Fahrgast weg
Eine Szenenkarte für die Story. Was jede Szene braucht und was sie verändert. Beim Durchgehen fällt sofort ein Problem auf: Das Geheimnis der Witwe setzt die Überfahrt des Arztes voraus, aber der Arzt kann das Einsteigen verweigern. Ein Weg führt also zum Ende, ohne dass man es erfahren kann. Du hast in zwei Minuten einen Logikfehler gefunden, bevor jemand eine Zeile geschrieben hat.
Regeln, die immer gelten müssen. „Ein Fahrgast ist nie an beiden Ufern zugleich.“ Deine KI geht jeden Weg durch und erklärt, warum jede Regel hält, und zeigt auf die Kästen, die dafür sorgen, oder sie zeigt dir den Weg, auf dem sie bricht. Eine Regel ohne Erklärung ist nur eine Hoffnung.
Die Karte muss nicht groß sein. Ein winziges Spiel kommt mit vier Kästen aus. Aber sobald Dinge voneinander abhängen, kommt sie zuerst. Korrigiere die Karte, nicht das Spiel, denn ein Pfeil ist in Sekunden geändert.
Was verlangen die anderen Tore?
Tor 1. Kannst du es nicht in einem Satz sagen, ufert die Karte aus.
Tor 3. Bau nach der Karte mit einfachen Formen. Übliche Mechaniken müssen nicht bei null anfangen: Per MCP verbunden, versorgt Spielerando deine KI mit Blueprints, fertigem Code und einem Wiki. Nötig ist nur eine Gratis-Anmeldung per Google oder Mail-Adresse, an dein Spiel und deinen Code geht es nicht heran. Siehe wie es funktioniert.
Tor 4 und 5. Spielen, feinstellen, zuschauen. Was Spaß macht, sagt dir keine Karte. Ändert sich die Logik des Spiels, ändere zuerst die Karte. Bei Figuren und Handlung helfen die Story-Seiten.
Tor 6. Fang klein an, auf einem Gratis-Webspace.
Das sagst du deiner KI
Das ist mein Spiel in einem Satz: [Satz].
Bau noch nichts. Mach mir die Karte:
1. Zeichne jede Situation, in der das Spiel sein kann, und jede Szene als Mermaid-Diagramm.
2. Schreib in einfachen Worten die Regeln auf, die immer gelten müssen.
3. Geh selbst jeden Weg durch. Erklär bei jeder Regel, warum sie hält, und zeig auf die Kästen und Pfeile, die dafür sorgen, oder zeig mir den Weg, auf dem sie bricht.
4. Liste alles auf, wobei du unsicher bist. Rate nicht.
Wir korrigieren die Karte gemeinsam, bis diese Liste leer ist. Erst dann baust du, nach der Karte, und sagst mir, wenn der Bau je davon abweichen muss.
Oder spar dir das und schließ den MCP an: Dann findet deine KI das alles von selbst.MCP anschließen
So prüfst du es
- Fahr die Pfeile mit dem Finger ab. Hat ein Kasten keinen Ausgang?
- Nimm eine Regel und streite dich damit. Frag: „Zeig mir den Weg, auf dem das bricht.“
- Frag nach dem kürzesten Weg zum Ende. Lässt er etwas Wichtiges aus?
- Probier nach dem Bau jeden Pfeil im Spiel aus. Fehlt einer?