Zum Inhalt springen

Website mit Claude Code erstellen, Schritt für Schritt

Claude Code arbeitet direkt in deinem Projektordner statt in einem Chatfenster. Diese Anleitung geht den kompletten Weg durch, einschließlich des Teils, den die meisten Tutorials weglassen.

4 Minuten Lesezeit

Claude Code ist ein Werkzeug für das Terminal, das Dateien in einem Projektordner liest und ändert. Das klingt unspektakulär und ist der entscheidende Unterschied zu einem Chatfenster: Es sieht das ganze Projekt, ändert mehrere Dateien gleichzeitig, führt den Build aus und prüft, ob es funktioniert hat.

Diese Anleitung beschreibt, was dabei wirklich funktioniert.

Was du vorher brauchst

Node.js, kostenlos, einmal installieren. Fast jeder moderne Website-Build braucht es.

Claude Code, installiert mit einem npm-Befehl, dazu ein Claude-Abo.

Einen Startpunkt. Der entscheidet über das Ergebnis, und der nächste Abschnitt handelt nur davon.

Der Teil, den die meisten Anleitungen weglassen

Du kannst Claude Code auf einen leeren Ordner richten und sagen “baue mir eine Website für eine Physiotherapie”. Du bekommst eine Website. Sie ist ordentlich. Dann bittest du um eine zweite Seite, eine dritte, und etwa ab Seite sechs fällt auf, dass die Knöpfe nicht mehr zusammenpassen, die Überschriften ihre Größe gewechselt haben und der Ton von herzlich nach geschäftlich gekippt ist.

Das ist keine Schwäche des Modells. Es fehlt schlicht die Vorgabe.

Ein Gestalter würde vor dem ersten Strich zwanzig Fragen stellen: Was ist die Marke, wer ist die Zielgruppe, duzen oder siezen, welche Abstände, wie stellen wir Referenzen dar. Jede Antwort ist eine Regel, die dafür sorgt, dass Seite zwanzig zu Seite eins passt. Wenn niemand diese Antworten aufschreibt, muss das Modell sie jede Sitzung neu erfinden, und es erfindet jedes Mal anders.

Der wirksamste Schritt ist deshalb, dem Projekt ein Gedächtnis zu geben. Praktisch heißt das: Dateien.

  • Eine Guideline, üblicherweise CLAUDE.md, die sagt, was das Projekt ist, welche Regeln gelten und was nie passieren darf.
  • Ein Wissensordner mit Designsystem, Tonfall samt Beispielsätzen, Zielgruppe und SEO-Plan.

Das kannst du an einem Nachmittag selbst schreiben. Es lohnt sich, und es ist genau das, was ein gut gebautes Template bereits mitbringt.

Einrichten

Terminal im Projektordner öffnen, installieren, starten:

npm install
claude

Danach sprichst du mit dem Werkzeug. Was gut funktioniert: eine klare Anweisung pro Schritt, nicht ein Absatz mit fünf Wünschen.

Gut: “Baue eine Leistungsseite mit unseren vier Behandlungen, im selben Kartenlayout wie auf der Startseite.”

Weniger gut: “Bau die Seite aus mit Leistungen und Preisen und Blog und mach es modern.”

Die erste Anweisung ergibt eine überprüfbare Entscheidung. Die zweite ergibt fünf Entscheidungen, von denen du keine prüfen kannst.

Die Seiten bauen

Arbeite in der Reihenfolge, in der ein Besucher sich bewegt, nicht in der technisch naheliegenden.

Zuerst der obere Bereich der Startseite. Für wen, was ändert sich, was ist der nächste Schritt. Diese drei Dinge geben allem darunter den Ton vor.

Dann eine Seite je Angebot. Getrennte Seiten, nicht eine Seite mit Abschnitten. Suchmaschinen können nur bewerten, was eine eigene Adresse hat, und wer ein bestimmtes Angebot sucht, will nicht an drei anderen vorbeiscrollen.

Dann die Vertrauensseiten. Über uns, Referenzen, Kontakt.

Dann die Pflichtseiten. Impressum und Datenschutzerklärung sind in Deutschland Pflicht und gehören geprüft. Lass eine KI nicht erfinden, welche Vorschriften für dich gelten. Sie erzeugt etwas Plausibles, und plausibel ist hier nicht genug.

