Die erste Website mit Claude Code bauen: vom Produkt-Briefing bis zur eigenen Domain

Der Name steht fest und die Domain ist gekauft. Als Nächstes braucht es eine Website, auf der Besucher das Produkt sehen, seinen Nutzen verstehen und den vorgesehenen nächsten Schritt ausführen können.

In diesem Leitfaden erstellen wir mit Claude Code eine veröffentlichungsfähige Produktseite. Als Beispiel dient ein Tool zur Verwaltung von Kundenfeedback, dessen Registrierung noch nicht geöffnet ist. Die Website hat eine klare Aufgabe: Freiberuflern das Produkt erklären und Interessenten eine Bewerbung für den frühen Zugang ermöglichen.

Der gesamte Ablauf findet im Coding-Tool statt: Seite erstellen, Layout anpassen, Formular verbinden, Ergebnis prüfen und veröffentlichen. Die Website selbst benötigt keinen Chatbot und keine andere KI-Funktion.

Zuerst den Entwicklungsweg festlegen

Claude Code kann ein Projekt lesen, Dateien bearbeiten und Befehle ausführen. Damit eignet es sich für die fortlaufende Entwicklung und Überarbeitung derselben Website. In diesem Leitfaden wird Claude Code im lokalen Terminal verwendet.

Legen Sie ein eigenes Verzeichnis für die Website an und speichern Sie dort den freigegebenen Produktnamen, die Texte und die verfügbaren Materialien. Wenn bereits ein Projekt existiert, behalten Sie dessen Struktur bei. Bei einem neuen Projekt kann das Tool zunächst eine einfache Umsetzung für eine einseitige Produktwebsite vorschlagen.

Wenn Claude Code bereits mit einem vorhandenen Zugang funktioniert, können Sie diesen weiterverwenden. Einen Modellanbieter konfigurieren Sie, wenn Sie sich für nutzungsabhängigen API-Zugang entscheiden.

Um Claude Code über BetterToken zu verwenden, folgen Sie der Claude-Code-Einrichtungsanleitung und konfigurieren API Key und Base URL. Bewahren Sie diese Werte in der lokalen Entwicklungsumgebung auf, damit das Coding-Tool sie nutzen kann; sie gehören nicht in die öffentliche Website. Verfügbare Modelle und Zugangsbedingungen richten sich nach der aktuellen Kontokonfiguration.

Bitten Sie Claude Code nach der Einrichtung, das Website-Verzeichnis zu prüfen und die vorhandenen Dateien, den technischen Stack und den Startbefehl zusammenzufassen. Die Kompatibilität eines Drittanbieter-Gateways kann je nach Client und Funktion variieren. Prüfen Sie deshalb vor Beginn, ob das benötigte Modell und die gewünschten Funktionen verfügbar sind.

Schritt 1: Der KI ein direkt umsetzbares Briefing geben

„Erstelle eine hochwertige, technologische Website“ sagt weder, für wen das Produkt gedacht ist, noch was der Hauptbutton tun soll.

Nachdem Name und Materialien bereitgestellt wurden, können Sie eine Aufgabe wie diese senden:

Ziel: Die erste Version der Website für ein Tool zur Verwaltung von Kundenfeedback erstellen, das sich an Freiberufler richtet. Das Produkt bündelt Änderungswünsche von Kunden an einem Ort, sodass Anforderungen nicht mehr in Chatverläufen gesucht werden müssen. Die Registrierung ist noch nicht geöffnet; der Hauptbutton soll „Frühzugang anfragen“ lauten.

Erlaubter Umfang: In dieser Aufgabe nur die Startseite erstellen. Sie enthält eine Produktvorstellung, ein klar als Demo gekennzeichnetes Anwendungsszenario, drei zentrale Einsatzbereiche, häufige Fragen und einen Zugang zur Testanmeldung. Produktname und Materialien aus meinen Angaben verwenden.

Nicht umsetzen: Kein Login, keine Bezahlung und kein Produkt-Dashboard hinzufügen. Keine Kundenzahlen, Bewertungen oder Partnerlogos erfinden.

Fertigstellungskriterien: Zuerst eine im Browser aufrufbare Vorschau liefern, die auf Desktop und Mobilgeräten funktioniert. Wenn der Zugang noch nicht mit einem echten Dienst verbunden ist, ihn klar als Demo kennzeichnen.

Prüfung: Sicherstellen, dass die Seite startet, das mobile Layout und das Verhalten des Hauptbuttons prüfen und die tatsächlich durchgeführten Tests auflisten.

Dieses Briefing reicht aus, um den Umfang der ersten Version festzulegen. Details können nach der ersten Ansicht ergänzt werden.

Prüfen Sie bei der ersten Durchsicht, ob die Seite das Produkt korrekt erklärt. Woher kommt das Kundenfeedback? Warum sollte ein Besucher das Produkt testen? Was passiert nach dem Klick? Farben und Animationen lassen sich später verfeinern, doch diese Fragen muss die Seite zuerst beantworten.

Schritt 2: Jede Änderung an einer konkreten Stelle festmachen

Nach der ersten Version ist Feedback besonders nützlich, wenn es genau auf den Bereich verweist, der Verständnis oder Nutzung erschwert.

Wenn beispielsweise ein großes Bild den gesamten ersten mobilen Bildschirm einnimmt und Besucher scrollen müssen, bevor sie den Nutzen erkennen, setzen Sie mit einer Aufgabe wie dieser fort:

