Mein Virtuelles Computermuseum entsteht

Und noch ein Projekt, was dank der Unterstützung von KI mit Claude Code möglich wurde. Mit ein paar wenigen Prompts als Anweisungen habe ich jetzt die Möglichkeit erhalten die Tabelle meiner Sammlungsstücke auf meiner Computermuseums-Seite auszulesen und als Input für die Seite Virtuelles Computermuseum zu nutzen.

Wenigstens war das die Absicht, als ich es mir an diesem Feierabend vor meinem MacBook gemütlich machte. Ich hatte schon vor wenigen Monaten in einer ChatGPT-Konversation gefragt, wie ich meine Website verbessern kann. Interessanterweise schlug mir damals die KI schon vor, dass ich auf eine der Stärken meiner Website setzen sollte und die Auflistung der Sammlungsstücke meines Computermuseums attraktiver aufbereiten sollte. ChatGPT schlug mir damals eine Kartenübersicht vor.

Computermuseum als Kartenansicht

Folgendermaßen argumentierte ChatGPT.

So könnte ich mir deine Computermuseumsseite als Kartenansicht vorstellen: Die Geräte werden deutlich visueller und jedes Exponat bekommt eine eigene kleine „Museums-Vitrine“.

Besonders passend für deine Sammlung fände ich:

• 3 Karten pro Reihe auf Desktop
• großes Foto des Computers als wichtigstes Element
• Baujahr als kleines Badge oben links im Bild
• darunter Name + 1–2 Sätze Beschreibung
• am Kartenfuß dezent „Erworben (eBay)“ / „Geschenk“
• rechts daneben Filter, z. B. Baujahr, Kategorie, Erwerbsart
• Sortierung nach Jahr, Name oder neuestem Zugang
• auf Mobilgeräten automatisch eine Karte pro Reihe

Der große Vorteil gegenüber deiner bisherigen Tabelle: Deine Fotos werden zum eigentlichen Mittelpunkt der Museumsseite. Gerade bei Geräten wie Sinclair QL, Dragon 32, VIC-20 oder Macintosh 512K dürfte das wesentlich mehr nach Museum und weniger nach Datenbank aussehen.

Das klang doch nach einem schönen Projekt, was man mit Claude Code umsetzen kann. Wiederum muss ich zugeben, dass ich kein guter Programmierer bin, aber ich weiß wie man exakte Prompts formuliert. Claude Code schlug mir eine ähnliche Struktur wie ChatGPT vor.

Er gab mir mehrere Möglichkeiten, wie ich das Projekt umsetzen könne:

• Option 1: HTML/CSS direkt in WordPress (Schnellste Lösung)
• Option 2: PHP-Plugin zum Abrufen der Beitragsdaten (Empfohlen für meine Situation!)
• Option 3: Tablepress Plugin + JavaScript Filter

Ich habe mich für die schnelle Lösung entschieden. Ich wollte ein schnelles Ergebnis erzielen. Obwohl Option 2 weniger Pflegeaufwand hätte, wenn später neue Zugänge in mein Computermuseum kommen.

Kategorien und Filtermöglichkeiten

Ich empfand es als sehr interessant, dass der Vorschlag kam eine Filterung nach dem Motto meines Computermuseums vorzusehen.

Das Motto meines Computermuseums ist:

Design-orientiert, Anglophil, Apple-esque

Claude Code forderte mich als erstes auf, meine Kategorien zu erläutern, die ich für die Klassifizierung meiner Sammlungsstücke nutze. Ich erstellte ihm eine Textdatei mit der Hierarchie meiner Kategorien. Daraus entwickelte er drei Filterbuttons passend zum Motto.

Ich schlug ihm dann noch vor, dass ich nach den Jahrzehnten filtern möchte, in denen diese Sammlungsstücke produziert wurden. E voila, wenige Prompts später hatte ich dann noch eine Filterebene, die man beliebig kombinieren kann.

Darstellung der Kartenansicht

Ich wollte genau das Bild auf der Karte sehen, welches ich auch in dem Beitrag als Titelbild zu diesem Sammlungsstück verwendet hatte. Claude Code sollte also die Tabelle mit den Sammlungsstücken nehmen und dann dem Link auf die Beitragsseite folgen. Und daraus sollte er dann den Link auf das Titelbild extrahieren. Und wenn er schon mal da ist, sollte er die Kategorien und den Textauszug aus diesem Beitrag ziehen. Und schon war das Kartenlayout und seine Inhalte auch gleich vollständig. Ich war begeistert.

Na ja, nach einer Prüfung stellte ich fest, dass all die deutschen Umlaute und gewisse Sonderzeichen in den Textauszügen falsch dekodiert wurden und nicht leserlich waren. Also nochmal Claude Code darauf aufmerksam gemacht. Er erkannte seinen Fehler und nutzte unterschiedliche Tools, um die Umlaute auf meinem MacBook perfekt zu dekodieren.

