KI · Arbeitsweise

Plan 9
11 Okt. 2026
9 min Lesezeit

Wie wir eine SEO-fähige .NET-Website gebaut haben, ohne eine Zeile Code zu schreiben

Ein praktischer Leitfaden: wie plan9.co.uk in nur wenigen Tagen von einem Claude-Design-Prototyp zu einer live geschalteten, vorgerenderten Website auf IIS wurde, mit 100 Punkten für SEO und jeder Zeile Code von Claude geschrieben.

KI · Arbeitsweise

Prototyp → Design → Konfiguration → Veröffentlichung → Wiederholen

In nur wenigen Tagen wurde die Website, die Sie gerade lesen, von einem Claude-Design-Prototyp zu einer live geschalteten, vorgerenderten ASP.NET-Core-Website auf IIS. Sie erreicht in Lighthouse 100 Punkte für SEO und 91 für die mobile Performance. Niemand in unserem Team hat eine Zeile Code getippt. Jede Zeile C#, MSBuild und Node hat Claude Cowork geschrieben.

Das ist der Leitfaden, den wir uns zu Beginn gewünscht hätten. Wenn Ihre Websites auf Windows, IIS und .NET laufen und Sie mit Claude eine schnelle, suchmaschinenfreundliche Website bauen möchten, lesen Sie hier, wie wir vorgegangen sind, was schiefging und was wir wieder so machen würden.

Dieser Artikel zeigt, wie wir es gemacht haben. Warum wir unsere eigene Website so gebaut haben, lesen Sie in Der Schuster trägt die schlechtesten Schuhe.

Das Wichtigste in Kürze

Null ProgrammierungWir haben die Richtung vorgegeben, geprüft und getestet. Claude hat die schwere Arbeit erledigt.

Arbeit aufteilenClaude Design für Seiten und Inhalte, Claude Cowork für serverseitige Funktionen, Prerendering und Veröffentlichung.

Prerendering für SEOJeder Crawler sieht fertiges HTML statt JavaScript-Platzhalter.

In zwei Schritten veröffentlichenZip exportieren, auf Veröffentlichen klicken.

Messen und optimierenNach einer Lighthouse-Prüfung stieg die mobile Performance von 83 auf 91. Alle Werte liegen über 90.

Sie müssen nicht programmieren, aber Sie müssen das Terrain kennen

Claude hat jede Zeile Code geschrieben. Unsere Aufgabe war es, zu beschreiben, was wir wollten, die Ergebnisse zu prüfen und zu testen. Das funktioniert nur, wenn Sie die beteiligten Tools wie Visual Studio, IIS, Cloudflare, DNS, E-Mail-Versand und die Google Search Console gut genug kennen, um zu merken, wenn etwas nicht stimmt. Sie leiten den Bau, statt ihn selbst auszuführen.

Zwei Claudes, zwei Spuren

Die nützlichste Entscheidung war, die Arbeit auf zwei Tools aufzuteilen und jedes in seiner Spur zu halten.

Claude Design: Optik und InhaltHat jede Seite gestaltet, die Texte und Fallstudien geschrieben, alle Seiten aus einer Master-Datei erzeugt und die Website als Zip exportiert.

Claude Cowork: Server und InfrastrukturMit unserer lokalen Entwicklungsumgebung verbunden, hat es den Code für .NET, E-Mail, SEO und Veröffentlichung geschrieben, Änderungen in seiner eigenen Sandbox getestet und die Live-Website im Browser geprüft.

Kurze Markdown-Briefings dazwischenDie beiden haben sich Arbeit über kleine Notizen im Projektordner übergeben, etwa CONTACT-FORM.md (was das Formular sendet und als Antwort erwartet) und PRERENDER.md. Jede Seite wusste genau, was die andere brauchte.

Der Stack

Visual Studio und .NET 10Baut die Anwendung. Der Button Veröffentlichen stellt sie mit Web Deploy auf IIS bereit.

IIS auf AWSHostet die Anwendung auf einem Windows-Server bei Amazon Web Services.

CloudflareDNS, HTTPS, Caching und Komprimierung vor dem Server.

Amazon SESVersendet die E-Mails des Kontaktformulars.

Node.js und PlaywrightBuild-Tools, die beim Veröffentlichen in unserer Entwicklungsumgebung laufen. Auf dem Live-Server läuft nichts zusätzlich.

Wir haben mit einem leeren ASP.NET-Core-Projekt begonnen, dessen einziger Code „Hello World!“ ausgab, und den Claude-Design-Export nach wwwroot kopiert.

Schritt 1: die statische Website ausliefern

Die erste Korrektur war einfach. Die Anwendung lieferte wwwroot nicht aus, also zeigte jeder Besuch „Hello World!“. Claude Cowork hat statische Dateien aktiviert, damit die index.html jedes Ordners unter einer sauberen Adresse wie /work/alliance-wine/ lädt, sinnvolles Caching eingestellt, Arbeitsdateien wie Designnotizen und Build-Skripte verborgen und eine HTTPS-Weiterleitung für die Produktion ergänzt.

Schritt 2: ein funktionierendes Kontaktformular

Claude Design hat das Formular definiert und einen kurzen Vertrag dazu geschrieben. Claude Cowork hat die Serverseite passend dazu gebaut.

Ein /api/contact-EndpunktPrüft Name, E-Mail und Nachricht auf dem Server und sendet die Anfrage dann über Amazon SES an unser Postfach, mit dem Besucher als Reply-To.

Eine Bestätigungs-E-Mail im eigenen DesignClaude Design hat die E-Mail-Vorlage im Stil der Website erstellt. Der Server setzt die Angaben des Besuchers ein und sendet sie mit einer Nur-Text-Version.

SpamschutzEin Limit von fünf Einsendungen pro Besucher alle zehn Minuten, dazu ein verstecktes Honeypot-Feld, das nur Bots ausfüllen.

Geheimnisse raus aus dem CodeE-Mail-Zugangsdaten liegen in einer sicheren Umgebungskonfiguration auf unseren Entwicklungs- und Produktionsservern, nie in der Versionskontrolle.

Schritt 3: eine echte 404-Seite und Weiterleitungen

Fehlende Seiten zeigen jetzt unsere gestaltete 404-Seite mit echtem 404-Status, damit Suchmaschinen keine defekten Links indexieren. Alte Adressen der vorherigen Website leiten dauerhaft auf ihre neuen Seiten weiter, und eine Weiterleitung hinzuzufügen ist eine Zeile in einer Liste.

Schritt 4: Prerendering für SEO

Das war der wichtigste Schritt. Claude-Design-Seiten sind Vorlagen, die JavaScript im Browser befüllt. Google kommt damit zurecht, aber Bing, LinkedIn-Vorschauen, KI-Crawler wie ChatGPT, Perplexity und Claude sowie die meisten SEO-Tools sahen rohe Platzhalter in geschweiften Klammern statt Überschriften und Text.

Einmal rendern, beim VeröffentlichenEin Playwright-Skript öffnet jede Seite aus sitemap.xml in einem unsichtbaren Chrome-Browser, wartet, bis sie fertig gerendert ist, und speichert das Ergebnis als fertiges HTML, inklusive Titeln, Beschreibungen, Canonical-Links und strukturierten Daten.

Für Besucher ändert sich nichtsDie ursprüngliche Vorlage bleibt in der Seite und wird wieder eingesetzt, bevor das JavaScript der Website startet. Menü, Filter, Theme-Umschalter und Formular funktionieren also genau wie vorher.

Persönliches bleibt außen vorDas Cookie-Fenster, der Hinweis zum Seitengewicht und der Besuchszähler werden nicht ins HTML gespeichert, weil sie für jeden Besucher anders sind.

Ein SicherheitsnetzDie Veröffentlichung schlägt fehl, wenn eine Seite noch einen unbefüllten Platzhalter enthält. Eine halb gerenderte Website kann also nie live gehen.

Was ein Crawler nicht lesen kann, existiert nicht. Durch Prerendering ist jede Seite für jeden Crawler lesbar.

Schritt 5: Veröffentlichen mit einem Klick

Die Website zu aktualisieren sind jetzt zwei Handgriffe:

1. ExportierenDie Website aus Claude Design als Zip herunterladen und in einem design-drop-Ordner im Projekt speichern.

2. VeröffentlichenIn Visual Studio auf Veröffentlichen klicken. Der Build entpackt die Website nach wwwroot, optimiert sie, rendert jede Seite vor, stellt sie auf IIS bereit und schaltet sie über Cloudflare live. Jeder Fehler stoppt die Veröffentlichung, sodass die Live-Website nie halb aktualisiert bleibt.

Die zusätzlichen Schritte laufen bei jedem Release-Build automatisch, das normale Debuggen bleibt also schnell. Einmalig muss nur Node.js in der Entwicklungsumgebung installiert werden, und die erste Veröffentlichung lädt den Browser von Playwright herunter.

Schritt 5a: die Team-Alternative, Git und ein Runner

Veröffentlichen aus Visual Studio passt zu einem kleinen Team. Wenn mehrere Personen an der Website arbeiten, veröffentlichen Sie stattdessen in ein Git-Repository und richten einen Runner auf Ihrem Server ein, etwa einen selbst gehosteten GitHub-Actions- oder GitLab-Runner. Bei jedem Push baut, rendert und deployt der Runner die Website automatisch, sodass alle mit derselben Quelle arbeiten und jedes Release dokumentiert ist.

Schritt 6: Optimierung mit Lighthouse

Wir haben Lighthouse in einem Inkognito-Fenster ausgeführt und den Bericht in beide Tools eingefügt. Claude Design hat die Inhaltsseite korrigiert: die Seitensprache, eine H1 auf der Startseite und Bildgrößen. Claude Cowork hat die Serverseite korrigiert: Langzeit-Caching mit versionierten Dateinamen, ein nicht blockierendes Hauptskript, React vom eigenen Server, Google Tag Manager nach dem Seitenaufbau und minifizierte Skripte mit etwa halber Originalgröße.

Performance83 → 91

Barrierefreiheit92 → 96

SEO100

Hauptinhalt erscheint4,0 s → 2,4 s

Tipps, wenn Sie es genauso machen wollen

Geben Sie jedem Tool eine AufgabeLassen Sie das Design-Tool Seiten und Inhalte verantworten und das Coding-Tool den Server. Lassen Sie nicht beide dieselben Dateien bearbeiten.

Übergeben Sie schriftlichKurze Markdown-Briefings im Projektordner haben beide Seiten synchron gehalten und wurden zu unserer Dokumentation.

Führen Sie eine feste NotizdateiEine CLAUDE.md mit Arbeitsregeln wie „jede neue Seite muss in sitemap.xml stehen“ erspart Ihnen Wiederholungen in jeder Sitzung.

Prerendering ab dem ersten TagWenn Ihre Seiten im Browser aufgebaut werden, rendern Sie sie beim Veröffentlichen vor. Das ist der Unterschied zwischen einer hübschen Website und einer, die gefunden wird.

Lassen Sie Veröffentlichungen laut scheiternAutomatische Prüfungen, die eine fehlerhafte Veröffentlichung stoppen, sind mehr wert als jede Menge manueller Tests.

Testen Sie wie ein BesucherPrüfen Sie die Live-Website in einem Inkognito-Fenster, auf dem Smartphone und im Post Inspector von LinkedIn. Zwischengespeicherte Vorschauen und veraltete CDN-Kopien erwischen jeden.

Was das für unsere Kunden bedeutet

Diese Website ist bewusst einfach: wenige Seiten, bearbeitet von denen, die sie gebaut haben. Für Kunden, die Redakteure, Workflows und Integrationen brauchen, bleibt Umbraco die richtige Antwort. Aber derselbe Ansatz, bei dem KI die Routinearbeit übernimmt und erfahrene Leute jede Änderung prüfen, zieht sich jetzt auch durch unsere Kundenprojekte. Er ist schneller, kostet weniger und lässt unseren Entwicklern mehr Zeit für die Probleme, die sie wirklich brauchen.

Wenn Sie Unterstützung beim Bau von etwas Ähnlichem auf Ihrer eigenen .NET- und IIS-Umgebung möchten, nehmen Sie Kontakt auf.