Am Freitagmorgen existierte die neue Website von Jupiter and the Giraffe noch nicht im Code. Am Samstagnachmittag war sie bereits integriert. Neues Design, ein KI-Assistent, der Fragen zu unserer Arbeit beantwortet, eine neu gestaltete SEO-Struktur und 31 Commits, die 270 Dateien betrafen. Claude hat den Großteil des Codes geschrieben. Claude Design hat den Großteil der visuellen Konzeption übernommen.
Das ist die Überschrift, und sie stimmt. Allerdings wird dabei der Teil ausgelassen, der das erst möglich gemacht hat. Ich wusste schon genau, was ich wollte, bevor ich auch nur eine einzige Sitzung begonnen hatte.
Was gebaut wurde
Die Website läuft auf Next.js und Payload CMS, mit Postgres und Blob-Speicher auf Vercel. Daran hat sich nichts geändert. Was sich geändert hat, war alles, was darüber hinausging.
Die Neugestaltung begann bei Claude Design. Dort habe ich verschiedene Layouts ausprobiert, die mir gefielen als HTML exportiert und anschließend von Claude in die bestehende Codebasis als vollwertiges Designsystem integrieren lassen. Wir haben es „Run of Show“ genannt. Es besteht aus einem Stylesheet, einer Reihe gemeinsamer Komponenten, Farb-Tokens für den Dunkelmodus und der Schriftart „Archivo“, deren Breite auf 62 % reduziert wurde.
Drei Menüpunkte auf der Startseite von Claude Design: „Orbit“, „Programm“ und „Ablaufplan“.
Ablaufplan in den Farben der Website: dunkel, hell und orange.
Die Farben des Ablaufplans: feste Tokens, die Farbpalette und jedes semantische Token in hell und dunkel.
Es sind die kleinen Details, die dem Ganzen den letzten Schliff verleihen. Über der Hauptfigur ist Filmkorn zu sehen, zwischen den Seiten gibt es einen stufenförmigen 8-Bit-Ladebalken und eine Beratungsschaltfläche, die eingeblendet wird, sobald die Kopfzeile aus dem Blickfeld scrollt. Für die Schriftart und die Seitenübergänge hat Claude provisorische Testseiten erstellt, damit ich die verschiedenen Optionen nebeneinander vergleichen konnte, bevor ich mich für eine entschieden habe. Diese Vorgehensweise würde ich beibehalten.
Die Testseite mit den Wegwerf-Schriftarten, zunächst mit „Orbitron“, der alten Display-Schriftart…
…dann mit „Archivo“ auf 62 % der Breite verkleinert.
Eine KI-Suche, die nur weiß, was auf der Website zu finden ist
Die Frage, die oft gestellt wird, betrifft den Assistenten. Am unteren Rand jeder Seite befindet sich eine Leiste, und mit Cmd+K lässt sich eine Vollbildansicht öffnen. Wenn man ihn fragt, was wir für einen Kunden entwickelt haben oder was „Built To Fit“ kostet, antwortet er anhand der Inhalte der Website selbst und verweist dabei auf die entsprechenden Seiten.
Ich frage den Assistenten, was „Built To Fit“ kostet. Er gibt die Antwort von der Angebotsseite an und verlinkt dorthin.
So funktioniert es.
- OpenRouter bei jedem Modellaufruf. Ein API-Schlüssel deckt sowohl das Chat-Modell (Gemini 2.5 Flash-Lite) als auch das Einbettungsmodell (Voyage 4 Lite) ab. Der Wechsel des Chat-Modells erfolgt über eine einzige Umgebungsvariable, sodass ich nicht an einen bestimmten Anbieter gebunden bin.
- Vektoren in derselben Postgres-Datenbank. pgvector fügt der Datenbank, die das CMS bereits nutzt, eine Vektorspalte hinzu. Es gibt keinen separaten Vektordienst, für den man bezahlen oder den man synchronisieren muss.
- Abschnitte, deren Herkunft bekannt ist. Der Inhalt wird in Abschnitte von etwa 1.500 Zeichen mit einer geringen Überlappung unterteilt. Jeder Abschnitt wird vor dem Einbetten mit dem Seitentitel und dem Abschnitt gekennzeichnet.
- Nur geänderte Inhalte werden neu eingebettet. Jeder Chunk wird zusammen mit dem Modellnamen gehasht. Bei einer Neuindizierung werden unveränderte Inhalte übersprungen, und ein Wechsel des Einbettungsmodells erzwingt automatisch einen vollständigen Neuaufbau.
- Der Index wird stets auf dem neuesten Stand gehalten. Beim Veröffentlichen einer Fallstudie oder eines Artikels wird dieser beim Speichern neu indiziert. Fest codierte Seiten werden von einer GitHub-Aktion erfasst, die nach jedem Produktions-Deployment ausgeführt wird.
- Die Fragen der Besucher bleiben vertraulich. Chat-Anfragen werden ausschließlich an Anbieter weitergeleitet, die keine Daten speichern und ihre Bots nicht anhand von Eingabeaufforderungen trainieren. Eine Turnstile-Prüfung und ein signiertes Cookie verhindern, dass Bots die Kosten in die Höhe treiben, und jede Sitzung ist auf 30 Nachrichten begrenzt.
Die Abfrage selbst ist einfach. Man bettet die Frage ein, ruft die sechs relevantesten Textabschnitte ab und übergibt sie dem Modell unter der strengen Vorgabe, die Antwort ausschließlich auf der Grundlage dieses Inhalts zu formulieren. Ein Detail, das mir gefällt: Eine kurze Zusatzfrage wie „Und die Preise?“ wird mit der vorherigen Frage verknüpft, sodass das Thema beibehalten wird.
Im CMS gibt es außerdem ein Feld für private Notizen. Der Assistent liest diese als Hintergrundinformation, zitiert sie jedoch niemals und verlinkt auch nicht darauf.
SEO – Das wollte ich nicht aufgeben
Die alte Website basierte auf WordPress, und einige dieser URLs sorgen immer noch für Besucherzahlen. Eine Neugestaltung ist der einfachste Weg, dies unbemerkt zunichte zu machen. Daher war SEO von Anfang an eine wichtige Aufgabe und nicht etwas, das man erst nach dem Start in Ordnung bringen musste.
- Eine validierte Website-Konfiguration, sodass jede kanonische URL die www-Domain verwendet
- Canonical-, Open-Graph- und Twitter-Tags auf jeder Seite über einen einzigen Helper
- Eine native Sitemap und eine Robots-Datei, die das alte Plugin ersetzen
- Strukturierte Daten zur Organisation, zur Website, zu Artikeln, Fallstudien und Breadcrumbs
- Permanente Weiterleitungen von allen alten WordPress-URL-Mustern
- Echte 404-Fehler statt „Soft-404s“, keine abschließenden Schrägstriche bei internen Links und Suchergebnisse, die aus dem Index ausgeschlossen werden
- Eine llms.txt-Datei für KI-Crawler
- Playwright-Tests, die alle oben genannten Punkte überprüfen, damit später nicht unbemerkt Fehler auftreten können
Nach dem Start habe ich die neue Sitemap in der Google Search Console eingereicht und die alten URLs im Auge behalten, während sie auf ihre neuen Seiten umgeleitet wurden.
Wo ich noch nachsehen musste
Claude ist sehr gut darin, das zu erstellen, was du beschreibst. Es betrachtet die Seite nicht so, wie ein Besucher sie sieht, und manche Probleme treten erst dann zutage, wenn man sie selbst betrachtet.
Das Problem mit den Abständen war offensichtlich. Die Links in der Kopfzeile waren ursprünglich als Felder mit fester Breite angelegt, sodass kurze Wörter große Lücken um sich herum hatten und lange Wörter zu eng beieinander standen. Ich habe ihre Größe an den Text angepasst und einen gleichmäßigen Abstand dazwischen eingefügt. Auf breiten Bildschirmen befanden sich das Cookie-Banner und die schwebende „Buch“-Schaltfläche auf unterschiedlichen Höhen. Niemand konnte sagen, warum es seltsam aussah, aber es tat es, daher befinden sich beide nun 16px vom unteren Rand entfernt.
Manche Probleme waren überhaupt nicht auf den ersten Blick erkennbar. Bei „Next“ werden 404-Seiten anders dargestellt, sodass die Standard-Einstellungen für die Cookie-Zustimmung dort nie geladen wurden und der Google Tag Manager ohne sie lief. Die erste Zeile der Bilder in der Fallstudie wurde verzögert geladen, was das größte Bild auf der Seite verlangsamte. Keines dieser Probleme war schwer zu beheben. Man muss nur wissen, worauf man achten muss.
Die Leitplanken, die es mir ermöglichen, schnell zu fahren
Eine so schnelle Umsetzung auf einer Live-Website funktioniert nur, wenn Fehler nicht ohne Weiteres in die Produktion gelangen können.
- Datenbankmigrationen werden nur in Produktions-Builds ausgeführt, daher kann ein Preview-Zweig das Live-Schema nicht ändern.
- Das Skript, das Inhalte in die Produktionsumgebung überträgt, zwingt mich dazu, den Datenbank-Host einzugeben, bevor es irgendetwas schreibt.
- Die Eingaben im Kontakt- und Karriereformular werden validiert und mit Escape-Zeichen versehen, bevor sie in eine E-Mail übernommen werden
- Jede Funktion wurde mit Tests ausgeliefert, und bei der Überprüfung der KI-Arbeit wurden vor dem Merge ein Dutzend Sonderfälle entdeckt – von übergroßen Anfragen bis hin zu nur teilweise veröffentlichten Entwürfen.
Außerdem habe ich im Repo eine Datei namens „AGENTS.md“ abgelegt, in der die getroffenen Entscheidungen festgehalten werden. Welche Farbtoken verwendet werden sollen, wo sich die SEO-Helfer befinden, wie der Assistent indexiert wird. Jede neue Claude-Sitzung beginnt damit, diese Datei zu lesen, sodass der zweite Tag nicht das Ergebnis des ersten Tages zunichte gemacht hat.
Also zwei Tage?
Ja. Aber nur, weil ich die Vorgaben bereits im Kopf hatte.
Mir war klar, dass ich die Vektoren lieber in Postgres als bei einem anderen Dienst haben wollte. Mir war klar, dass ich alle Modelle hinter OpenRouter haben wollte, damit ich meine Meinung später noch ändern könnte. Mir war klar, dass die alten WordPress-URLs vom ersten Tag an umgeleitet werden mussten und dass die Einwilligung standardmäßig deaktiviert sein musste. Mir war klar, dass der Abstand falsch war, noch bevor ich genau sagen konnte, wo.
Claude tippte schnell. Zu wissen, was er tippen musste, dauerte zwanzig Jahre. Wenn man so etwas aufbauen will, ist das der Teil, in den man zuerst investieren sollte.