Website mit Claude Code erstellen: Schritt für Schritt (2026)

Mit Claude Code kommst du so schnell wie mit keinem anderen Werkzeug von einem leeren Ordner zu einer echten, schnellen, sauber programmierten Website. Genauso schnell landest du allerdings bei einer Seite, die aussieht wie jede andere KI-Seite, deren Kontaktformular ins Leere schickt und die nur die Person ändern kann, die sie gebaut hat. Der Unterschied liegt nicht im Talent. Er liegt in etwa acht Entscheidungen vor und nach dem eigentlichen Code.

Diese Anleitung geht diese Entscheidungen der Reihe nach durch. Wir bauen jeden Tag Kundenseiten mit Claude Code. Jeder Schritt hier ist also etwas, das wir selbst so machen, auch die Teile, die andere Tutorials weglassen.

Was du vorher brauchst

Einen Claude-Tarif mit Claude Code. Pro (rund 20 US-Dollar im Monat) reicht für eine kleine Website. Max gibt dir mehr Spielraum, wenn du viel baust. Alternativ zahlst du nach Verbrauch über einen API-Schlüssel.
Ein Terminal und Node.js. Claude Code läuft im Terminal unter macOS, Linux und Windows sowie als Erweiterung in VS Code und JetBrains.
Git und ein GitHub-Konto. Zum Bauen nicht zwingend, aber darüber veröffentlichst du später, und du hast für jede Änderung von Claude einen Rückgängig-Knopf.
Eine Domain, wenn die Seite unter deiner eigenen Adresse laufen soll. Rund 10 bis 15 Euro im Jahr.
Deine Inhalte. Echte Texte, echte Fotos, echte Preise. Das ist wichtiger als alles andere auf dieser Liste, dazu gleich mehr.

Schritt 1: Claude Code installieren und in einem leeren Ordner starten

Halte dich an die offizielle Einrichtungsanleitung. Kurz gesagt: ein Installationsbefehl, dann claude in einem neuen Ordner:

npm install -g @anthropic-ai/claude-code
mkdir meine-website && cd meine-website
git init
claude

Beim ersten Start meldest du dich an. Dass du mit git init in einem leeren Ordner anfängst, hat einen Grund: Ab jetzt lässt sich jeder Schritt speichern und zurückdrehen. Wenn eine Änderung schiefgeht, und das wird passieren, willst du „mach das rückgängig“ tippen können, und es soll auch stimmen.

Schritt 2: Den Stack festlegen, bevor Claude es tut

Wenn du nicht sagst, womit gebaut wird, greift Claude Code gern zu React oder Next.js. Für eine Web-App ist das richtig, für eine Firmenwebsite nicht: mehr JavaScript, eine Build-Kette, die du pflegen musst, und nichts davon hilft deinen Besuchern. Für eine Website gibt es im Grunde zwei gute Antworten.

Stack	Passt für	Achte auf
Reines HTML + CSS	One-Pager, Landingpages, Seiten mit drei bis fünf Unterseiten, die sich selten ändern	Header und Footer stehen in jeder Datei, eine Menüänderung heißt also: jede Seite anfassen
Astro	Alles mit gemeinsamem Layout, einem Blog oder mehr als einer Handvoll Seiten	Braucht einen Build-Schritt (`npm run build`), also lieber aus Git veröffentlichen als per Drag-and-drop

Beides erzeugt statische Dateien: reines HTML, das jeder Host ausliefern kann, ohne Updates und ohne Angriffsfläche. Was das ausschließt, haben wir in was eine statische Website kann und was nicht aufgeschrieben. Kurz: ideal für Seiten, die etwas zeigen, nicht für ausgewachsene Onlineshops oder Kundenportale. Die Astro-Dokumentation hilft, wenn du verstehen willst, was Claude da erzeugt.

Schritt 3: Die Design-Skills installieren

Das ist der größte Hebel für die Qualität. Ohne Design-Skill baut Claude Code die Seite, die alle kennen: zentrierter Hero, weicher Farbverlauf, drei Feature-Karten, eine Zahlenreihe. Mit Skill trifft es echte Entscheidungen zu Schrift, Farbe und Layout.