Er produzierte mir einen HTML-Code, den ich gleich verwenden konnte und in einen externen HTML-Block reinkopieren konnte. Das Problem war allerdings, dass diese Daten erst dann zusammengesammelt wurden, wenn die Seite mit dem HTML-Code aufgerufen wurde. Für 119 Einträge in meiner Tabelle war das alles zu langsam. Es dauerte mehrere Minuten bevor die Kartenansicht vollständig war.

So konnte es nicht umgesetzt werden. Es war zwar genau so, wie ich es haben wollte, dauerte aber viel zu lang.

Neustart mit einem neuen Konzept

Die Lösung, die ich dann als Nächstes vorgab, stellte sich als sehr herausfordernd für die KI heraus. Ich wollte zuerst die Tabelle mit meinen Sammlungsstücken ausgelesen und als CSV-Datei gespeichert bekommen. Aber diese Aufgabenstellung produzierte manchmal sehr merkwürdige Ergebnisse. Ich musste mehrfach die Ergebnisdatei überprüfen und Korrekturen einfordern. Token über Token verbriet Claude Code für all diese Versuche, bis das Ergebnis perfekt war. Diese Schritte ließ ich in ein Script schreiben, das ich im Finder starten konnte. Einmal gestartet wurde mir die immer aktuelle Tabelle mit meinen Sammlungsstücken erstellt. Zu jeder Zeile gab es neben dem Titel auch den Link auf den dazu passenden Beitrag und das Produktionsjahr.

Damit hatte ich eine Eingabedatei für den nächsten Schritt. Ich forderte ihn auf mir ein Script zu schreiben, das mir die Karten der einzelnen Sammlungsstücke erstellt und die Filtersteuerung dazu. Das Ergebnis aus diesem Script sollte in eine HTML-Datei geschrieben werden.

Herausforderungen für die KI

Dass diese Aufgabenstellung doch nochmal eine Herausforderung werden würde, hätte ich nicht gedacht. Es hatte ja schon mit dem ersten Versuch funktioniert, wo die Daten zur Laufzeit zusammengeladen wurden.

Aber eine externe HTML-Datei zu erstellen und dabei die Kommandozeilentools des Mac zu verwenden, schien eine komplexe Aufgabe zu sein. Mehrfach waren die Ergebnisse wenig zufriedenstellend.

Bei der Fehlersuche waren all die Statusmeldungen und die Fehlermeldungen sehr hilfreich, die das Script im Terminalfenster des Mac ausgab. So konnte ich mit diesem Feedback die KI immer dazu bringen andere Wege auszuprobieren bis die HTML-Datei perfekt war.

Ich startete das finale Script und die Verarbeitung lief einwandfrei durch. Der Ablauf wird sehr schön im Terminalfenster dokumentiert. Und diese beiden Skripte kann ich jederzeit wieder einsetzen, ohne dass ich die KI dazu benötige.

Zum Schluss kopierte ich dann noch den Inhalt der HTML-Datei in den externen HTML-Block auf meiner Webseite Virtuelles Computermuseum. Das Ergebnis ist einfach phantastisch. Eine Stunde Vibe Coding mit Claude Code und schon ist wieder ein großer Traum in Erfüllung gegangen. Nach der neuen Webseite mit dem IT-Geschichtskalender habe ich nun auch eine neue Seite mit meinem Computermuseum in Kartenansicht.

Fazit

KI LLMs wie ChatGPT von OpenAI und Claude von Anthropic sind schon mächtige Werkzeuge. Und wenn man ihnen auch die Ressourcen des Rechners zur Verfügung stellt, dann erlauben sie auch Nicht-Programmierern kleine Lösungen wie IT-Geschichtskalender oder virtuelle Computermuseen zu erstellen 😉

Ich habe Claude Code einen Ordner auf meinem Laufwerk mit von mir aufbereiteten Steuerdateien geöffnet, von denen er Daten lesen kann und eigenständig Dateien schreiben kann in denen die Ergebnisse (Scripte, HTML-Dateien, csv- und rtf-Dateien) gespeichert sind. Beim Abwickeln der Schritte mit lokalen Tools (grep, sed, python etc.) bittet mich Claude Code jeweils um Erlaubnis und erklärt genau die Aktionen, die er durchführen will.

Solche Erfolgserlebnisse machen Spaß noch tiefer in die Möglichkeit einzusteigen, die dann Agentische AI eröffnet. Natürlich kontrolliert und immer sich sehr der Risiken bewusst zu sein, die man eingeht, wenn man solche Agenten aus fremden Quellen einbindet.