Headerpicture

Wie ich mit Cursor ein Monstermemory gebaut habe

Eigentlich wollte ich nur ein kleines Wochenend-Experiment starten...

Eigentlich wollte ich nur ein kleines Wochenend-Experiment starten – ein klassisches Memory-Game mit meinen kleinen Monster-Illustrationen. Am Ende wurde daraus ein voll funktionsfähiges, animiertes Mini-Game unter monstermemory.meimberg.io – komplett gebaut im Chat mit Cursor.

Von der Idee zum Code

Der Start war fast banal. Ich schrieb in Cursor:

“I want to create a memory game as a React / Next.js app.”

Und Cursor antwortete – mit fertigen Typdefinitionen, Komponenten und einer Projektstruktur, als hätte jemand das Spiel schon einmal gebaut. Nach ein paar Nachrichten stand das Grundgerüst.

export interface Card {
  id: string;
  imageUrl: string;
  isFlipped: boolean;
  isMatched: boolean;
}

Schon nach wenigen Minuten war das Spiel interaktiv. Karten ließen sich umdrehen, Paare wurden erkannt, die Logik funktionierte. Nur das Design war noch – sagen wir – etwas roh.

KI als Coder und Designer

Cursor generierte nicht nur Code, sondern gestaltete gleich mit:

  • Flip-Animationen und Hover-Effekte

  • Schatten, Farben, Spielstatistik

  • und sogar eine kleine „Congratulations“-Box, wenn man fertig ist

Ich musste kaum eingreifen. Als ich das erste Mal den Server startete, lief das Spiel bereits stabil. Nur ein Detail fiel auf: Die Bilder waren immer gleich.

“Does it always use the same pics?”

Daraufhin baute Cursor echten Zufall ein – jedes neue Spiel zieht jetzt andere Monsterbilder aus dem Pool. Ein kleiner Satz, große Wirkung.

Fehler? Kein Problem – wir debuggen zu zweit

Natürlich lief nicht alles glatt. Als ich den Effekt für falsche Paare ändern wollte, schrieb ich:

“I don’t like the darkening when you choose a wrong pair. Maybe we can use another effect?”

Darauf folgte eine faszinierende Debug-Session. Cursor schlug erst CSS-Tricks vor, testete Varianten mit rotateY(180deg) und Keyframes – und nach ein paar Schleifen entstand ein viel lebendigerer Shake-Effekt: Die Karten zittern kurz, glühen rot auf und drehen sich dann wieder um. Ein charmantes kleines Detail, das man mit normalem Debugging wohl kaum so schnell gebaut hätte.

Kleine Extras zum Schluss

Zum Finale kam der Feinschliff. Ich wollte oben einen Button, der zu meinen Shop-Bildern führt.

“Mach noch einen Button oben hin: Bilder Online Kaufen.”

Wenige Sekunden später war er da – erst blau, dann (nach einem weiteren Satz):

“make it orange and link it to https://luxarise.com/collections/monsterbilder”

Und das tat er dann auch. Live, funktional, responsiv. Es ist dieser Moment, in dem KI nicht nur hilft, sondern echte Geschwindigkeit bringt.

Fazit

Monstermemory war nie als Projekt geplant – es ist einfach passiert. Ein spontaner Gedanke, ein paar Chatzeilen, und plötzlich steht eine fertige App mit Next.js 15, TailwindCSS, TypeScript und animierten Komponenten. Kein Template, kein Framework-Starter, kein Copy-Paste. Nur ein Chat mit einer KI – und Neugier, was passiert.

Wie lange hat es gedauert? insgesamt vielleicht etwa 3-4 Stunden. Inklusive Serversetup, Domain und Github-Pipeline für ein vollautomatisiertes Deployment. Ich finde das schon recht spektakulär.

Das Ergebnis ist wirklich nice. Spielbar, charmant und technisch sauber.

Und wer die Monster lieber an der Wand statt im Browser sehen möchte:

Und? Kann das jetzt jeder?

Diese Frage liegt natürlich nah. Ich habe für das Projekt keine einzige Zeile Code selbst geschrieben – und trotzdem ist eine voll funktionsfähige App entstanden. Aber: das funktioniert nicht, weil KI plötzlich Softwareentwicklung ersetzt, sondern weil sie sich führen lässt.

Ich bin seit vielen Jahren Softwareentwickler und wusste bei jedem Schritt, wohin die Reise gehen muss: welche Architektur passt, wann man lieber revertet, wann eine Entwicklung in eine Sackgasse läuft (und das passiert häufig beim Einsatz von KI beim Coding), und welche Änderungen nicht bloß kosmetisch, sondern strukturell wichtig sind.

Ohne dieses Verständnis wäre das Projekt wahrscheinlich im Chaos geendet. Denn KI kann zwar umsetzen, aber nicht verstehen, warum etwas so oder anders gebaut werden sollte.

Darum bleibe ich dabei: Das hier ist kein „Vibecoding“. Es ist nach wie vor Engineering – nur mit einem ganz neuen Werkzeug. Ein erfahrener Developer kann seinen Output damit vielleicht verzehnfachen. Ein Anfänger hingegen wird in der Regel scheitern, daraus eine produktionsreife Anwendung zu machen.

gallery-photo
gallery-photo
gallery-photo
gallery-photo

Und wer die Monster lieber an der Wand statt im Browser sehen möchte: