Eine Website mit KI zu erstellen funktioniert heute am besten mit einem Coding-Agenten wie Claude Code: Du beschreibst Seiten auf Deutsch, die KI schreibt echten Code in einem eigenen Repository, und GitHub plus Vercel bringen ihn live. Für eine SaaS-Website lohnt sich dieser Weg mehr als ein KI-Baukasten, weil Hosting, Serverregion und SEO-Technik frei wählbar sind und sich AEO-Grundlagen wie Schema, FAQs und interne Verlinkung als automatische Regeln einbauen lassen. Der Aufwand verschiebt sich vom Bauen zu Inhalten, Design-Entscheidungen und Kontrolle. Für den DACH-Markt kommen Impressum, lokale Schriften, Cookie-Einwilligung, AVV und die Hosting-Region Frankfurt dazu.
- Für SaaS-Websites mit Blog, Vergleichen und Tools ist ein Coding-Agent wie Claude Code die stärkste Option, für schnelle One-Pager reicht ein Baukasten
- Das Bauen geht schnell, die Entscheidung, was die Website sagen soll, dauert so lange wie immer - fang mit Homepage, Preisseite, Feature-Seiten und Paid-Landingpages an
- Eine Seite auf 90 Prozent bringen, bevor du weitere baust, und das Design-System erst danach festziehen
- AEO wird einfacher, weil Schema, FAQs, Key Takeaways und interne Verlinkung zu Regeln werden, die bei jeder Seite greifen, bis hin zu Checks, die den Build stoppen
- KI-Crawler wie OAI-SearchBot, Claude-SearchBot und PerplexityBot in der robots.txt zulassen, CDN-Einstellungen prüfen
- Sicherheit betrifft auch reine Marketing-Seiten: keine Secrets im Frontend, geschützte Formulare, geschützte Preview-Deployments, Security-Header
- DACH-Pflichten: Impressum nach § 5 DDG, Schriften lokal, Einwilligung nach § 25 TDDDG, AVV mit Vercel, Funktions-Region fra1
Im Frühjahr habe ich SaaS-Welt von Webflow auf Next.js umgezogen. Rund 200 Seiten, alle Inhalte, alle Weiterleitungen, dazu ein Domainwechsel von saas-welt.de auf saaswelt.de. Gebaut hat das Claude Code, in fünf Tagen mit jeweils zwei bis drei Stunden. Den Großteil der Zeit habe ich nicht mit Migration verbracht, sondern mit Design und Struktur, bis die Seite so aussah, wie ich sie haben wollte. Inzwischen laufen vier meiner Websites so.
Dieser Artikel ist die Anleitung, die ich mir damals gewünscht hätte. Er richtet sich an Gründer, Geschäftsführer und Marketing-Teams, die ihre Website mit KI neu bauen oder umziehen wollen. Wer stattdessen das SaaS-Produkt selbst bauen will, findet den Prozess in SaaS mit Vibe Coding bauen. Die Grundlagen zum Begriff stehen in Was ist Vibe Coding?
Der Ablauf auf einen Blick
| Phase | Was du tust | Wo die Zeit hingeht |
|---|---|---|
| 1. Weg wählen | Baukasten, Prompt-to-App oder Coding-Agent | Eine Stunde Nachdenken spart Wochen |
| 2. Inhalt klären | Zielgruppe, Botschaft, die wichtigsten Seitentypen | Mehr als du denkst, KI kürzt das nicht ab |
| 3. Setup | Repo, Regeln für die KI, Stack, Hosting-Region | Ein Nachmittag |
| 4. Erste Seite | Homepage in Varianten bauen, auf 90 Prozent bringen | Der größte Design-Hebel |
| 5. Ausrollen | Templates, Inhalte, Migration, Weiterleitungen | Schnell, aber jede Seite prüfen |
| 6. AEO und SEO | Schema, FAQs, interne Links, Crawler, Build-Checks | Einmal als Regel, dann automatisch |
| 7. Absichern | Secrets, Formulare, Previews, Header, Recht | Vor dem Launch, nicht danach |
| 8. Betrieb | Fixes per Chat, Checks, Aufräumen | Laufend, aber in Minuten statt Tagen |
Drei Wege, eine Website mit KI zu erstellen
"Website mit KI erstellen" meint drei sehr unterschiedliche Dinge. Wer sie verwechselt, landet beim falschen Werkzeug.
| KI-Baukasten | Prompt-to-App | Coding-Agent | |
|---|---|---|---|
| Beispiele | Framer, Webflow, Wix, Jimdo | Lovable, Bolt, v0 | Claude Code, Cursor, Codex |
| So funktioniert es | KI erzeugt Seiten im visuellen Editor | Chat erzeugt eine App im Browser | Agent schreibt Code in deinem Repository |
| Code gehört dir | Nein, Plattform-Lock-in | Teilweise, Export möglich | Ja, vollständig |
| Hosting und Region | Vorgegeben | Meist vorgegeben | Frei wählbar, auch Frankfurt |
| Pflege durch Marketing | Sehr einfach | Per Chat | Per Chat, Git-Grundbegriffe nötig |
| Grenzen | Eigene Tools, Automatisierung, Kosten bei mehreren Sites | Wartbarkeit, Struktur bei vielen Seiten | Verantwortung für Sicherheit und Betrieb liegt bei dir |
| Passt für | One-Pager, Teams ohne Technik | Klick-Prototypen, Demos | SaaS-Websites mit Content, Tools und SEO-Ambitionen |
Meine Empfehlung für eine SaaS-Website mit Blog, Vergleichsseiten, Rechnern oder Ressourcen: Coding-Agent. Genau diese Inhalte haben bei mir in Webflow am längsten gedauert, weil mir für vieles die Technik fehlte. Mit Claude Code baue ich jetzt Dinge, die ich vorher nie angefangen hätte, und die Hürde, eine Seite anzufassen, ist praktisch weg. Das war der Hauptgrund, warum ich eine meiner Seiten zwölf Monate lang nicht aktualisiert hatte.
Für einen sauberen One-Pager, der in einer Woche online sein soll und den danach niemand technisch betreut, ist Framer die schnellere Wahl. Wie Framer und Webflow sich unterscheiden, steht im Vergleich Webflow vs. Framer, und welche Richtung die drei Wege 2026 nehmen, in Webflow, Ploy oder Claude Code.
Wann du die Website nicht vibe coden solltest
Ich habe vier Seiten von Webflow weggezogen und halte Webflow trotzdem für ein starkes Produkt. Für meine eigenen Seiten passt Vibe Coding, für eine Unternehmenswebsite mit großem Team gelten andere Leitplanken. Bleib beim Baukasten oder einem CMS-zentrierten Setup, wenn:
- mehrere Personen ohne Technik-Hintergrund regelmäßig publizieren und dabei Rollen, Staging und Freigaben brauchen
- Rechtsabteilung oder Brand-Team jede Änderung abnehmen und den Prozess über eine Oberfläche gewohnt sind
- niemand im Team Verantwortung für Sicherheit, Abhängigkeiten und Hosting übernehmen will
- Formulare, CMS, Suche und Hosting als fertige Bausteine wichtiger sind als Flexibilität
Kein Werkzeug rettet eine Seite, die nicht klar sagt, was das Produkt tut. Die Wahl zwischen Next.js und Webflow ist zweitrangig, wenn Botschaft, Seitenfluss und Conversion-Details nicht stimmen.
Bevor du baust: Was die Website sagen soll
Eine Website per Vibe Coding zu bauen dauert einen Nachmittag. Zu entscheiden, was sie sagen soll, dauert genauso lange wie früher. Dieser Teil wird am häufigsten übersprungen, weil der Agent sofort etwas Hübsches liefert und es sich nach Fortschritt anfühlt.
Eine SaaS-Website kann Hunderte Seiten haben, aber der Großteil der Anmeldungen und Anfragen läuft fast immer über vier Seitentypen:
- Homepage - der größte Einstieg. Wer in ChatGPT über dein Produkt liest, googelt danach deine Marke und landet hier.
- Preisseite - weniger Traffic als erwartet, aber dort fällt die Entscheidung. Keine Preise zu zeigen kostet Vertrauen, kaum jemand will für eine erste Preisidee mehrere Sales-Calls führen.
- Paid-Landingpages - alles, wohin Werbebudget fließt. Hier zahlt sich Conversion-Optimierung direkt aus.
- Feature-Seiten - eine fokussierte Seite pro Kernfunktion. Acht Funktionen heißen acht Seiten, und sie werden fast immer unterschätzt.
Schreib für diese Seiten vor dem ersten Prompt auf, für wen sie sind, welches Problem sie lösen und welche Fragen ein Besucher noch hat. Das Format ist egal, eine Markdown-Datei im Projekt reicht. Wie so eine Plan-Datei aufgebaut ist, zeigt der Abschnitt "Die Plan-Datei" im Artikel zum SaaS-Bauen.
Praxis-Tipp: Diktiere statt zu tippen. Zehn Minuten Reden über Zielgruppe, Einwände und Konkurrenz liefern der KI mehr Kontext als ein sorgfältig formulierter Prompt. Ich nutze dafür Wispr Flow, das in jedem Textfeld funktioniert, auch im Terminal. Mehr dazu im Artikel zu Wispr Flow.
Der Stack für eine SaaS-Website
Für die meisten SaaS-Websites im DACH-Raum funktioniert dieses Setup, und es ist das, auf dem SaaS-Welt läuft:
| Baustein | Empfehlung | DACH-Hinweis |
|---|---|---|
| Framework | Next.js | Seiten werden serverseitig gerendert, Crawler sehen den vollen Inhalt ohne JavaScript |
| Inhalte | MDX-Dateien im Repo oder Headless-CMS | Siehe unten |
| Code | GitHub | Privates Repository, Branch-Schutz für main |
| Hosting | Vercel Pro | AVV verfügbar, Funktions-Region auf fra1 (Frankfurt) stellen |
| Analytics | Plausible | Cookiefrei, EU-Anbieter, Server bei Hetzner |
| Newsletter | Brevo | Französischer Anbieter, Server in der EU, AVV inklusive |
| KI-Agent | Claude Code | Keine echten Kunden- oder Formulardaten in die Session kopieren |
MDX oder CMS? Die wichtigere Frage lautet, ob du überhaupt einen Website-Builder brauchst oder nur einen guten Ort für Inhalte. Wenn du allein oder zu zweit publizierst, sind MDX-Dateien im Repository die einfachste Lösung: Inhalte, Code und Regeln liegen an einem Ort, und Claude Code kann alles auf einmal ändern. Sobald mehrere Redakteure ohne Git-Kenntnisse mitarbeiten, ist ein Headless-CMS sinnvoll. Achte bei der Auswahl darauf, dass es eine MCP-Schnittstelle oder eine saubere API hat, damit KI-Tools direkt damit arbeiten können (was MCP ist), dass Staging und Freigaben funktionieren und dass du deine Inhalte jederzeit wieder exportieren kannst. Mit Storyblok gibt es eine Option aus Österreich.
Vercel-Region prüfen: Neue Vercel-Projekte führen serverseitige Funktionen standardmäßig in Washington D.C. (iad1) aus. Für eine DACH-Website stellst du das unter Settings → Functions oder in der vercel.json auf "regions": ["fra1"] um. Vercel stellt einen AVV (Data Processing Addendum) bereit und ist unter dem EU-US Data Privacy Framework zertifiziert. Der kostenlose Hobby-Tarif ist laut Fair-Use-Richtlinien nur für nicht-kommerzielle Projekte gedacht, eine Firmenwebsite gehört auf Pro.
Schritt für Schritt: Die Website mit Claude Code bauen
1. Setup und Regeln für die KI
Leg ein Repository an und eine CLAUDE.md im Projektordner. Claude Code liest sie bei jedem Start, also gehört dort alles hinein, was die KI immer beachten soll. Ein Start, der sich bei mir bewährt hat:
## Website-Regeln
- Alle Texte auf Deutsch, Sie- oder Du-Form: [festlegen]
- Jede Seite und Komponente ist responsiv. Vor dem Abschluss bei 375, 768
und 1280 Pixel Breite prüfen.
- Bilder nur über next/image, immer mit Breite und Höhe.
- Schriften nur über next/font, nie per Link zu Google Fonts.
- Keine Secrets in Variablen mit NEXT_PUBLIC_.
- Jede Seite braucht Title, Meta-Description, Canonical, genau eine H1
und strukturierte Daten.
- Neue Drittanbieter-Skripte nur nach Rückfrage.
Was du in mehreren Projekten immer wieder korrigierst, gehört in die globalen Regeln auf deinem Rechner statt in jedes Projekt einzeln. Bau aber nicht gleich ein ganzes Ökosystem aus Skills und Agenten. Eine Fähigkeit lohnt sich als Skill erst, wenn du sie ein paar Mal von Hand gemacht hast und weißt, was sie braucht. Manche Aufgaben sind manuell schneller erledigt.
2. Eine Seite auf 90 Prozent bringen
Fang mit der Homepage an und bleib dort, bis du zu 90 Prozent zufrieden bist. Ein Design ist früh viel leichter zu korrigieren als später über zwanzig Seiten hinweg.
Varianten kosten mit KI fast nichts, also nutze das aus:
Bau 10 deutlich unterschiedliche Varianten des Hero-Bereichs der Homepage,
untereinander auf einer lokalen Seite /varianten, nicht verlinkt.
Unterschiedlich heißt: anderes Layout, andere Typografie, andere
Informationsdichte. Zielgruppe und Botschaft stehen in plan.md.
Referenz für den Stil: hell, viel Weißraum, eine Akzentfarbe.
Such dir zwei oder drei Favoriten aus, sag konkret, was dir an jeder gefällt, und lass daraus die nächste Runde bauen. Bei visuellen Fehlern schick Screenshots in den Chat. Claude erkennt am Bild schneller, was kaputt ist, als du es beschreiben kannst.
3. Design-System erst danach festziehen
Wer am ersten Tag Farben, Abstände und Komponenten festschreibt, schließt bessere Lösungen aus, bevor er sie gesehen hat. Erst wenn Homepage und eine zweite Seite stehen, lässt du Claude die Entscheidungen in Tokens und Komponenten überführen. Ab dann bauen alle weiteren Seiten darauf auf.
4. Seitentypen als Vorlagen
Für alles, was mehrfach vorkommt, also Artikel, Feature-Seiten, Vergleichsseiten, Glossar oder Rechner, baut Claude eine Vorlage, die ihre Inhalte aus Dateien oder dem CMS zieht. Bei SaaS-Welt bekommt jeder Artikel automatisch Kurzantwort, Key Takeaways, Inhaltsverzeichnis, FAQ-Block mit strukturierten Daten, Autorenbox und passende Tools. Ich schreibe Inhalte, die Vorlage erledigt den Rest.
5. Inhalte migrieren und Weiterleitungen setzen
Wenn du von einer bestehenden Seite umziehst, ist das der Teil, vor dem viele am meisten Respekt haben. Bei mir war es der unkomplizierteste. Fast die gesamte Content-Migration lief ohne Handarbeit. Ich musste nur nachjustieren und ein paar Stellen neu machen lassen, die die KI übersprungen hatte.
So gehst du vor:
- Inhalte holen. CMS-Sammlungen als CSV exportieren, statische Seiten direkt von der Live-Seite abrufen lassen. Lass die KI nie Inhalte aus dem Gedächtnis rekonstruieren.
- Bilder herunterladen und in einem modernen Format wie WebP ablegen.
- URL-Liste abgleichen. Lass Claude die alte
sitemap.xmlmit den neuen Routen vergleichen und für jede alte URL eine 301-Weiterleitung oder eine identische neue URL festlegen. - Prüfen lassen. Ein kleines Skript ruft jede alte URL auf und meldet alles, was nicht mit 200 oder 301 antwortet.
- Nach dem Launch die neue Sitemap in der Google Search Console einreichen und bei einem Domainwechsel die Adressänderung melden.
Achtung: Vertrau der KI bei der Migration nicht blind. Bei meinen Umzügen hat Claude Code einige vermeidbare Fehler gemacht, etwa Abschnitte ausgelassen oder Kategorien falsch zugeordnet. Lass dir am Ende eine Liste aller migrierten Seiten mit Wortzahl alt und neu ausgeben. Große Abweichungen zeigen sofort, wo etwas fehlt.
Mein Traffic fiel nach Migration und Domainwechsel einen Monat lang ab und liegt inzwischen über dem Niveau von vorher. Parallel dazu veröffentliche ich seit dem Umzug deutlich mehr als in den zwölf Monaten davor.
6. Launch über GitHub und Vercel
Verbinde das Repository mit Vercel. Jeder Push auf main geht live, jeder andere Branch bekommt eine eigene Vorschau-URL. Das ersetzt für kleine Teams den Staging-Prozess eines Baukastens: Änderung auf einem Branch, Vorschau ansehen, dann zusammenführen.
Warum KI-gebaute Websites bei AEO im Vorteil sind
AEO (Answer Engine Optimization) bedeutet, dass ChatGPT, Claude, Perplexity und Googles KI-Übersichten deine Inhalte finden, verstehen und zitieren. Die meisten Maßnahmen dafür sind bekannt. Sie scheitern in Baukästen selten am Wissen, sondern daran, dass jede einzelne Handarbeit pro Seite ist.
Wenn die KI den Code kontrolliert, wird aus jeder Maßnahme eine Regel. Die Vorlage erzeugt strukturierte Daten für jede neue Seite, ein Skript setzt interne Links, wenn ein neuer Artikel dazukommt, und die Checks laufen, ohne dass sich jemand daran erinnern muss. Bei mir hat das den größten Unterschied nach dem Umzug gemacht. Dinge, die ich in Webflow nie umgesetzt hätte, sind jetzt Standard.
Diese Punkte würde ich bei einer neuen Website zuerst einbauen:
| Maßnahme | Was sie bringt | Mit KI umgesetzt als |
|---|---|---|
| Strukturierte Daten | KI-Systeme und Google verstehen Seitentyp, Autor, FAQs | Schema aus den eigenen Daten generiert, pro Vorlage |
| Kurzantwort und Key Takeaways oben | Zitierfähige Antwort in den ersten Sätzen | Pflichtfelder in der Artikel-Vorlage |
| FAQs mit echten Fragen | Antworten auf das, was Kunden wirklich fragen | Aus Sales-Calls und Support-Tickets abgeleitet |
| Autorenseiten | Eine echte Person hinter den Inhalten | Eigene Route mit Person-Schema |
| Interne Verlinkung | Themenzusammenhang für Crawler und Leser | Skript, das bei jedem neuen Inhalt läuft |
| Eigene Daten und Tools | Inhalte, die es nur bei dir gibt | Rechner, Benchmarks, Vergleiche als eigene Seiten |
| KI-Crawler zulassen | Ohne Zugriff kein Zitat | Einträge in der robots.txt |
| IndexNow | Bing und Dienste, die Bing-Daten nutzen, finden neue Seiten schneller | Ping beim Veröffentlichen |
| llms.txt und Markdown-Versionen | Agenten lesen Inhalte ohne Layout-Ballast | Automatisch aus den Inhaltsquellen generiert |
Die ausführliche Version mit allen 13 Punkten, die wir bei SaaS-Welt eingebaut haben, steht in der AEO-Checkliste für neue Websites. Den Hintergrund zu AEO erklärt unser AEO-Grundlagenartikel.
llms.txt ist ein Vorschlag, kein Standard, und ob die großen Anbieter die Datei auswerten, ist nicht belegt. Wenn sie automatisch entsteht und dich zwei Minuten kostet, spricht trotzdem nichts dagegen.
KI-Crawler nicht aus Versehen aussperren
Die Anbieter nutzen getrennte Crawler fürs Training und für die Suche. Wer zitiert werden will, sollte mindestens die Such- und Nutzer-Crawler zulassen. Laut Anthropic sammelt ClaudeBot Trainingsdaten, Claude-SearchBot indexiert für die Suche und Claude-User ruft Seiten ab, wenn ein Nutzer danach fragt. Bei OpenAI ist die Aufteilung ähnlich mit GPTBot, OAI-SearchBot und ChatGPT-User.
# Such- und Nutzer-Crawler zulassen
User-agent: OAI-SearchBot
User-agent: ChatGPT-User
User-agent: Claude-SearchBot
User-agent: Claude-User
User-agent: PerplexityBot
Allow: /
Disallow: /api/
Ob du die Trainings-Crawler (GPTBot, ClaudeBot, Google-Extended) zulässt, ist eine eigene Entscheidung. SaaS-Welt erlaubt alle, weil wir wollen, dass Modelle unsere DACH-Daten kennen.
Achtung beim CDN: Cloudflare fragt neue Domains seit Juli 2025 bei der Einrichtung, ob KI-Crawler erlaubt sein sollen, und blockiert sie standardmäßig. Eine perfekte robots.txt hilft nichts, wenn die Firewall davor die Crawler abweist. Prüf die Einstellung in deinem CDN.
SEO-Checks, die den Build stoppen
Was ich an einer Website, die über GitHub und Vercel ausgeliefert wird, am meisten schätze, sind Regeln, die vor jedem Livegang geprüft werden. Auf einer meiner Seiten scheitert der Build, wenn eine Seite eine dieser Bedingungen nicht erfüllt:
- eindeutiger Title und eine eigene Meta-Description in der richtigen Länge, nicht von einer anderen Seite kopiert
- absoluter Canonical
- genau eine H1
- OG-Bild vorhanden
- strukturierte Daten, die sich fehlerfrei parsen lassen, mit Breadcrumbs und einer ID, die der URL der Seite entspricht
Keine Checkliste, an die jemand denken muss. Die Grundlagen sind da, egal ob ich etwas baue oder Claude Code am Sonntagabend. Und wenn eine Seite keine sinnvolle Description hergibt, wird die Seite verbessert und nicht die Regel gelockert. Diese Regel steht ausdrücklich in der CLAUDE.md, sonst passt die KI im Zweifel den Check an.
Den Prompt dafür kannst du fast wörtlich übernehmen:
Schreib ein Skript, das nach dem Build alle generierten HTML-Seiten prüft:
Title eindeutig, Meta-Description 120-160 Zeichen und eindeutig,
absoluter Canonical, genau eine H1, og:image vorhanden, JSON-LD parsebar
mit BreadcrumbList. Bei einem Fehler soll der Build mit einer Liste der
betroffenen Seiten abbrechen. Häng es in die GitHub Action ein.
AEO hört nicht beim Zitat auf
In ChatGPT oder Claude erwähnt zu werden ist der erste Schritt. Viele Nutzer klicken danach nicht auf einen Link, sondern googeln deinen Markennamen oder tippen die Adresse direkt ein. Ein großer Teil des KI-Einflusses landet deshalb als Direkt- oder Marken-Traffic auf der Homepage und den Paid-Seiten. Wenn insgesamt weniger Besucher kommen, zählt jeder einzelne mehr. Eine schnelle, klare Website mit echten Antworten auf offene Fragen ist deshalb auch AEO-Arbeit. Mehr dazu in 7 Gründe, die Conversion deiner SaaS-Website zu optimieren.
Praxis-Tipp: FAQs gewinnen doppelt. Bei einem Test auf einer Seite haben wir acht echte Fragen ergänzt, die ein Besucher nach dem Durchscrollen noch haben könnte, mit klaren Antworten. Die Conversion stieg deutlich, und dieselben Antworten sind genau das Format, das Antwortmaschinen zitieren.
Sicherheit: Auch eine Marketing-Website ist angreifbar
Bei einer reinen Marketing-Seite ohne Login und Datenbank denken viele, Sicherheit sei kein Thema. Trotzdem gibt es auch dort Formulare, API-Routen, Abhängigkeiten und Zugangsdaten. Die KI schreibt Code, der funktioniert, und denkt an Sicherheit meistens erst, wenn du danach fragst. Die häufigsten Schwachstellen:
Secrets im Frontend. Alles in einer Variable mit NEXT_PUBLIC_ landet im Browser und ist für jeden lesbar. API-Schlüssel für Newsletter-Tool, CRM oder E-Mail-Versand gehören in Server-Code. Prüf außerdem, dass .env-Dateien in der .gitignore stehen, bevor du den ersten Commit machst.
Ungeschützte Formulare und API-Routen. Ein Kontaktformular, das über eine API-Route E-Mails verschickt, kann missbraucht werden, um massenhaft Mails über deinen Absender zu jagen. Jede Route braucht eine Eingabeprüfung auf dem Server, ein Rate-Limit und einen Spam-Schutz, zum Beispiel ein verstecktes Honeypot-Feld.
Öffentliche Preview-Deployments. Jeder Branch bekommt bei Vercel eine eigene URL. Prüf, dass die Deployment Protection für Previews aktiv ist und dass Vorschau-Seiten nicht indexiert werden. Sonst stehen unfertige Preisseiten oder geheime Launch-Seiten bei Google.
Abhängigkeiten. Coding-Agenten installieren gern Pakete. KI-Modelle erfinden dabei gelegentlich Paketnamen, die es nicht gibt, und Angreifer registrieren solche Namen gezielt mit Schadcode. Lass jedes neue Paket begründen, prüf es auf npm und aktiviere Dependabot oder einen vergleichbaren Dienst für Sicherheitsupdates.
Fehlende Security-Header. Content-Security-Policy, HSTS, Referrer-Policy und Schutz gegen Einbettung in fremde Frames lassen sich in Next.js zentral setzen. Lass Claude sie einbauen und prüf das Ergebnis mit einem kostenlosen Header-Scanner.
Zu viel Macht für den Agenten. Branch-Schutz auf main, keine Produktions-Zugangsdaten auf dem Rechner, auf dem der Agent läuft, und keine automatischen Freigaben für Befehle, die etwas löschen.
Vor jedem Launch: Claude Code hat einen eingebauten Befehl /security-review, der die offenen Änderungen auf Schwachstellen prüft. Ergänze ihn um eine direkte Frage: "Greif diese Website an. Welche Formulare, Routen oder Variablen kann ein Fremder missbrauchen?" Sobald Login, Datenbank oder Kundendaten dazukommen, gelten die strengeren Regeln aus dem Artikel zum SaaS-Bauen, etwa Row Level Security und getrennte Datenbanken.
DSGVO und Recht: Was eine DACH-Website braucht
Ein Coding-Agent baut dir in Minuten ein Kontaktformular. Ob du es in Deutschland so betreiben darfst, weiß er nicht. Diese Punkte musst du selbst klären oder klären lassen:
Impressum und Datenschutzerklärung. Das Impressum folgt seit Mai 2024 aus Paragraf 5 des Digitale-Dienste-Gesetzes (DDG). Die Datenschutzerklärung muss jeden Dienst nennen, der Daten verarbeitet. Lass Claude dafür eine Liste aller Drittanbieter erstellen, die die Seite lädt, und gleich sie mit der Datenschutzerklärung ab.
Schriften lokal einbinden. Das Landgericht München I hat am 20.01.2022 (Az. 3 O 17493/20) einem Website-Besucher 100 EUR Schadensersatz zugesprochen, weil die Seite Google Fonts dynamisch einband und so seine IP-Adresse ohne Einwilligung an Google übertrug. In Next.js löst next/font das automatisch, weil die Schriften beim Build heruntergeladen und von deiner eigenen Domain ausgeliefert werden. Schreib es trotzdem in die Regeln, damit die KI nicht irgendwann einen Link-Tag einbaut.
Cookie-Einwilligung. Nach Paragraf 25 TDDDG brauchst du eine Einwilligung für alles, was auf dem Gerät des Nutzers speichert oder ausliest und nicht technisch notwendig ist. Mit einer cookiefreien Analyse wie Plausible entfällt der Banner für die Statistik. Eingebettete YouTube-Videos, Kalender-Widgets, Chat-Bubbles oder Formular-Embeds von US-Anbietern brauchen ihn trotzdem, oder eine Zwei-Klick-Lösung, die erst nach Klick lädt.
AVV mit Dienstleistern. Hosting, Formular-Backend, Newsletter-Tool und CRM verarbeiten personenbezogene Daten in deinem Auftrag. Mit jedem brauchst du einen Auftragsverarbeitungsvertrag. Unsere DSGVO-Checkliste für Online-Unternehmer geht die Punkte einzeln durch.
Barrierefreiheit. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für Dienstleistungen im elektronischen Geschäftsverkehr mit Verbrauchern. Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens 2 Mio. EUR Jahresumsatz oder Bilanzsumme sind bei Dienstleistungen ausgenommen. Ob deine Seite betroffen ist, hängt davon ab, ob Verbraucher darüber Verträge abschließen, etwa über einen B2C-Checkout. Im Zweifel hilft die IHK. Unabhängig davon ist Barrierefreiheit eine der Stellen, an denen KI am meisten hilft: Lass Claude einen Lighthouse- oder axe-Bericht auswerten und die Fehler direkt beheben.
Hinweis für DACH-Teams: Kopier keine echten Formulareinträge, Leads oder Kundendaten in eine Claude-Session, um einen Fehler zu finden. Claude Pro und Max sind Verbrauchertarife. Für Firmendaten sind Team- oder Enterprise-Tarife mit AVV gedacht, mehr dazu im Artikel zu Claude Code im Mittelstand.
Was es kostet
| Posten | Preis | Hinweis |
|---|---|---|
| Claude Pro | ca. 20 USD/Monat | Reicht für Bau und Pflege einer Website |
| Claude Max | 100 oder 200 USD/Monat | Lohnt sich bei täglicher, längerer Nutzung über mehrere Projekte |
| Vercel Pro | 20 USD/Monat pro Nutzer | Pflicht für kommerzielle Websites |
| GitHub | kostenlos | Private Repositories inklusive |
| Plausible | ab 9 EUR/Monat | Optional, cookiefrei |
| Brevo | kostenlos, Bezahltarife ab 7 EUR/Monat | Optional, für Newsletter-Formulare |
Zum Vergleich: Webflow startet bei 14 EUR pro Monat und Website, Framer bei 10 EUR. Bei einer einzelnen Seite ist der Unterschied klein. Bei mir liefen vier Websites mit je einem Webflow-Tarif plus Workspace-Abo. Die gekündigten Webflow-Tarife bezahlen jetzt das Claude-Abo, mit dem ich auch alles andere mache.
Der größere Posten ist Zeit. Für die Migration von SaaS-Welt waren es fünf Tage à zwei bis drei Stunden, der Großteil davon Design. Wer bei null anfängt, braucht mehr Zeit für Inhalte und Positionierung als für den Code.
Nach dem Launch: Die Website im Betrieb
Den größten Unterschied merke ich in den Monaten nach dem Launch.
Fixes von unterwegs. Wenn mir beim Spazierengehen eine Idee kommt oder mich jemand auf einen Fehler hinweist, diktiere ich das Claude per Handy. Wenn ich zu Hause bin, ist die Änderung live. Kleine Korrekturen blockieren dadurch keine Konzentrationszeit mehr am Schreibtisch.
Page Speed und Barrierefreiheit. Nach dem Umzug lag der Page-Speed-Score von SaaS-Welt bei 99. Das lag eher an meinen Fehlern in der alten Webflow-Seite als an Webflow, aber mit KI im Code lassen sich solche Probleme einfach beheben. Einen PageSpeed-Bericht in den Chat legen, und Claude behebt einen großen Teil der Punkte direkt.
Automatische Checks. Ein paar kleine Skripte prüfen regelmäßig defekte Links, 404-Seiten, Ladezeiten und Barrierefreiheit und melden, was sich verändert hat. Die Entscheidung, was davon umgesetzt wird, bleibt bei einem Menschen. Zwanzig Vorschläge pro Woche sind nur dann hilfreich, wenn jemand eine Meinung dazu hat.
Aufräumen. Jede Website sammelt mit der Zeit Seiten an, die keiner mehr braucht: alte Webinar-Landingpages, abgelaufene Kampagnen, Ankündigungen von vor zwei Redesigns. Führ eine Liste aller Seiten, prüf regelmäßig die mit dem wenigsten Traffic, leite alte Kampagnenseiten weiter und lösche sie. Bei neuen Kampagnenseiten trägst du das Enddatum gleich beim Anlegen ein.
Prozesse im Team. Sobald mehr als eine Person publiziert, braucht es Antworten auf die Fragen, die in Baukästen die Oberfläche beantwortet: Wer darf veröffentlichen, wer gibt frei, wo steht die Dokumentation? Pull-Requests mit Vorschau-URL sind ein guter Freigabeprozess, aber nur, wenn alle Beteiligten wissen, wie sie funktionieren.
Weitere Tipps für die tägliche Arbeit mit Claude Code an Web-Projekten stehen in 7 Claude-Code-Tipps für bessere Web-Projekte.
Die Checkliste
Vor dem Bauen
- Weg gewählt: Baukasten, Prompt-to-App oder Coding-Agent, passend dazu, wer die Seite pflegt
- Zielgruppe, Botschaft und offene Fragen der Besucher schriftlich festgehalten
- Homepage, Preisseite, Feature-Seiten und Paid-Landingpages als Prioritäten definiert
- Entscheidung MDX im Repo oder Headless-CMS mit MCP getroffen
Bauen
-
CLAUDE.mdmit Regeln zu Responsivität, Bildern, Schriften, Secrets und SEO-Pflichtfeldern - Homepage in Varianten gebaut und auf 90 Prozent gebracht, bevor weitere Seiten entstehen
- Design-System erst nach den ersten zwei Seiten festgeschrieben
- Vorlagen für wiederkehrende Seitentypen
- Bei Migration: alte URLs vollständig auf 200 oder 301 geprüft, Wortzahlen alt und neu verglichen
AEO und SEO
- Strukturierte Daten in jeder Vorlage
- Kurzantwort, Key Takeaways und FAQs mit echten Fragen
- Autorenseite mit echter Person
- Skript für interne Verlinkung
- Such-Crawler von OpenAI, Anthropic und Perplexity in robots.txt erlaubt, CDN-Einstellung geprüft
- IndexNow und Bing Webmaster Tools eingerichtet
- SEO-Checks, die den Build stoppen
Sicherheit
- Keine Secrets in
NEXT_PUBLIC_-Variablen,.envin.gitignore - Formulare mit serverseitiger Prüfung, Rate-Limit und Spam-Schutz
- Preview-Deployments geschützt und nicht indexierbar
- Security-Header gesetzt und geprüft
- Branch-Schutz auf
main, Dependabot aktiv -
/security-reviewvor dem Launch gelaufen
Recht und DSGVO
- Impressum nach § 5 DDG und vollständige Datenschutzerklärung
- Schriften lokal über
next/font - Einwilligung nach § 25 TDDDG für alle nicht notwendigen Drittanbieter
- AVV mit Hosting, Formular-Backend, Newsletter-Tool und CRM
- Vercel Pro, Funktions-Region
fra1 - BFSG-Pflicht geprüft
Nach dem Launch
- Sitemap in der Search Console eingereicht, bei Domainwechsel Adressänderung gemeldet
- Regelmäßige Checks für Links, 404, Ladezeit und Barrierefreiheit
- Liste aller Seiten mit Verantwortlichen und Enddaten für Kampagnenseiten
Quellen
- Vercel: Configuring Regions for Vercel Functions
- Vercel: Data Processing Addendum
- Vercel: Fair Use Guidelines
- Anthropic: Crawler und robots.txt-Steuerung
- Cloudflare: Pressemitteilung zur Standard-Blockierung von KI-Crawlern (01.07.2025)
- IHK Berlin: Informationsseite zum Barrierefreiheitsstärkungsgesetz
- Händlerbund: Ausnahme für Kleinstunternehmen im BFSG
- Claude: Preise und Tarife