frontend-design (von Anthropic) hebt das Grundniveau bei allem. Immer installieren.
impeccable fragt, was das Unternehmen eigentlich ist, und sucht eine Form, die dazu passt. Für die Startseite und alles, was überzeugen muss.
webapp-testing lässt Claude die Seite in einem echten Browser öffnen und anschauen. Ohne diesen Skill gestaltet Claude im Blindflug.

Diese drei und drei weitere haben wir ausführlich verglichen, inklusive der Stellen, an denen sie schwächeln: die besten Claude-Skills für Webdesign. Wenn du vor dem Start nur einen weiteren Artikel liest, dann diesen.

Schritt 4: Das Briefing in die CLAUDE.md schreiben

Claude Code liest zu Beginn jeder Sitzung eine Datei namens CLAUDE.md. Schreib dein Briefing einmal dort hinein, dann musst du es nicht in jedem Prompt wiederholen. Ein gutes Briefing ist kurz:

# Physio Bergmann, Website

## Das Unternehmen
Physiotherapie-Praxis in Freiburg, vierköpfiges Team. Bekannt für die
Behandlung von Läufern und für Termine am Samstag. Die meisten Patienten
kommen über Google Maps und wollen wissen: Bekomme ich bald einen Termin,
und zahlt die Kasse das?

## Ziel der Website
Besucher sollen einen Termin buchen oder anrufen. Alles andere ist zweitrangig.

## Stack und Regeln
- Astro, statische Ausgabe, kein Client-Framework
- Schriften selbst hosten (keine Google-Fonts-Abrufe), keine Drittanbieter-Skripte
- Semantisches HTML, eine h1 pro Seite, Alt-Text bei jedem Bild
- Marke: tiefes Grün #1E4034, warmes Off-White #F6F1E7, ein Akzent
- Keine erfundenen Fakten: keine ausgedachten Bewertungen, Zahlen,
  Auszeichnungen oder Adressen

Zwei Zeilen in diesem Beispiel leisten mehr, als man denkt. „Bekannt für die Behandlung von Läufern und für Termine am Samstag“ ist ein Fakt, den das Modell nie hätte erraten können, und er gibt dem Design ein echtes Thema. „Keine erfundenen Fakten“ verhindert den peinlichsten Fehler KI-gebauter Seiten: die Fünf-Sterne-Bewertung einer Kundin, die es nicht gibt.

Schritt 5: Erst planen, dann nur die Startseite bauen

Schalte Claude Code in den Plan-Modus (Umschalt+Tab) und lass dir einen Plan geben: die Seiten, die Abschnitte der Startseite, die Bausteine, die mehrfach vorkommen. Lies ihn, korrigier ihn, dann erst bauen lassen. Einen Plan zu korrigieren ist viel billiger als eine fertige Seite, die dir nicht gefällt.

Dann baust du nur die Startseite. Sie legt das System fest: Schrift, Farben, Abstände, Buttons, Header und Footer. Arbeite so lange daran, bis sie dir wirklich gefällt. Danach lässt du Claude dieses System in gemeinsame Bausteine auslagern (in Astro: ein Layout plus ein paar Komponenten) und baust alle weiteren Seiten darauf auf. Seiten, die einzeln ohne gemeinsames System entstehen, sind die Stelle, an der KI-Design sichtbar zerfällt. Meist ungefähr bei Seite fünf, wenn jede Seite eine eigene Meinung zu Buttons entwickelt hat.

Ein Prompt, der funktioniert

„Bau die Startseite nach CLAUDE.md. Nutze den impeccable-Skill. Bevor du Code schreibst, sag mir die eine Idee, um die herum die Seite gebaut ist, und warum sie zu diesem Unternehmen passt. Nur echte Texte. Was du nicht weißt, markierst du als TODO, statt es zu erfinden.“

Schritt 6: Auf dem Handy prüfen, dann aufhören

Die meisten Besucher einer Website kleiner Unternehmen kommen über das Handy. Lass Claude die Seite mit dem webapp-testing-Skill in Handy- und Desktop-Breite öffnen, Screenshots machen und jedes Problem auflisten. Typische Funde: Text, der seitlich aus dem Bild läuft, ein Hero-Bild, das den ganzen ersten Bildschirm füllt, Buttons, die zu klein zum Tippen sind, grauer Text auf grauem Grund. Dann alles in einem Durchgang beheben lassen.

Und dann aufhören. Offene „mach es noch besser“-Schleifen sind das Teuerste, was du in Claude Code tun kannst, und ab der zweiten Runde schieben sie meistens nur noch Dinge hin und her.

Schritt 7: Die langweiligen Teile, die aus einer Seite eine Website machen

Eine Seite, die fertig aussieht, ist noch keine Website, die funktioniert. Lass Claude diese Liste abarbeiten:

Title und Meta-Description auf jeder Seite, geschrieben für die Suche, nicht für die Marke.
sitemap.xml und robots.txt. Astro hat dafür eine offizielle Sitemap-Integration, bei reinem HTML schreibt Claude sie von Hand.
Strukturierte Daten: mindestens Organization oder LocalBusiness auf der Startseite, damit Suchmaschinen und KI-Assistenten wissen, wer du bist.
Ein Kontaktformular, das ankommt. Eine statische Seite hat keinen Server, der die Nachricht annimmt. Du brauchst einen Formulardienst oder eine Plattform, die das übernimmt, und vor dem Start eine Testnachricht.
Eine 404-Seite, ein Favicon und Vorschaubilder für geteilte Links.
Impressum und Datenschutzerklärung. In Deutschland und Österreich Pflicht für eine geschäftliche Website, dazu ein Consent-Banner, sobald du Analytics einbaust.

Statische Seiten haben in der Suche einen echten Vorsprung, weil sie schnell und sauber sind. Aber nur, wenn diese Liste erledigt ist. Mehr dazu in SEO für statische Websites.

Schritt 8: Auf deiner eigenen Domain veröffentlichen

Schieb das Repository zu GitHub, verbinde es mit einem statischen Host (Cloudflare Pages, Netlify und GitHub Pages haben kostenlose Tarife, die für eine kleine Website reichen), trag den Build-Befehl ein (bei Astro npm run build mit dem Ausgabeordner dist, bei reinem HTML nichts) und füg deine Domain in den Einstellungen des Hosts hinzu. Ab dann veröffentlicht jeder Push.

Die Details, auch für den Fall, dass du die Seite mit einem Claude-Artefakt oder mit Claude Design statt mit Claude Code gebaut hast, stehen in unserer Anleitung eine mit Claude erstellte Website auf der eigenen Domain veröffentlichen.

Was es wirklich kostet

Posten	Kosten	Hinweis
Claude-Tarif	Ab rund 20 US-Dollar im Monat	Pro reicht für eine kleine Website, viele Design-Runden brauchen mehr
Hosting	Meist kostenlos	Die Gratis-Tarife statischer Hosts decken typischen Traffic kleiner Unternehmen ab
Domain	Rund 10 bis 15 Euro im Jahr	Oft schon vorhanden
Deine Zeit	Ein Nachmittag bis mehrere Wochenenden	One-Pager gegenüber mehrseitiger Website mit Blog

Das Geld ist überschaubar. Die eigentlichen Kosten sind Zeit, und die steckt größtenteils nicht im Bauen, sondern in den Inhalten, in der Liste aus Schritt 7 und in jeder Änderung nach dem Start.

Wo es schiefgeht

Der Einheitslook. Ein dünnes Briefing ergibt die Durchschnittswebsite. Verbessere das Briefing, nicht den Prompt.
Erfundene Fakten. Öffnungszeiten, Preise, Teamgrößen und Bewertungen, die plausibel klingen und falsch sind. Lies jeden Satz, bevor du veröffentlichst.
Lange Sitzungen driften. Nach Stunden in einer Sitzung vergisst Claude frühere Entscheidungen. Nutze /clear zwischen Aufgaben und halte die Regeln in der CLAUDE.md fest, dort überleben sie.
Stille Schäden. Eine „kleine“ Änderung am Header, die das Handymenü auf jeder Seite zerschießt. Speichere oft und prüfe nach jeder Änderung an gemeinsamen Teilen die Handyansicht.

Das Ergebnis ohne Terminal?

ShiftPress baut die Website aus ein paar Sätzen über dein Unternehmen oder aus einem mitgebrachten Design, mit denselben Design-Skills. Danach änderst du sie, indem du beschreibst, was du willst.

Website bauen ↗

Die Frage nach sechs Monaten: Wer ändert die Seite?

Der Launch ist der einfache Tag. Sechs Monate später ändern sich die Preise, jemand verlässt das Team, und es braucht eine neue Seite. Wenn sich die Website nur über ein Terminal und Claude Code ändern lässt, gehört sie praktisch der Person, die das kann. Für Entwickler, die ihre eigene Seite bauen, ist das in Ordnung. Für Inhaberinnen und Inhaber ist es genau die Abhängigkeit, aus der sie raus wollten.

