Schritt für Schritt: Mit KI Website bauen (Claude Code)

Mit KI eine Website zu bauen bedeutet in der Praxis: du beschreibst in normalen Sätzen, was entstehen soll, Claude Code übersetzt das in echten Code, und nach jedem Schritt siehst du sofort eine Vorschau im Browser. Für ein überschaubares Projekt wie eine Firmenseite mit fünf bis sieben Unterseiten reicht dafür realistisch ein einziger Abend. Ich zeige dir den Ablauf hier an einem durchgehenden Beispiel, nicht als Liste von Möglichkeiten, sondern als echten Weg von der leeren Seite bis zur Veröffentlichung.

Ich habe auf diese Weise unter anderem fractio.pl, ein Jobportal, und adee.pl, ein Werkzeug für Firmenwebsites, gebaut, komplett im Gespräch mit Claude Code und ohne klassische Programmierausbildung. Auch die Seite, auf der du diesen Text liest, ist genau so entstanden, von der ersten Idee bis zur letzten veröffentlichten Version.

Was du vor dem ersten Satz an die KI brauchst

Bevor du Claude Code öffnest, brauchst du das, was auch bei jedem anderen Weg zählt: Klarheit über Zweck, Inhalte und ein grobes Gefühl für den Look deiner Seite. Diesen Vorbereitungsschritt beschreibt der Artikel Website erstellen ohne Programmierkenntnisse ausführlich, hier gehe ich direkt in die Umsetzung.

Als Beispiel nehme ich eine fiktive Tischlerei mit drei Leistungen, ein paar Referenzbildern und einem Kontaktformular, ein typisches Projekt für einen Abend.

Wie sich das Gespräch von einer E-Mail an einen Dienstleister unterscheidet

Bei einer Agentur schickst du ein Briefing, wartest ein paar Tage und bekommst einen ersten Entwurf, den du dann kommentierst. Bei Claude Code fällt die Wartezeit fast komplett weg: Du siehst die Änderung, kommentierst sofort weiter, und die nächste Version steht innerhalb von Minuten wieder vor dir.

Dieser kurze Abstand zwischen Rückmeldung und neuer Version ist der eigentliche Grund, warum ein ganzer Abend für ein überschaubares Projekt realistisch ist. Bei klassischen Abstimmungsschleifen wären dafür oft mehrere Wochen nötig.

Schritt 1 bis 3: vom leeren Bildschirm zur ersten Vorschau

Ein typischer erster Satz an Claude Code liest sich wie eine kurze Aufgabenbeschreibung, zum Beispiel Erstelle eine Startseite mit Hero-Bild, drei Leistungskacheln und einem Kontaktformular unten. Genau in dieser Alltagssprache läuft das gesamte Gespräch danach weiter, ohne dass ein einziger Fachbegriff nötig wird.

1. Du beschreibst in ein bis zwei Absätzen, worum es geht: „Baue eine Website für eine Tischlerei mit den Seiten Start, Leistungen, Referenzen und Kontakt, in einem warmen, holzigen Farbton.“
2. Claude Code baut daraus eine erste lauffähige Version und zeigt sie dir direkt als Vorschau im Browser.
3. Du schaust dir die erste Version an und sagst in eigenen Worten, was noch fehlt oder stört, zum Beispiel „der Header ist zu hoch“ oder „die Schrift wirkt zu technisch für eine Tischlerei“.

Wichtig in dieser Phase: Du musst keine Fachbegriffe kennen. Es reicht, wie bei einem guten Handwerker vor Ort zu beschreiben, was du siehst und was du dir stattdessen vorstellst.

Schritt 4 bis 6: Feinschliff im Dialog

Nach der ersten Grundstruktur geht es an die Details, die eine Seite erst persönlich machen: eigene Texte statt Platzhalter, echte oder realistische Bilder, und die kleinen Dinge wie Öffnungszeiten oder eine Anfahrtsbeschreibung.

1. Du lieferst die echten Texte oder lässt einen ersten Entwurf erstellen, den du danach in deinen eigenen Worten überarbeitest.
2. Du gehst Seite für Seite durch und gibst konkrete Rückmeldung, bis Struktur und Inhalt zusammenpassen.
3. Du prüfst die Ansicht auf dem Smartphone, weil ein großer Teil deiner Besucher von dort kommt.

Der eigentliche Unterschied zu klassischem Programmieren ist nicht das Ergebnis, sondern dass du bei jedem Schritt sofort siehst, was du gerade beschrieben hast.

Was tun, wenn dir zwischendurch die Worte fehlen

Es ist normal, dass dir nach der zehnten Rückmeldung nicht sofort einfällt, wie du genau beschreiben sollst, was du willst. In diesem Fall hilft es, auf bestehende Seiten zu zeigen, die dir gefallen, und zu benennen, was genau daran überzeugt: die Farben, der Aufbau oder die Bildsprache.

