ralf/vibe-coding-for-kids
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Lass Kinder mit Hilfe von Claude Code Jump 'n' Run Spiele entwickeln.
9 commits 1 branch 0 tags 70 KiB
Find a file
Exact
ralfschw 0a8e3f2526 Kaplay-Fallstricke 10-15, Haiku-Modell, Kaplay-Version gepinnt 
- Neue Lessons Learnt aus aktueller Session (plain-object-Komponenten,
  circle()-Physik, Einweg-Plattformen, bewegte Bodies, Deklarationsreihenfolge,
  Sprunghöhen-Formel)
- Kaplay auf 3001.0.19 exakt gepinnt (verhindert automatischen 4000er-Pull)
- Claude Haiku als Standard-Modell im Dev Container (schnellere Iterationen)
- KAPLAY_REFERENCE.md-Abschnitt mit vollständiger Fallstricke-Liste ergänzt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-29 23:20:06 +02:00
LICENSE LICENSE hinzugefügt 2026-05-27 22:20:29 +02:00
README.md README.md aktualisiert 2026-05-27 22:56:29 +02:00
SETUP-PROMPT.md Kaplay-Fallstricke 10-15, Haiku-Modell, Kaplay-Version gepinnt 2026-05-29 23:20:06 +02:00

README.md

Vibe Coding for Kids

Ein Setup, mit dem Kinder ohne Programmierkenntnisse eigene Browser-Spiele bauen können – allein durch Prompts an Claude Code, isoliert in einem Devcontainer.

Was ist das?

Dieses Repository enthält einen einzigen Setup-Prompt, den du in Claude Code in einem leeren Verzeichnis einfügst. Daraus entsteht in wenigen Minuten ein vollständiges Projekt:

  • Ein einfaches 2D-Jump-and-Run-Spiel (Kaplay + Vite), das im Browser läuft
  • Ein VS Code Devcontainer mit isoliertem Claude Code
  • Hot Reload: jede Änderung erscheint sofort im Browser
  • Bypass-Permissions im Container – das Kind wird nicht ständig nach Erlaubnissen gefragt

Ab da übernimmt das Kind. Es tippt Wünsche wie "Mach die Figur zu einer Pixel-Katze" oder "Lass sie höher springen", und Claude erledigt den Rest. Der Browser lädt automatisch neu.

Für wen?

Eltern (oder Lehrer:innen, Onkel, Tanten ...), die einem Kind im Alter von etwa 8–14 Jahren einen niedrigschwelligen Einstieg ins Spielebauen geben wollen, ohne dass das Kind selbst Code schreiben muss.

Voraussetzungen (Mac)

  • Docker Desktop (installiert und laufend)
  • VS Code mit der Extension Dev Containers
  • Claude Code auf dem Host (für claude setup-token)
  • Aktives Claude Pro- oder Max-Abo

Linux sollte funktionieren, ist aber nicht getestet. Auf Windows vermutlich mit WSL2.

Verwendung

1. OAuth-Token einmalig erzeugen

Im normalen Mac-Terminal:

claude setup-token

Browser-Login durchziehen, am Ende wird ein Long-lived OAuth-Token ausgegeben.

2. Token als Env-Variable verfügbar machen

In ~/.zshrc (oder ~/.bashrc):

export CLAUDE_CODE_OAUTH_TOKEN="<dein-token>"

Neues Terminal öffnen oder source ~/.zshrc.

3. Projekt anlegen

  • VS Code in einem leeren Verzeichnis öffnen
  • Im integrierten Terminal claude starten
  • Den kompletten Inhalt von SETUP-PROMPT.md als Prompt einfügen
  • Claude legt alle Dateien an und committet den Initial-State

4. In den Container wechseln

Command Palette → Dev Containers: Reopen in Container. Beim ersten Mal dauert der Build ein paar Minuten.

5. Fertig

Der Browser öffnet sich automatisch mit dem Spiel auf http://localhost:5173. Das Kind kann jetzt im VS-Code-Terminal claude tippen oder die Claude-Seitenleiste verwenden und loslegen.

Was bekommt das Kind als Startpunkt?

Ein bewusst minimalistisches Jump-and-Run:

  • Spielfigur (farbiges Rechteck), die nach links und rechts läuft und springt
  • Gemusterter Boden, ein paar Referenzobjekte für sichtbare Bewegung
  • Mitlaufende Kamera, hellblauer Himmel

Alles andere – Gegner, Sounds, Sprites, Levels, Power-Ups, Parallax – baut das Kind selbst per Prompt.

Was im Hintergrund passiert

  • Devcontainer mit bypassPermissions über /etc/claude-code/managed-settings.json und VS-Code-Settings, sodass weder CLI noch Extension Permission-Dialoge zeigen
  • OAuth-Token via containerEnv statt interaktivem Browser-Login – nötig, weil der OAuth-Callback aus dem Devcontainer nicht funktioniert
  • Vite Hot Reload mit usePolling: true, robust gegen Docker-Mac-Quirks
  • Kaplay als kleine, kindgerechte 2D-Game-Engine
  • Auto-Commit nach jeder Änderung via CLAUDE.md im Projekt-Root – ermöglicht zuverlässiges "Mach das rückgängig" (= git reset --hard HEAD~1) und "Geh ganz zurück zum Anfang" (= Reset auf Initial-Commit)

Sicherheit & Eltern-Pflichten

  • Der Token gibt vollen Claude-Code-Zugriff. Nutzung zählt gegen dein Quota.
  • Im Container hat Claude vollen Schreibzugriff auf das Projektverzeichnis und freien Netzwerkzugang.
  • Das Kind hat keinen Zugriff auf deine Host-Dateien – der Container ist isoliert.
  • Token einsehen und widerrufen: claude.ai/settings/claude-code.

Anpassung

Der Setup-Prompt ist auf ein Jump-and-Run zugeschnitten. Für andere Spieltypen (Snake, Pong, Top-Down-RPG, ...) den Abschnitt "Game-Anforderungen für Iteration 1" in SETUP-PROMPT.md anpassen – Rest bleibt gleich.

Lizenz

MIT

Hintergrund

Entstanden, weil ich meiner 10-jährigen Tochter einen niedrigschwelligen Einstieg ins Spielebauen geben wollte. Mehrere Iterationen, ein paar Stolperfallen (OAuth-Callback in Devcontainern, doppelte Permission-Systeme von CLI und Extension, Camera-Follow-Effekt der Bewegung unsichtbar macht) – hier ist das Resultat.