Ein mit Claude Code vibe-codiertes Bücherregal-Projekt

(balajmarius.com)

10 Punkte von GN⁺ 2025-12-30 | Noch keine Kommentare. | Auf WhatsApp teilen

Fallbeispiel eines persönlichen Projekts, das Claude Code nutzt, um rund 500 Bücher automatisch zu kategorisieren und zu visualisieren
Das Problem, dass bestehende ISBN-Scanner oder Goodreads rumänische Ausgaben nicht erkannten und daher scheiterten, wurde mit der OpenAI Vision API und von Claude erstellten Skripten gelöst
Nach der Extraktion von Metadaten mit 90 % Genauigkeit wurde der Rest manuell korrigiert und Cover-Bilder über Open Library und SerpAPI automatisch gesammelt
Mit Framer Motion wurden scrollbasierte Animationen und eine Darstellung der Buchdicke auf Basis der Seitenzahl umgesetzt, um eine Interaktion wie bei einem echten Bücherregal zu erzeugen
Gezeigt wird eine kollaborative Struktur, in der die AI die Ausführung übernimmt und der Nutzer ästhetische Urteile und Entscheidungen trifft; betont wird, dass „die Kosten der Ausführung sinken, Geschmack aber weiterhin Sache des Menschen ist“

Projektüberblick

Trotz eines Bestands von rund 500 Büchern ohne gepflegte Liste wurde mithilfe von AI-Tools ein System zur automatischen Kategorisierung und Visualisierung aufgebaut
Statt einer einfachen Tabellenkalkulation wurden die Ausführungsschritte mit Claude Code automatisiert, wodurch ein lange aufgeschobenes persönliches Projekt abgeschlossen werden konnte
Der Kern des Projekts lag weniger in technischer Perfektion als darin, Engpässe bei der Umsetzung zu beseitigen

ISBN-Scanner-Apps und Goodreads erkannten rumänische Ausgaben oder seltene Veröffentlichungen nicht, wodurch die Daten unvollständig blieben
Unvollständige Daten sorgten eher für zusätzliche Verwirrung, sodass das Projekt wiederholt ins Stocken geriet
Benötigt wurde nicht eine perfekte App, sondern eine Systemstruktur, die mit Unvollkommenheit umgehen kann

Die Datenbasis wurde auf Grundlage von 470 Fotos der Buchcover und Buchrücken aufgebaut
Ein von Claude geschriebenes Skript sendete jedes Bild an die OpenAI Vision API, extrahierte Autor, Titel und Verlag und speicherte die Ergebnisse in einer JSON-Datei
Dabei wurde eine Genauigkeit von etwa 90 % erreicht; die übrigen Fehler entstanden durch Beleuchtung, Beschädigungen oder Auflösungsprobleme
Die verbleibenden 10 % wurden manuell korrigiert; beim Hinzufügen neuer Bücher läuft dieselbe Pipeline anschließend automatisch

Über die Open Library API wurden Cover geladen, doch etwa die Hälfte war von niedriger Qualität oder zeigte falsche Bilder
Claude ergänzte ein System zur Qualitätsbewertung und Fehlerkennzeichnung; bei Fehlschlägen wurde stattdessen über SerpAPI eine Google-Bildersuche genutzt
Von rund 460 Büchern mussten nur 10 manuell nachgebessert werden, wodurch eine hohe Automatisierungseffizienz erreicht wurde

Statt eines einfachen Cover-Grid wurde eine visuelle Darstellung mit Fokus auf Buchrücken umgesetzt, die einem echten Bücherregal ähnelt
Claude übernahm die Farbauswahl-Extraktion (color quantization) und die Berechnung kontrastierender Textfarben
Mithilfe der Seitenzahldaten von Open Library wurde die Buchdicke abgebildet und durch leichte Variationen realistischer gemacht
Das Ergebnis war eine visuelle Textur, die einem echten Bücherregal nahekommt

Mit Framer Motion wurden scrollbasierte Animationen ergänzt, bei denen sich die Buchrücken beim Scrollen neigen
Anfangs kam es durch React-State-Updates zu Rucklern, doch mit motion values und spring animation wurde das behoben
Danach entstand eine flüssige Bewegung; die niedrigen Experimentierkosten ermöglichten wiederholte Versuche

Zwar wurde eine Infinite-Scroll-Funktion hinzugefügt, doch unterschiedliche Containerhöhen und Scrollfehler verschlechterten die Nutzererfahrung
Technisch funktionierte sie, war aber nicht nötig und wurde deshalb entfernt
Damit wird betont, dass die Entscheidung, „funktionierenden, aber unnötigen Code“ zu entfernen, die Rolle des Menschen ist

Weil horizontales Scrollen auf Mobilgeräten unkomfortabel war, wurde eine vertikale Stack-View ergänzt
Claude analysierte den bestehenden Code und nutzte Animationstiming, Farbauswahl-Extraktion und Scroll-Transparenzbehandlung erneut
Ohne gesonderte Erläuterung wurde eine vollständig neue Komponente erzeugt, was die Fähigkeit der AI zum Codeverständnis und zur Rekonstruktion zeigte

Claude schrieb den gesamten Code, doch der Nutzer traf folgende Entscheidungen
- Akzeptanz von 90 % Genauigkeit
- Manuelle Korrektur von 10 Cover-Bildern
- Wahl eines buchrückenorientierten Designs
- Entfernen unnötiger Funktionen
- Bestätigung der sensorischen/stilistischen Qualität der Animationen
Das Endergebnis ist ein webbasiertes Bücherregal, das 460 Bücher automatisch kategorisiert und visualisiert
Es zeigt ein Kollaborationsmodell, in dem die AI die Ausführung übernimmt und der Mensch Geschmack und Urteilsvermögen beisteuert
Das Fazit lautet: „Die Kosten der Ausführung sinken weiter, aber Geschmack bleibt weiterhin Sache des Menschen.“