Heute in der Früh hab ich mir meine eigene 404-Seite am Handy angeschaut. Eine riesige Zahl, ein Satz in Cyan und ein Text, der in einer Spalte von gerade 180 Pixeln Breite steckte. Für einen Blog, der seit Jahren über KI und Webseiten schreibt, war das zu wenig.
Jetzt wohnt dort ein kleiner Roboter, der beim Laden herunterplumpst, dem Mauszeiger nachläuft und hüpft, wenn du ihn anklickst. Ich zeig dir, wie die Seite in einer Stunde entstanden ist: mit Claude und WPVibe, mit Mockup, Kritik und zwei Fehlern, die erst am Handy aufgefallen sind.
Kurz gesagt
- Eine gute 404-Seite schickt den Statuscode 404 und bietet trotzdem Suche, Links und einen Grund zum Bleiben.
- Vorlage für meinen Roboter war der StackChan von OpenELAB, auf dem bei mir die Assistentin Vinci läuft.
- Claude hat die neue Seite über WPVibe direkt in WordPress gebaut, nachdem ich ein Mockup für fünf Geräte freigegeben hatte.
- Zwei Fehler hat erst der Handy-Test gezeigt: abgeschnittene Artikelkarten und eine Überschrift in der Farbe des Hintergrunds.
- Der Roboter läuft komplett im Browser, ohne externe Anfragen und ohne Cookies, und bleibt stehen, wenn jemand reduzierte Bewegung eingestellt hat.
- 404-Statuscode
- die Antwort eines Webservers, dass unter einer Adresse nichts gefunden wurde.
- Soft 404
- eine Fehlerseite, die „nicht gefunden“ anzeigt, dem Browser aber mit dem Code 200 einen Erfolg meldet.
- WebGL
- eine Schnittstelle, mit der Webseiten 3D-Grafik direkt im Browser über die Grafikkarte berechnen.
- WPVibe
- ein WordPress-Plugin, das Claude über eine standardisierte Schnittstelle direkt mit einer Website verbindet.
Warum sind die meisten 404-Seiten so trostlos?
Ich kenne drei Varianten. Es gibt gar keine eigene Seite, und das Theme zeigt irgendwas zwischen leerem Weiß und Entwickler-Kauderwelsch. Oder es gibt eine, die vor Jahren jemand angelegt und nie wieder angeschaut hat. Die dritte ist die häufigste: eine große „404“, darunter „Seite nicht gefunden“, fertig. Korrekt, und trotzdem eine Einladung, den Tab zu schließen.
Die 404-Seite ist die eine Seite, die garantiert nur Menschen sehen, die gerade nicht gefunden haben, was sie gesucht haben. Genau dort entscheidet sich, ob sie bleiben.
Google sieht das ähnlich. In der Dokumentation zu HTTP-Statuscodes und Google Search steht sinngemäß, dass eine gute eigene 404-Seite beim Weitersuchen helfen und zum Stöbern einladen soll. Der Server schickt dabei trotzdem einen echten 404-Code. Wer jede tote Adresse einfach auf die Startseite umleitet, produziert Soft 404. WordPress schickt bei unbekannten Adressen von sich aus den richtigen Code, an der Technik scheitert es also selten. Es scheitert daran, dass sich niemand um die Seite kümmert.
Woher kommt der Roboter auf meiner 404-Seite?
Auf meinem Schreibtisch in Salzburg steht ein StackChan, ein kleiner Open-Source-Roboter mit Würfelkopf, Display-Gesicht und zwei Servos für den Kopf. Die Idee stammt vom japanischen Maker Shinya Ishikawa, M5Stack hat ihn im Jänner 2026 als fertiges Gerät auf Kickstarter gebracht. Meiner ist die Variante, die OpenELAB vertreibt, und auf ihm läuft Vinci, meine eigene KI-Assistentin. Wie mühsam der Start war, steht in neun Stunden Kampf mit meinem Desktop-Roboter, und wie er seine eigene Firmware statt der Kickstarter-Version bekommen hat, im Nachfolgeartikel.
Dieser Kerl war die Vorlage für die Fehlerseite: Würfelkopf, orange Augen auf schwarzem Visier, ein schwarzes V auf der Brust. Die Web-Version ist eine Spur knuffiger als das Original.
Damit es keine versteckten Deals gibt: Ich arbeite seit Kurzem mit OpenELAB zusammen. Da kommen in den nächsten Monaten noch spannende Hardware-Projekte, über die ich hier berichte, mit Kennzeichnung. Für diese 404-Seite hat mir niemand etwas bezahlt, der Roboter stand eh schon da.
Wie hat Claude aus meiner 08/15-Fehlerseite etwas Brauchbares gebaut?
Den Roboter hab ich Claude vorher beschrieben: wie er aussieht, was er tun soll, und eine Bedingung, über die ich nicht verhandle. Er darf nie einen Text verdecken und nie die Lesbarkeit beeinflussen. Herausgekommen ist ein WordPress-Snippet mit einer eigenen kleinen WebGL-Szene, ohne Bibliothek von außen, ohne Anfrage an fremde Server, ohne Cookies. Bei meinem Anspruch an DSGVO-konforme Seiten war das Voraussetzung.
Zuerst lief er auf der Startseite und auf der 404-Seite. Heute hab ich entschieden: Startseite raus, dort lenkt er nur ab. Claude hat sich über WPVibe den Code direkt auf meiner Website angeschaut, die Stelle gefunden und die Bedingung umgestellt. WPVibe verbindet Claude über das Model Context Protocol mit WordPress. Ich hab die Änderung freigegeben, das Snippet aktiviert, den Cache geleert.
Dann kam meine ehrliche Rückmeldung: „Geht. Allerdings ist die Optik der 404 echt nicht gut.“
Was hat die Vorschau gebracht, bevor irgendwas live ging?
Claude hat zuerst die bestehende Seite zerlegt, und die Liste war lang. Der Inhalt stand auf allen Geräten auf 50 Prozent Breite, der Roboter hing ohne Bezug ganz unten über dem Footer, die Unterzeile leuchtete in einem Cyan, das mit meinen Markenfarben nichts zu tun hat. Die H1 war die Zahl „404“ statt der eigentlichen Botschaft.
Statt gleich loszubauen, gab es ein Mockup mit fünf Artboards: Desktop, Tablet quer, Tablet hoch, Handy hoch, Handy quer. Das Handy im Querformat hätte ich glatt vergessen. Dort bleiben 390 Pixel Höhe, und steht der Roboter über dem Text, passt kein Text mehr ins Bild. Also stehen die beiden dort nebeneinander, wie am Desktop.
Ich hab „machen!“ geschrieben. Mehr Briefing war nicht nötig, weil das Mockup die Diskussion schon erledigt hatte. Genau so verstehe ich Vibe Coding: Den Code schreibt Claude, mein Job ist das Nein, bevor es teuer wird.
Beim Umbau im Elementor-Template ist Claude an drei Stellen vom Mockup abgewichen, damit die Seite zum restlichen Blog passt: Schrift der H1, eckige Buttons, Großbuchstaben über den Artikeln. Das stand in der Antwort dabei, statt still durchgezogen zu werden. Find ich gut.
Was ist beim Umbau trotzdem schiefgegangen?
Am Desktop hat alles gepasst. Dann hab ich die Seite am Handy aufgemacht, einen Screenshot geschickt und geschrieben: „Bei mobil hoch wird unten abgeschnitten.“
Claude hat die Seite in Chrome in einem 390 Pixel breiten Rahmen geöffnet und nachgemessen. Mein eigenes Blog-Grid-Widget, das die neuesten Artikel als Karten zeigt, hatte im Container keine feste Breite. Der Browser hat seine Höhe deshalb mit 32 Pixeln berechnet, obwohl die Karten rund 600 Pixel brauchen. Die Karten liefen einfach unter den Footer. Eine Einstellung auf volle Breite, und das Problem war weg.
Der zweite Fehler war fast komisch. Die Überschrift „Zuletzt erschienen“ war die ganze Zeit da, nur hatte sie die Farbe meines Hintergrunds geerbt. Dunkelgrau auf Dunkelgrau, im Quelltext sah alles korrekt aus. Jetzt ist sie orange.
Ob ich beide Fehler selbst bemerkt hätte, weiß ich nicht. Ich fürchte, erst dann, wenn mich jemand darauf angesprochen hätte.
Was macht der Roboter, wenn du ihn anklickst?
Beim Laden plumpst er von oben in seine Bühne, federt nach und winkt. Danach schaut er sich um, blinzelt und läuft ein Stück dorthin, wo dein Mauszeiger gerade ist. Klickst oder tippst du auf ihn, hüpft er. Auf Buttons und Links reagiert er nicht, damit niemand statt einer Suche einen Sprung auslöst.
Ist der Roboter nicht im Bild oder der Tab im Hintergrund, rechnet er nicht. Kommt die Grafikkarte ins Schwitzen, rendert er gröber. Und hast du im Betriebssystem reduzierte Bewegung eingestellt, bleibt er brav stehen.
Rund um ihn steht jetzt, was eine Fehlerseite braucht: eine klare Überschrift, die Blogsuche, Buttons zur Startseite, zum Blog und zum KI-Lexikon, darunter die neuesten Artikel. Tipp irgendeine Fantasie-Adresse auf digitalhandwerk.rocks ein und schau’s dir an.
Häufige Fragen zur 404-Seite
Wie viel Mühe ist dir deine eigene Fehlerseite wert?
Mich hat das Ganze eine Stunde gekostet. Ich hab beschrieben, kritisiert, freigegeben und einen Screenshot geschickt. Den Rest hat Claude über WPVibe erledigt, inklusive der Fehlersuche am Handy.
Deine 404-Seite braucht keinen Roboter. Schau sie dir aber heute einmal am Handy an. Steht dort nur eine große Zahl, weißt du, womit du nächste Woche anfängst.
