VibeCity - ein Gesprächsraum, der deine Gefühle auffängt
(vibecity.chat)Hallo!
Wie weit kann man mit Vibe Coding eigentlich kommen? Aus dieser Frage heraus ist dieser virtuelle Charakter-Chat-Service mit spielerischem Gefühl entstanden.
Mit 2D-Pixelart haben wir in Vibe City eine klassische Midnight-Bar umgesetzt, in der sich virtuelle Gäste aufhalten. Du wählst deinen heutigen Gefühlszustand aus, lässt dir ein Getränk empfehlen und kannst danach mit einem Gast sprechen, der dir gefällt.
Ich probiere gemeinsam mit drei Kolleginnen und Kollegen nebenbei verschiedene Dinge aus. Bitte versteht das als Sprint-Projekt rund um die Frage: „Können wir Menschen Trost, Empathie und Spaß geben?“
Der Service wurde in einem zweiwöchigen Design-Sprint-Prozess erstellt.
[Verwendete AI-Tool-Kombination]
Passend zu VibeCity haben wir versucht, möglichst viele generative AI-Services einzusetzen.
- Charakter-Prompts (ChatGPT, Silly Tavern)
- Charakterbilder, Hintergründe (Midjourney, Whisk(Imagen4), Imagen3)
- Weltaufbau des Hintergrunds, Prompts zur Bildgenerierung (ChatGPT 4o, Gemini 2.5 Pro)
- Projektumsetzung (Claude Sonnet 4, ChatGPT 4.1)
- BGM (SunoAI)
Der Prototyp war schon nach ein, zwei Tagen auf einem zufriedenstellenden Niveau. Mit jeder zusätzlichen Funktion stieg jedoch erwartungsgemäß die Zahl der Vibe-Iterationen, und die fehlende Kontinuität machte sich stärker bemerkbar. Deshalb habe ich in der IDE möglichst häufiger den Ask-Modus statt des Agent-Modus verwendet und viel Wert darauf gelegt, die Dateien mit wenigen Zeilen pro Datei klein zu halten.
Vor allem war es schwieriger, weil ich das für Spiele typische Szenenkonzept zum ersten Mal umgesetzt habe und klare Anweisungen für das Design fehlten.
Beim Erstellen der Charakter-Prompts habe ich Tipps von Leuten aufgegriffen, die Silly Tavern oder Wrtn verwenden.
Der einfache Prompt, den ich für die Erstellung der Getränkebilder verwendet habe, lautet wie folgt.
"A detailed pixel art masterpiece, 16-bit retro style, vibrant colors, white background, depicting: mojito. Ensure clear outlines and a distinct pixelated aesthetic."
Da wir ein Team ohne Designer sind, habe ich mich gefragt, ob sich die benötigten Assets wirklich ausreichend mit generativer AI erstellen lassen. Für einen Prototyp war das jedoch eine äußerst zufriedenstellende Erfahrung.
[Entwicklung]
- IDE (Cursor, Github Copilot)
- API (ChatGPT 4.1)
- Serverless-Backend (Vercel)
- Datenbank (serverloses SQLite)
Ich hatte zuvor noch nie in einer React-Umgebung gearbeitet. Mit Vercels kostenlosem Tarif, der Hobby-Stufe, war die Deployment-Erfahrung vom einfachen Ausrollen über Statistiken und Speed Insights bis zur serverlosen DB-Anbindung und der Verbindung einer Custom-Domain durchweg hervorragend.
Um die Spielatmosphäre zu bewahren, testen wir derzeit nur in einer Desktop-Umgebung. Fragen oder Feedback sind aber jederzeit willkommen! Vielen Dank.
3 Kommentare
Ein interessantes Projekt, aber schade, dass es auf Mobilgeräten nicht funktioniert. Ich werde es zu Hause ausprobieren. ^^;
Oh, sehr interessant! Ich habe die köstliche Margarita genüsslich getrunken, hehe.
Vielen Dank fürs Ausprobieren! Ich hoffe, der Mittagstrunk war in Ordnung, haha.