Ziel: Den mobilen Hero-Bereich der aktuellen Startseite so anpassen, dass Besucher zuerst den Produktnutzen und den Button „Frühzugang anfragen“ sehen.

Erlaubter Umfang: Nur Layout und Styles des Hero-Bereichs der Startseite ändern.

Konkrete Änderungen: Auf Mobilgeräten das Demo-Bild unter den Button verschieben und den vorhandenen Text beibehalten. Auf dem Desktop das bestehende zweispaltige Layout erhalten.

Fertigstellungskriterien: Kein horizontaler Überlauf auf Mobilgeräten, das Bild verdeckt weder Überschrift noch Button, und das Desktop-Layout bleibt unverändert.

Prüfung: Eine mobile und eine Desktop-Breite testen. Nur Probleme beheben, die durch diese Änderung entstanden sind.

Öffnen Sie die Seite nach jeder Änderung erneut und vergleichen Sie das tatsächliche Ergebnis mit der Aufgabe. Wenn Browser-Werkzeuge verfügbar sind, lassen Sie die KI die Seite direkt prüfen. Andernfalls öffnen Sie sie selbst und übergeben Screenshots zusammen mit reproduzierbaren Problemen.

Sobald eine Version überzeugt, sichern Sie einen wiederherstellbaren Stand, bevor die nächste Änderungsrunde beginnt. So können Sie schnell zu einer stabilen Version zurückkehren, falls die neue Richtung nicht funktioniert.

Schritt 3: Dafür sorgen, dass Anfragen wirklich ankommen

Für diese Website ist nicht eine komplexe Interaktion entscheidend, sondern der zuverlässige Eingang der Anfragen.

Die erste Version kann ein bereits eingerichtetes, extern gehostetes Formular öffnen. Für das Sammeln von E-Mail-Adressen ist kein eigenes Kontosystem nötig. Das Formular kann nach der E-Mail-Adresse und optional nach „Wie verwalten Sie derzeit Kundenfeedback?“ fragen. Erklären Sie, dass die Angaben für den Kontakt zum Frühzugang und für Produktforschung verwendet werden.

Geben Sie Claude Code die echte Formular-URL und lassen Sie den Demo-Zugang ersetzen. Öffnen Sie anschließend die Website, senden Sie eine Testanfrage und bestätigen Sie, dass der Datensatz im empfangenden System erscheint.

Bei einem eingebetteten Formular verbinden Sie den tatsächlichen Übermittlungsdienst und implementieren die Zustände Senden, Erfolg und Fehler. Die Erfolgsmeldung erscheint erst, wenn das empfangende System das Speichern der Daten bestätigt.

Die Rückmeldung auf der Seite muss zum tatsächlich abgeschlossenen Vorgang passen. Das ist wichtiger als weitere Präsentationsabschnitte.

Schritt 4: Öffentliche Vorschau prüfen, bevor die Domain verbunden wird

Nach der lokalen Prüfung veröffentlichen Sie das Projekt auf einer Hosting-Plattform, die den verwendeten Stack unterstützt. Beginnen Sie mit einer öffentlichen Test-URL und öffnen Sie sie auf einem anderen Gerät, um Bilder, Links und Formular zu prüfen.

Bei Vercel fügen Sie zum Beispiel die gekaufte Domain dem Projekt hinzu und konfigurieren anschließend das DNS mit den für dieses Projekt angezeigten Werten. Verwenden Sie die Einträge des aktuellen Projekts. Wenn die Domain auch für E-Mail genutzt wird, bleiben vorhandene MX- und andere Mail-Einträge erhalten. Der Ablauf ist in der Vercel-Dokumentation zu benutzerdefinierten Domains beschrieben.

Nach dem Verbinden der Domain durchlaufen Sie den gesamten Weg noch einmal über die eigene Adresse: Website öffnen, Produkt verstehen und Anfrage absenden.

Eine feste Informationsseite wie diese ruft bei einem Besuch kein Modell auf. Das Modell unterstützt nur die Entwicklung; nach dem Deployment läuft die Website wie ein gewöhnliches Webprojekt. Wenn später Inhaltsgenerierung, Analyse oder Chat für Besucher hinzukommen, wird die Modellanbindung zur Laufzeit als eigene Funktion geplant.

Schritt 5: Mit einer nutzbaren Website veröffentlichen

Verwenden Sie beim Start echte Seitenaufnahmen, eine klare Produktbeschreibung und einen funktionierenden Zugang. Solange Testnutzer gesucht werden, steht sowohl auf der Seite als auch in den Startmaterialien „Frühzugang anfragen“.

Wenn die Website bereit ist, sehen Sie sich das Startup-Verzeichnis auf NewName.ai an, um die Beschreibung ähnlicher Produkte zu vergleichen, und reichen Sie das eigene Projekt ein. Die Vorstellung sollte sich auf reale Funktionen, aktuelle Screenshots und eine erreichbare URL stützen.

Übertragen Sie anschließend konkrete Rückmeldungen aus Besuchen und Anfragen in das Website-Projekt. Wenn Besucher den Unterschied zu einer Chat-App nicht verstehen, verbessern Sie die Erklärung. Wenn sie klicken, aber die Anfrage nicht abschließen, prüfen Sie Formular und Ablauf. Lösen Sie jeweils ein klar definiertes Problem und entwickeln Sie die Seite schrittweise weiter.

Der Name gibt dem Projekt eine Identität, die Domain eine Adresse. Das praktische Ergebnis einer KI-gestützten Website-Erstellung ist eine Seite, die Menschen öffnen, verstehen und für den nächsten Schritt nutzen können.