Es gibt mehrere Wege, das vorher zu klären, von der Bearbeitung der Dateien bis zu einem CMS obendrauf. Wir haben sie ehrlich verglichen in eine statische HTML-Website bearbeiten. Der Weg, um den herum wir ShiftPress gebaut haben: Die schnelle statische Seite bleibt, und du änderst sie, indem du die Änderung im Chat beschreibst. Vor dem Veröffentlichen siehst du eine Vorschau jeder betroffenen Seite.

Und wenn du schon eine Website hast und sie nur schneller und einfacher betreiben willst: Bau sie nicht bei null neu. Eine bestehende Website auf statischen Code umziehen behält Inhalte, URLs und Rankings, die ein Neubau aufs Spiel setzt.

Häufige Fragen

Kann Claude Code eine komplette Website bauen?

Ja. Claude Code kann eine vollständige Website mit mehreren Seiten bauen, inklusive Layout, Textplatzhaltern, Gestaltung, Sitemap und strukturierten Daten. Am besten funktioniert es, wenn zuerst die Startseite entsteht, ihr Design in gemeinsame Bausteine ausgelagert wird und die übrigen Seiten darauf aufbauen, statt die ganze Website mit einem einzigen Prompt anzufordern.

Muss ich programmieren können, um mit Claude Code eine Website zu erstellen?

Code schreiben musst du nicht, aber du solltest dich im Terminal und mit Git wohlfühlen und lesen können, was Claude vorschlägt. Außerdem musst du beurteilen, ob das Ergebnis auf dem Handy stimmt, und Hosting und Domain selbst einrichten. Wenn dir das zu viel ist, ist eine Plattform, die Bau und Hosting übernimmt, der bessere Weg.

Ist Claude Code kostenlos?

Nein. Claude Code ist in den bezahlten Claude-Tarifen enthalten, ab Pro für rund 20 US-Dollar im Monat, oder du zahlst nach Verbrauch über einen API-Schlüssel. Das Hosting einer statischen Website ist auf Cloudflare Pages, Netlify oder GitHub Pages meist kostenlos, die Hauptkosten sind also Tarif und Domain.

Welches Framework sollte Claude Code für eine Website nutzen?

Für eine Firmenwebsite reines HTML und CSS bei One-Pagern und sehr kleinen Seiten, Astro bei mehreren Seiten, gemeinsamem Layout oder Blog. Beides erzeugt schnelle statische Dateien. React oder Next.js lohnen sich für eine Präsentationsseite nur, wenn du echte App-Funktionen brauchst, sonst bringen sie JavaScript und Wartung ohne Nutzen für die Besucher.

Wie bringe ich eine Claude-Code-Website auf meine eigene Domain?

Schieb das Projekt zu GitHub, verbinde das Repository mit einem statischen Host wie Cloudflare Pages oder Netlify, trag bei Astro den Build-Befehl ein und füg deine Domain in den Einstellungen des Hosts hinzu. Der Host zeigt dir, welche DNS-Einträge du setzen musst, das SSL-Zertifikat kommt automatisch.

Wie verhindere ich, dass die Seite generisch aussieht?

Installiere einen Design-Skill wie frontend-design oder impeccable und gib ihm ein Briefing mit Fakten über das Unternehmen, die er nicht erraten kann: wofür du bekannt bist, wer deine Besucher sind und was sie als Nächstes tun sollen. Ein konkretes Briefing verändert das Ergebnis viel stärker als ein raffinierterer Prompt.

Das Fazit

Eine Website mit Claude Code zu erstellen ist eine kurze Abfolge: leerer Ordner mit Git, ein statischer Stack, zwei Design-Skills, ein Briefing in der CLAUDE.md, zuerst die Startseite, ein Blick aufs Handy, die langweilige Liste, dann veröffentlichen. In dieser Reihenfolge entsteht eine Seite, die schneller und eigenständiger ist als vieles, was Agenturen vor ein paar Jahren ausgeliefert haben.

Entscheide vor dem Start, wer die Seite danach ändert. Diese Entscheidung prägt das erste Jahr der Website stärker als alles, was du beim Bauen tust.