Auch ein einfaches „das gefällt mir noch nicht, versuch etwas Ruhigeres“ ist eine vollständige, brauchbare Rückmeldung. Du musst dabei nie technischer werden, als du dich wohlfühlst.

Was am Ende einer solchen Seite technisch drinsteckt

Auch wenn du selbst keine Zeile Code schreibst, entsteht im Hintergrund eine echte Website mit echtem Code, genau wie bei einer klassisch programmierten Seite. Du musst diesen Code nie lesen oder verstehen, genauso wenig wie du die Elektrik hinter einem Lichtschalter verstehen musst, um ihn zu benutzen.

Wichtig ist nur, dass die Seite am Ende das tut, was sie soll: schnell laden, auf jedem Gerät gut aussehen und die Inhalte zeigen, die du beschrieben hast.

Was, wenn die erste Idee unterwegs kippt

Manchmal zeigt sich erst nach der ersten Vorschau, dass die ursprüngliche Idee doch nicht passt, ein anderer Aufbau sinnvoller wäre oder eine geplante Seite komplett wegfallen kann. Das ist kein Rückschlag, sondern ein normaler Teil des Prozesses, den du bei einer klassischen Beauftragung selten so früh bemerkt hättest.

Weil jede Änderung nur ein neuer Satz im gleichen Gespräch ist, kostet ein Kurswechsel mitten im Projekt kaum zusätzliche Zeit, anders als bei einem bereits bezahlten Angebot einer Agentur.

Schritt 7: Domain, Hosting und Veröffentlichung

Sobald die Seite inhaltlich steht, fehlt nur noch der letzte Teil: eine Domain registrieren, ein Hosting einrichten und die fertige Seite dorthin veröffentlichen. Das ist der Schritt, bei dem die meisten Einsteiger unsicher werden, weil er sich technischer anfühlt als der Rest.

In der Praxis lässt sich auch dieser Teil im Gespräch mit Claude Code klären, Schritt für Schritt, mit denselben einfachen Fragen wie zuvor. Genau diesen Übergang von der Vorschau zur echten, live erreichbaren Seite behandelt einer der Module im Kurs Claude Code PRO im Detail.

Was am nächsten Tag noch zu tun bleibt

Nach dem ersten Abend ist die Seite meist online, aber ein paar Punkte lohnen sich in Ruhe am nächsten Tag: ein Blick auf Rechtschreibung und Ladezeit, ein Test auf einem zweiten Gerät und, für Websites in Deutschland besonders wichtig, ein korrektes Impressum sowie ein Datenschutzhinweis. Auch das lässt sich im Gespräch mit Claude Code Schritt für Schritt ergänzen, die rechtlichen Inhalte solltest du dabei aber selbst prüfen oder von jemandem prüfen lassen, der sich damit auskennt.

Ein zweiter, ruhiger Blick am nächsten Tag deckt fast immer Kleinigkeiten auf, die während des Bauens im Eifer übersehen wurden.

Was an einem Abend realistisch ist und was nicht

Eine überschaubare Seite mit wenigen Unterseiten, klaren Inhalten und einem einfachen Kontaktformular ist an einem Abend machbar, wenn deine Inhalte vorher schon feststehen. Ein Onlineshop mit Zahlungsabwicklung, ein Kundenportal mit Login oder eine mehrsprachige Seite mit vielen Unterseiten brauchen realistisch mehr Zeit und mehrere Sitzungen.

• Realistisch an einem Abend: Firmenseite, Portfolio, einfache Landingpage mit Kontaktformular
• Realistisch in mehreren Sitzungen: Onlineshop, Kundenbereich, mehrsprachige Seite
• In beiden Fällen gilt: klare Inhalte vorher sparen mehr Zeit als jedes Werkzeug

Der Unterschied zwischen beiden Kategorien liegt selten am Werkzeug selbst, sondern an der Anzahl der Entscheidungen, die während des Gesprächs getroffen werden müssen. Ein Kontaktformular ist eine Entscheidung, ein komplettes Bezahlsystem mit mehreren Anbietern sind Dutzende.

Was die einzelnen Wege am Ende kosten, egal ob Agentur, Baukasten oder KI, rechnet der Artikel Was kostet eine Website im Detail vor, inklusive der separaten Kosten für ein eigenes Claude-Code-Konto.

Wenn du wissen willst, ob dieser Weg zu deinem Projekt passt, bevor du einen ganzen Abend investierst, probiere den kurzen Quiz „Bist du bereit, mit KI zu bauen?“, er dauert keine fünf Minuten und gibt dir eine ehrliche Einschätzung.