Deine Website als Stadt: Ein n8n-Workflow vermisst sie und baut sie isometrisch auf

Update 7. November: Grafik-Upgrade. Die Stadt ist jetzt futuristisch und zeigt die echte Struktur der Website: Jeder Bereich ist ein Viertel, jede Unterseite ein Turm, und alles ist anklickbar.

Zuerst ausprobieren: Deine Website als Stadt. Domain eingeben, auf „Stadt bauen“ drücken, und nach einigen Sekunden steht die Stadt. Wer keine Domain zur Hand hat, nimmt den Demo-Knopf mit daniele-michelin.com.

So liest man die Stadt

• Mitte = Startseite: Der leuchtende Turm in der Mitte ist die Homepage, mit einem Leuchtfeuer. Mehrsprachige Seiten bekommen farbige Ringe, einen pro Sprache.
• Viertel = Bereiche der Website: Der Workflow liest alle URLs der Sitemap und gruppiert sie nach dem ersten Pfad. Jeder Bereich, etwa /blog oder /tools, wird eine sechseckige Plattform mit Hologramm-Schild und Seitenzahl. Bis zu zehn Viertel, der Rest landet im Viertel „…“. Übersetzte Bereiche wie /fehler, /en/errors und /it/errori zählen zusammen.
• Türme im Viertel = Unterseiten: Die größten Unterbereiche stehen als beschriftete Türme im Viertel, die Höhe wächst mit der Zahl der Seiten.
• Alles ist anklickbar: Ein Klick auf ein Viertel oder einen Turm öffnet genau diesen Bereich der Website. Die Stadt ist damit eine begehbare Sitemap.
• Lichtbrücken = Ladezeit: Von der Mitte zu jedem Viertel laufen Datenpakete. Bis 600 ms sind sie schnell, darüber langsam, über 1500 ms blinkt rot „Stau“.
• Energiekuppel = Security-Header: Sechs Emitter für HSTS, CSP, nosniff, Frame-Schutz, Referrer-Policy und Permissions-Policy spannen eine Kuppel über die Stadt. Fehlt ein Header, flackert an seiner Stelle ein rotes Leck.
• Energiekern = TLS, Antenne = E-Mail: Der Kern am Eingang zeigt die Resttage des Zertifikats, die Antenne sendet grün, gelb oder rot je nach SPF und DMARC.
• Stadtplan: Unter der Grafik steht derselbe Plan als Liste mit Balken, für alle, die lieber lesen als schauen.

Was der Workflow zeigt

• Erst prüfen, dann parallel: Der Webhook ruft zuerst eine Prüfstelle auf. Sie misst Header, SPF und DMARC, TLS und Antwortzeit und liefert die endgültige Adresse nach Weiterleitungen. Danach laufen drei HTTP-Knoten gleichzeitig: Startseite, sitemap.xml und sitemap_index.xml.
• Merge: Ein Merge-Knoten mit drei Eingängen wartet, bis alle Antworten da sind. Ist die Sitemap ein Index, lädt der Workflow bis zu acht Teil-Sitemaps vom selben Host und rechnet die Seitenzahl hoch. Der Weiterleitung von WordPress auf wp-sitemap.xml folgt er einmal.
• Rechnen macht der Code: Der Code-Knoten „Stadt vermessen“ zählt Seiten, Kilobyte, Skripte und Bilder und erkennt 40 Technologien an Headern und HTML. Die KI rechnet nichts.
• KI mit Regeln: Der Stadtführer ist gpt-oss-120b bei IONOS in Deutschland. Er bekommt die Messwerte als JSON und darf nur diese Zahlen verwenden. Drei bis vier Sätze, höchstens 380 Zeichen, Schwächen mit freundlichem Humor, keine Beleidigungen, keine Emojis, Antwort nur als JSON.
• Fallback: Alle HTTP-Knoten laufen bei Fehlern weiter. Antwortet die KI nicht oder zu knapp, baut ein Code-Knoten den Stadtführer aus denselben Zahlen nach einer Vorlage. Die Stadt steht also immer.
• Teilen mit Bild: Der Server speichert die Stadt mit Nummer und Link und zeichnet eine Skyline als Vorschaubild. WhatsApp und LinkedIn zeigen beim Teilen also die Stadt und nicht nur einen Link.

Selbst bauen

Der Workflow liegt als JSON zum Importieren bereit. Platzhalter sind markiert: die Adresse der Prüfstelle, der Token und die Seite, die das Ergebnis annimmt. Die Prüfstelle ist auf meinem Server ein kleines PHP-Skript, dafür brauchst du einen eigenen Endpunkt. Für die KI reicht jede OpenAI-kompatible API.

Das Gerüst passt auch für Ernsteres: erst prüfen, dann mehrere Abfragen parallel, zusammenführen, rechnen und von einer KI in Worte fassen lassen. Mehr Workflows zum Anklicken und Herunterladen gibt es in der n8n-Übersicht.