Paul Bakaus, der 2007 jQuery UI veröffentlichte, verwandelte seine persönliche Website in zehn Tagen mit Claude Code in eine Retro-Welt aus 4.096 Farben. Trotz Pixelszenen, live erzeugter Synthesizer-Musik und drei Minispielen lesen Besucher jeden Blogbeitrag ohne Umweg.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Das Retro-Webdesign von Paul Bakaus hat einen Endgegner namens Jirasaurus, der mit Scope Creep und Sprint Planning angreift.[1] Der frühere Google-Entwickler will damit ein Stück des persönlicheren Internets zurückholen.[2]
Das Wichtigste in Kürze
- Code, Grafik und Musik der Website entstanden per KI mit Claude Code.
- Alle Szenen nutzen die 12-Bit-Palette des Amiga und laufen ohne Framework in einem Ghost-Theme.
- Der Ton bleibt aus, bis Besucher ihn einschalten.
- Schwächen der KI-Entwürfe zeigten sich vor allem bei Animationen.
Wie funktioniert die Retro-Website technisch?
Der Browser zeichnet die Szenen live in kleine Canvas-Puffer und vergrößert sie in ganzzahligen Schritten, sodass jedes Quellpixel als scharfer Block erscheint. Die Farben stammen aus der 12-Bit-Palette des Amiga mit je 16 Stufen für Rot, Grün und Blau.[1]
Zwischentöne entstehen durch geordnetes Dithering: Aus der Entfernung verschmilzt ein festes Raster abwechselnder Pixel im Auge zu einer neuen Farbe. Dasselbe Verfahren bietet das Browser-Werkzeug Dither it an.
Die Musik entsteht per Web Audio live aus Oszillatoren, Rauschen, Filtern und Hüllkurven. Ein normaler Seitenwechsel würde jeden Ton abbrechen, weil der Browser das alte Dokument verwirft. Das Theme lädt die nächste Seite deshalb hinter einer Blende nach und tauscht nur den Hauptinhalt aus, der Audiokontext läuft im Takt weiter.[1]
Der Designauftrag steht als Kommentar im Quelltext und lehnt das dunkle Gründer-Portfolio aus Name, Porträt, Bento-Raster und Zeitleiste ab. Als Form setzte sich die Megademo aus der Demoszene durch, der Favorit von Bakaus‘ Werkzeug Impeccable unter sieben Vorschlägen. Impeccable soll den Einheitslook KI-generierter Webseiten aufbrechen.
Was macht die Website trotz Spektakel benutzbar?
Titel, Beschreibungen und Links bleiben echtes HTML, die Canvas-Szenen rahmen sie nur ein. Der Ton startet erst per Klick. Bei reduzierter Bewegung zeigt die Seite Standbilder, die Spiele lädt der Browser getrennt nach.[1]
Den stummen Start verlangt Chrome ohnehin: Ein Audiokontext, der vor der ersten Nutzerinteraktion entsteht, bleibt im Zustand „suspended“, bis ein Klick ihn freigibt.[3] Einen Startbildschirm strich Bakaus wieder, weil der Vorspann Besucher vom Inhalt fernhielt.
Die Entscheidungen decken sich mit zwei WCAG-Kriterien der untersten Stufe A. Kriterium 1.4.2 verlangt eine Stopp- oder Lautstärkeregelung für Ton, der automatisch länger als drei Sekunden läuft.[4] Kriterium 2.2.2 fordert einen Pausenmechanismus für automatische Bewegung über fünf Sekunden, auf Bakaus‘ Seite übernimmt ein Bewegungsschalter in der Kopfleiste diese Aufgabe.[5] Online-Shops und viele digitale Dienste verpflichtet das Barrierefreiheitsstärkungsgesetz seit Juni 2025 auf diese Maßstäbe.
Bewertung von 95 Musikentwürfen durch Paul Bakaus
Die Pixelwelt von Paul Bakaus überzeugt weniger durch ihren Endgegner als durch das, was sie weglässt: Autoplay und Startbildschirm. Diese Zurückhaltung unterscheidet eine persönliche Website von einem Showreel, das Besucher erst durchklicken müssen.
— Michael Dobler, Herausgeber Dr. Web
Was lernen Webdesigner aus dem KI-Experiment?
Mit Claude entstanden Code, Grafik und Musik schnell, bei Animation und Melodie misslangen aber viele erste Versuche. Bakaus prüfte deshalb jedes Ergebnis so, wie Besucher der Seite später begegnen, auch auf dem Smartphone.[1]
Die Pixelfigur rutschte beim Laufen, hüpfte oder hatte in einer Version drei Hände. Standbilder verrieten das nicht, erst die Prüfung in Originalgeschwindigkeit deckte die Fehler auf.[1]
In einem lokalen Bewertungslabor landeten von 95 Musikentwürfen nur zehn auf Bakaus‘ Favoritenliste. Ein späterer Feinschliff ließ die Raute im Impeccable-Logo wie eine Erdbeere aussehen. Sein Rat lautet, die freigegebene Version als Vergleichsmaßstab aufzubewahren.[1]
Für Agenturen und Designer, die ihren eigenen Code ausliefern, taugt das Projekt als Vorlage: Varianten entstehen per KI, die Entscheidung trifft der Mensch. Prüfen Sie gerne vor jedem Effekt, ob Inhalt und Navigation auch ohne ihn funktionieren, damit Ihre Unternehmenswebsite benutzbar bleibt.
Quellen
[1] Paul Bakaus: „I gave my website a boss fight“
[2] Paul Bakaus: „About“
[3] Chrome for Developers: „Autoplay policy in Chrome“
[4] W3C: „Understanding SC 1.4.2: Audio Control“
[5] W3C: „Understanding SC 2.2.2: Pause, Stop, Hide“
Mehr Newshunger?
- loading.dev: Knapp 30 Ladeindikatoren für React als Open-Source-Bibliothek
- Category Colors: Ein Optimierer sucht die am wenigsten falschen Diagrammfarben
- Cavalry: Kostenlose prozedurale Motion-Design-Software mit Lottie-Export fürs Web
- Craft bündelt die Feinheiten des Design Engineering in offenen, interaktiven Lektionen
- Barrierefreiheit als Designregeln: Der A11y Experience Guide übersetzt die WCAG-Norm