Qualität halten

Drei Gewohnheiten verhindern die meisten Probleme:

Nach jeder größeren Änderung prüfen lassen. Bitte darum, den Build auszuführen. Ein Fehler, der sofort auffällt, ist deutlich billiger als einer, der fünf Änderungen später auffällt.

Die Texte selbst gegenlesen. Modelle schreiben kompetente, leicht generische Prosa. Die Sätze, die eine Website menschlich machen, sind meistens die, die du umschreibst. Streich alles, was unverändert auch bei der Konkurrenz stehen könnte.

Nach der Begründung fragen, wenn etwas komisch aussieht. “Warum hast du hier andere Abstände genommen” bringt oft eine fehlende Regel ans Licht, die du dann in die Guideline schreibst, damit es nicht wieder passiert.

Live gehen

Heraus kommt statisches HTML mit CSS und JavaScript, das jeder Hoster ausliefert. Netlify, Vercel, Cloudflare Pages und normales Webhosting funktionieren alle. Kein Server zu pflegen, keine Datenbank zu sichern.

Vor dem Livegang diese Liste durchgehen:

  • Jede Seite hat einen eigenen Titel und eine eigene Beschreibung
  • Bilder haben Alternativtexte, die sie beschreiben
  • Die Seite funktioniert bei 390 Pixeln Breite, nicht nur auf deinem Laptop
  • Links führen dorthin, wo sie es versprechen
  • Die Pflichtseiten sind gefüllt und geprüft
  • Eine Sitemap existiert und ist in der Search Console eingereicht

Wann dieser Weg der falsche ist

Ehrlichkeit gehört dazu.

Wenn du nie ein Terminal sehen willst, nimm einen Baukasten. Das Ergebnis ist in Ordnung, der Preis ist eine dauerhafte Monatsgebühr.

Wenn du ein wirklich eigenständiges Design brauchst, das es so noch nicht gibt, beauftrage eine Gestalterin. KI-Werkzeuge sind stark darin, ein System anzuwenden, und mittelmäßig darin, eines zu erfinden.

Wenn es heute Nachmittag live sein muss und du keinen Startpunkt hast, ist ein Baukasten schneller.

Die Abkürzung

Alles oben funktioniert auch aus einem leeren Ordner. Es dauert nur länger, weil du die Vorgabe mitschreibst.

Genau diese Lücke schließen unsere AI Website Templates: eine fertige Branchen-Website, die Guideline, Wissensordner und sieben Skills bereits mitbringt. Der erste Satz, den du eintippst, erzeugt eine Seite, die zu den vorhandenen passt. Wer das vorher sehen will, findet in der Live-Demo eine Website, die sich aus einem Satz umbaut, ohne Anmeldung.

Häufige Fragen

Einen Computer mit Windows oder Mac, das kostenlose Node.js und ein Claude-Abo ab etwa zwanzig Euro im Monat. Mehr nicht, keinen Server und keine Spezialsoftware.

Nein, aber du musst ein Terminal öffnen und zwei Befehle eintippen können. Danach beschreibst du Änderungen in normalem Deutsch. Grundverständnis für Code hilft, wenn etwas hakt, und das passiert etwa einmal pro Projekt.

Es kann den Build ausführen und die fertigen Dateien vorbereiten, und es führt dich durch die Anbindung eines Hosters. Den letzten Schritt, eine Domain auf einen Server zu zeigen, machst du selbst, weil dafür Zugänge nötig sind, die nur du hast.

Weil nirgends steht, was die früheren Seiten entschieden haben. Zwischen zwei Sitzungen erinnert sich das Modell nicht an deine Abstände, es sei denn, sie stehen in einer Datei, die es lesen kann. Diese Datei ist der größte Hebel im ganzen Projekt.

Sie kann ausgezeichnet sein, weil sauberes statisches HTML entsteht. Aber SEO ist eine Reihe von Entscheidungen, kein Nebenprodukt. Titel, Beschreibungen, Struktur und interne Links müssen geplant werden. Sonst baut die KI eine schnelle Website, die auf nichts abzielt.

Weiterlesen