Website mit Claude Code bauen – Schritt für Schritt

Worum geht es?

Mit Claude Code kannst du eine komplette Website im Dialog entstehen lassen: Du beschreibst den Betrieb, Claude legt Dateien an, schreibt Texte, prüft Links und erstellt Screenshots. Damit das Ergebnis nicht zufällig ausfällt, gibt ein Skill den Rahmen vor – also feste Regeln für Aufbau, Design, Texte, SEO und Prüfung. Diese Anleitung zeigt den Weg am Beispiel des Buildflock Website Builders; die Schritte gelten sinngemäß auch für eigene Skills.

Schritt 1: Claude Code und Node.js einrichten

Claude Code läuft im Terminal und braucht ein Konto bei Anthropic; die Nutzungskosten rechnet Anthropic direkt mit dir ab. Die aktuelle Installationsanleitung findest du in der offiziellen Dokumentation von Anthropic. Zusätzlich brauchst du Node.js 20 oder neuer, weil Prüf- und Bildskripte in JavaScript geschrieben sind. Prüfe die Version mit node -v.

Schritt 2: Den Skill installieren

Ein Skill ist ein Ordner mit einer Datei SKILL.md und weiteren Hilfsdateien. Er wird an eine von zwei Stellen kopiert:

• Für alle Projekte: ~/.claude/skills/ (unter Windows C:\Users\<Name>\.claude\skills\)
• Nur für ein Projekt: <Projektordner>/.claude/skills/

Danach Claude Code in dem Ordner starten, in dem die Website entstehen soll – oder neu starten, falls es schon lief. Claude erkennt den Skill automatisch, sobald deine Anfrage dazu passt.

Schritt 3: Den Betrieb beschreiben

Ein guter erster Prompt ist kurz und enthält Branche, Ort und Leistungen, zum Beispiel: „Bau mir eine Website für meine Physiopraxis in Kassel.“ Soll eine bestehende Seite erneuert werden, reicht: „Bau www.beispiel.de neu.“ Der Skill liest dann die vorhandene Seite ein und übernimmt Struktur und Inhalte als Grundlage. Verwende dabei nur Inhalte, an denen du oder dein Kunde die Rechte hat.

Der Website Builder stellt höchstens eine Rückfrage – typischerweise nach Leistungen, Kontaktdaten und einem Ordner mit eigenen Fotos – und zeigt dann kurz den Plan: welche Seiten entstehen, welche Inhalte wohin kommen.

Schritt 4: Seitenstruktur, die gefunden wird

Für lokale Betriebe hat sich eine einfache Regel bewährt: jede Kernleistung bekommt eine eigene Seite. Eine Tischlerei hat dann zum Beispiel Seiten für Küchen, Möbel nach Maß, Innenausbau und Reparaturen – plus Startseite, Leistungsübersicht, Kontakt, Impressum und Datenschutz. Im Testlauf des Website Builders mit der fiktiven Tischlerei „Holzwerk Brandt“ entstanden so neun Seiten.

Jede Seite erhält einen eigenen Titel mit Leistung und Ort, eine Beschreibung, genau eine H1 und strukturierte Daten (Schema.org). Das hilft Suchmaschinen und KI-Suchen, den Betrieb korrekt einzuordnen.

Schritt 5: Texte ohne Erfindungen

Die größte Gefahr bei KI-Texten sind erfundene Fakten: ausgedachte Gründungsjahre, Bewertungen oder Öffnungszeiten. Ein guter Skill verbietet das ausdrücklich. Der Website Builder markiert alles, was er nicht sicher weiß, als [Platzhalter: …]. So siehst du vor dem Livegang auf einen Blick, was noch fehlt – und es geht nichts Falsches online.

Schritt 6: Bilder

Am besten wirken echte Fotos vom Betrieb, vom Team und von Arbeiten. Gibst du einen Ordner an, verwendet der Skill diese Bilder und verkleinert sie für schnelle Ladezeiten. Ohne eigene Fotos sucht er Stockbilder bei Openverse (CC0/Public Domain) oder – mit kostenlosem API-Schlüssel – bei Pexels und notiert die Quellen.

Schritt 7: Prüfen statt hoffen

Nach dem Bau laufen Prüfskripte: kaputte Links, fehlende Titel und Beschreibungen, Überschriften-Reihenfolge, Alt-Texte, Barrierefreiheits-Grundlagen. Anschließend fotografiert der Skill jede Seite auf Desktop und Handy und legt die Bilder in ./ansichten ab. Sieh dir diese Screenshots an, bevor du etwas veröffentlichst. Im Testlauf meldete die automatische Prüfung bei neun Seiten null Fehler.

Schritt 8: Rechtliches ausfüllen

Impressum und Datenschutzerklärung entstehen als Gerüst mit Platzhaltern. Ausfüllen musst du sie mit den echten Angaben des Betriebs, und prüfen lassen solltest du sie von einer fachkundigen Stelle. Was dabei typischerweise zu beachten ist, beschreibt der Artikel „Rechtssicher? Was eine KI-Website in Deutschland braucht“.

Schritt 9: Live schalten

Weil das Ergebnis statisches HTML und CSS ist, läuft es auf jedem Hoster. Kostenlose Wege sind zum Beispiel Netlify Drop (Ordner website in den Browser ziehen) oder Cloudflare Pages. Für eine eigene Domain verbindest du sie anschließend in den Einstellungen des Hosters. Das Kontaktformular sendet erst, wenn ein Formular-Dienst angebunden ist.

Mit Bewegung: die Premium-Variante

Wer mehr Wirkung möchte, nutzt Website Builder Premium: Er enthält den Website Builder und ergänzt Preloader, Masken-Reveals, Scroll-Szenen und einen 3D-Hero. Die Bibliotheken werden dabei lokal abgelegt, und bei „Bewegung reduzieren“ steht alles still.

Kurz zusammengefasst

1. Claude Code und Node.js 20+ einrichten.
2. Skill nach ~/.claude/skills/ kopieren.
3. Betrieb mit Branche, Ort und Leistungen beschreiben.
4. Plan bestätigen, bauen lassen, Screenshots prüfen.
5. Platzhalter füllen, Rechtstexte prüfen lassen, hochladen.

Den Bau als Video zeigen? Das erklärt der Artikel „KI-Agenten-Video für Reels“.