Spotify-Quiz aus dem Beifahrersitz: So sieht AI-gestützte Entwicklung wirklich aus

Spotify-Quiz aus dem Beifahrersitz: So sieht AI-gestützte Entwicklung wirklich aus

Apr 07, 2026 ai-assisted-development vibe-coding spotify-api rapid-prototyping tailscale web-development developer-workflow constraint-driven-design

Spotify-Quiz aus dem Beifahrersitz bauen: So sieht AI-gestützte Entwicklung wirklich aus

Ein Musikspiel namens Hitster macht die Runde. Du scannst einen QR-Code, Spotify spielt einen Song ab, Freunde raten das Erscheinungsjahr, und alle sortieren Karten auf einer Zeitleiste. Einfach, süchtig machend, und für ein Kartendeck zahlst du rund 25 Euro.

Ein Entwickler dachte: Warum kaufen, wenn ich es selbst baue? Der Haken: Er saß als Beifahrer auf der Autobahn von Österreich nach Deutschland. Bewaffnet mit Handy, Heimserver und Claude AI als Code-Partner.

Das Ergebnis? Ein packendes Beispiel dafür, was AI heute leistet – und wo es noch scheitert.

Grenzen als Treiber

Kein Fake-Experiment. Sondern ein echtes Problem unter harten Bedingungen. Kein Laptop. Keine Tastatur. Kein schnelles Nachschlagen von API-Docs auf dem Handy. Nur Sprachnachrichten an Claude über Telegram, Server für die Ausführung und Ausprobieren per Bildschirmcheck.

Der Tech-Stack blieb bewusst schlank: Reines HTML, CSS, JavaScript. Spotifys PKCE-Authentifizierung ohne Backend. QRCode.js zum Erzeugen, Html5-QRCode zum Scannen. Kein Ballast. Kein Überflüssiges.

Das zeigt: Enge Grenzen zwingen zu smarten Entscheidungen. Du greifst zu bewährten Tools mit klarer Doku. Keine wilden Abhängigkeiten. Komplexität bleibt handhabbar.

Erster Erfolg nach drei Stunden

Beim Burger-King-Stopp lief der Kern schon. QR-Code scannen, und Spotifys Playlist-Song dudelte aus dem Handy.

Überlegt mal: Von der Idee zum lauffähigen Prototyp in drei Stunden. Nur per Sprachbefehle und ferngesteuertem Code. Die Spotify-Auth – normalerweise ein Labyrinth aus Developer-Console, OAuth und Token-Debugging – klappte beim ersten Mal.

Geheimnis? Präzise Anweisungen. Der Entwickler beschrieb genau sein Ziel. Claude stellte Nachfragen, pickte passende Tools und baute. Bei Hürden wie Spotify-Testuser-Registrierung half eine menschliche Info. Kein Raten nötig.

Wo der Prozess glänzte

Fehler-Reporting per Client-Side revolutionierte das Debuggen. Auf Android Chrome ohne DevTools? Normalerweise raten, ändern, neu laden, wiederholen. Claude baute stattdessen Error-Logs ein, die direkt zum Server schickten. Der Entwickler sagte nur: „Button reagiert nicht.“ Claude las die echten Errors. Debuggen wurde fast so fix wie mit offenen Tools – ohne Stack-Traces zu wälzen.

Authentifizierung lief rund. PKCE braucht keinen Server, perfekt für Remote-Setups. Client ID aus Spotifys Console, an Claude weitergeben, und Login war drin. Paar Runden für Testuser, fertig. Ideal für handybasierte Workflows.

Tailscale Serve für schnelles Testen. Kein Port-Forwarding-Drama oder Firewall-Gefummel. Claude startete tailscale serve --bg --https=8443 http://127.0.0.1:8080, und die App war übers Tailnet auf dem Handy erreichbar. Ohne Doku-Suche. Funktioniert einfach.

UI ohne Design-Profi. Claude nutzte sein Wissen zu Patterns und Systems. Aus grobem Entwurf wurde schnell was Poliertes. Kein Figma, keine Farbdebatten.

Wo es hakt

Spotify-API streikte leise. Playlist-Endpunkt spuckte 403-Fehler, trotz korrekter Auth und Scopes. Claude wühlte in Browser-Logs und fand: Seit Februar 2026 deprecated /v1/playlists/{id}/tracks, jetzt /v1/playlists/{id}/items. Zwei Codezeilen Fix. Aber Diagnose dauerte – Errors waren nicht offensichtlich. AI debuggt systematisch mit Logs, ist aber kein Zauberer.

Rechtliche Mauer. Spiel fast fertig, Frage an Claude: „Warum kein öffentlicher Hitster-Klon?“ Antwort: Spotifys Developer Policy verbietet Spiele mit API. Abschnitt III: „Keine Games, inklusive Trivia-Quizzes.“ Kein Schlupfloch. Hitster hat Sonderregelung. Keine Clones, weil verboten – nicht wegen Tech.

Wichtige Lehre: AI macht ToS-Verstöße kinderleicht. Technik ist kein Hindernis mehr, Recht und Business schon.

Der Workflow im Detail

Sprachnachrichten an Claude Code via Telegram. Tailscale für Netzwerkzugriff. --dangerously-skip-permissions für freie Server-Befehle – unmöglich, jede Aktion per Handy zu bestätigen. Voice rein, Code raus, Handy neu laden. Drei Tools für einen engen Loop, der im Auto hält.

Was fehlt noch

Client-Error-Reporting ist Hack, kein Standard. Chrome DevTools Protocol würde Claude direkten Zugriff auf Console, Requests und DOM geben. Näher an echtem Dev-Setup.

Projekt beschränkt auf Heimserver mit IP und Tailscale. Cloud-Kram? Dann CLI, Env-Vars und Deploy-Chaos.

ToS-Block: Bleibt privates Demo für Freunde, kein Produkt.

Der Kern

AI ersetzt keine Entwickler. Es beschleunigt Iterationen. Engpass wechselt von „Bibliothek finden“ und „Doku knacken“ zu „Ziel klar sagen“.

Der Entwickler musste das Konzept kennen. Spotify-Recht erkennen. Tools wie Tailscale, PKCE, Vanilla JS wählen.

Neu ist die Zeit: Von Idee zu Prototyp in Tagen? Stunden. Stunden? Autofahrt.

Bessere Tools plus klare Worte plus Grenzen ergeben das.


Willst du Projekte rasanter umsetzen? NameOceans Vibe Hosting und AI-Tools sind für schnelle Iterationen gemacht. Von Prototyp bis Scale: Netzwerk, Domains und Setup für Tempo.

Read in other languages:

RU BG EL CS UZ TR SV FI RO PT PL NB NL HU IT FR ES DA ZH-HANS EN