Website mit KI erstellen: Anleitung in 5 Schritten

Du hast in zehn Minuten einen Website-Entwurf, der richtig gut aussieht. Eine KI hat ihn gebaut, du hast ein paar Sätze beschrieben, fertig. Und jetzt? Online steht er damit noch lange nicht.

Genau hier hören die meisten Anleitungen auf. Du willst eine Website mit KI erstellen, klickst dich durch ein Tool, bist begeistert vom Ergebnis und stehst dann vor der Frage, die niemand beantwortet: Wie kommt das Ding ins Netz? Und zwar so, dass es schnell lädt, auf dem Handy funktioniert und für ein deutsches Gewerbe rechtlich sauber ist.

Diese Anleitung zeigt dir den kompletten Weg. In fünf Phasen, vom ersten Entwurf bis zur fertigen Seite. Mit den Stellen, an denen es haken wird, bevor du sie selbst entdeckst.

Was die KI dir abnimmt und was nicht

Sei kurz ehrlich zu dir selbst, bevor du anfängst. Die KI ist wahnsinnig gut darin geworden, dir einen Entwurf zu bauen. Layout, Farben, erste Texte, eine sinnvolle Struktur. Das alles entsteht in Minuten statt Tagen.

Was die KI nicht macht: Sie entscheidet nicht, ob deine Website überhaupt das Richtige sagt. Sie kennt deine Kunden nicht. Sie weiß nicht, warum jemand bei dir kauft und nicht beim Nachbarn. Und sie kümmert sich nicht von allein darum, dass die Seite live geht, gefunden wird und rechtlich passt.

Anders gesagt: Die KI baut, was du beschreibst. Je klarer du weißt, was eine gute Website ausmacht, desto besser wird das Ergebnis. Wenn du da noch unsicher bist, lies vorher diese vier UX-Grundlagen. Sie helfen dir, die KI in die richtige Richtung zu schicken.

Phase 1: Den Entwurf in Claude Design bauen

Claude Design ist ein Werkzeug von Anthropic, mit dem du per Beschreibung Oberflächen entwerfen lässt. Du tippst, was du brauchst, und bekommst einen fertigen Entwurf zurück, den du direkt weiter anpassen kannst.

Fang nicht mit "bau mir eine Website" an. Das führt zu beliebigen Ergebnissen, die du von jedem Baukasten auch bekommst. Gib der KI zuerst Halt:

1. Beschreibe dein Geschäft konkret. Wer bist du, was bietest du an, für wen. Zwei, drei Sätze reichen, aber sie müssen spezifisch sein.
2. Lege ein Design System fest. Das sind deine festen Gestaltungsregeln: zwei, drei Farben, eine Schriftart, ein einheitlicher Stil für Buttons. Wenn du das vorgibst, sieht jede Seite zusammengehörig aus statt zusammengewürfelt.
3. Dann erst die einzelne Seite. Startseite, Über mich, Kontakt. Eine nach der anderen.

Danach iterierst du. Iterieren heißt: Du schaust dir das Ergebnis an, sagst was dir nicht gefällt und lässt es ändern. "Die Überschrift ist zu lang." "Mach den Button blau." "Der Abschnitt soll persönlicher klingen." So tastest du dich Schritt für Schritt an das ran, was du wirklich willst.

Phase 2: Erst lokal testen, dann ans Netz denken

Das ist der Schritt, den fast alle überspringen. Und der dir am meisten Ärger erspart.

Bevor du an Server, Domain oder irgendeinen Account denkst, exportierst du deinen Entwurf als HTML-Datei. In Claude Design geht das über "Export as standalone HTML". Das packt alles in eine einzige Datei: Bilder, Schriften, den ganzen Code. Diese Datei öffnest du einfach im Browser auf deinem eigenen Rechner. Kein Server nötig, keine Anmeldung, nichts.

Jetzt beginnt die eigentliche Arbeit. Drei Fragen stellst du dir Sektion für Sektion:

• Liest sich der Text so, wie du wirklich sprichst? KI-Texte klingen oft glatt und austauschbar. Lies jeden Absatz laut. Würdest du das so einem Kunden sagen?
• Stimmt der Style überall? Gleiche Abstände, gleiche Schriftgrößen, konsistente Buttons. Das Auge merkt Unstimmigkeiten sofort.
• Wie sieht das auf dem Handy aus? Zieh das Browserfenster ganz schmal oder öffne die Datei auf deinem Smartphone. Über die Hälfte deiner Besucher kommt vom Handy. Wenn die Seite da bröckelt, ist sie kaputt.

Erst wenn Wording, Style und mobile Ansicht passen, kommt der technische Teil. Alles, was du jetzt korrigierst, korrigierst du gratis. Alles, was du später korrigierst, kostet dich Nerven mit Servern und Accounts dazu.

Phase 3: Was nach dem Entwurf wirklich kommt

Eine schöne HTML-Datei auf deinem Rechner ist noch keine Website. Sie liegt bei dir, niemand sonst kann sie sehen. Für eine echte Website hängt da noch einiges dran. Kein Vorwurf, aber besser du weißt das jetzt als nach zwei Stunden frustriertem Herumklicken.

Vier Dinge brauchst du, damit aus der Datei eine erreichbare Website wird:

1. Einen Hosting-Anbieter. Das ist ein Server, also ein Computer, der rund um die Uhr läuft und deine Dateien an jeden ausliefert, der deine Adresse aufruft.
2. Eine Domain. Das ist deine Adresse im Netz, also sowas wie meinname.de. Kostet je nach Endung 10 bis 20 Euro im Jahr.
3. HTTPS. Das ist das Schloss-Symbol in der Browserzeile. Es verschlüsselt die Verbindung. Google behandelt HTTPS seit 2014 als Rankingsignal. Ohne das Schloss warnen Browser deine Besucher sogar mit „nicht sicher".
4. Eine Lösung für Formulare. Und genau hier wird es knifflig.

Warum dein Kontaktformular nicht einfach funktioniert

Eine statische HTML-Datei kann keine E-Mails versenden. Sie zeigt nur an, sie rechnet nicht. Wenn jemand dein Kontaktformular ausfüllt und auf "Senden" klickt, passiert ohne weiteres Zutun: nichts.

Damit die Nachricht bei dir ankommt, brauchst du entweder einen externen Dienst, der das Formular entgegennimmt, oder einen Server mit echten Serverfunktionen. Für die meisten kleinen Websites reicht der externe Dienst völlig. Dazu gleich mehr.

DSGVO ist bei gewerblichen Seiten Pflicht

Sobald deine Website gewerblich ist, also für dein Geschäft, brauchst du in Deutschland drei Dinge:

• ein Impressum
• eine Datenschutzerklärung
• einen Hinweis auf Cookies, falls deine Seite welche setzt

Das ist keine Kür. Fehlt das Impressum, riskierst du eine Abmahnung. Die KI baut dir auf Wunsch eine Vorlage, aber prüfen musst du sie selbst oder mit einem Anwalt. Eine Anleitung dazu sprengt diesen Artikel, halte es einfach im Hinterkopf, bevor du live gehst.

Phase 4: Der schnellste europäische Weg

Wenn deine Website rein statisch ist, also nur Inhalte zeigt und keinen Shop und kein Login hat, dann geht das Online-Stellen erstaunlich einfach.

Das Prinzip: Du legst deine Dateien in einem Online-Projektordner bei GitHub ab. GitHub ist ein kostenloser Speicherort für Code und Dateien, eine Art Dropbox für Websites. Diesen Ordner verbindest du mit einem Hosting-Anbieter. Der holt sich deine Dateien automatisch, stellt sie online und richtet HTTPS für dich ein. Aktualisierst du später eine Datei, läuft der Rest von allein.

Zwei europäische Anbieter eignen sich gut:

IONOS Deploy Now kommt von der deutschen Firma IONOS. Kostenloser Einstieg, deutsche Server, DSGVO-konform. Du brauchst ein GitHub-Konto und musst grob verstehen, wie man dort Dateien ablegt. Rechne mit etwa zwei Stunden Einarbeitung, wenn GitHub für dich neu ist.

Statichost kommt aus Schweden. Jede Ebene läuft auf europäischer Infrastruktur, von der Veröffentlichung bis zur Auslieferung, ganz ohne Umweg über US-Anbieter. Es gibt einen kostenlosen Tarif für kleine Websites. Der Einstieg ist ähnlich wie bei IONOS.

Für die Formulare nimmst du einen externen Dienst. Formspree und Forminit (früher GetForm) empfangen die Einträge aus deinem Formular und schicken dir eine E-Mail. Du baust einen kleinen Code-Schnipsel ein, den dir die Dienste vorgeben, und fertig. Das Basispaket ist jeweils kostenlos und reicht für die ersten hundert Anfragen im Monat locker.

Phase 5: Der robuste Weg mit Hetzner und Coolify

Du willst es einmal richtig aufsetzen und danach Ruhe haben? Dann lohnt sich ein eigener kleiner Server. Klingt nach viel, ist aber an einem Nachmittag erledigt.

Hetzner ist ein deutsches Unternehmen mit Rechenzentren in Nürnberg, Falkenstein und Helsinki. Ein kleiner virtueller Server kostet dort rund 4 Euro im Monat. Darauf installierst du Coolify, eine kostenlose Software, die das Veröffentlichen einer Website per Mausklick erledigt.

So läuft das ab:

1. Du buchst bei Hetzner einen kleinen Server.
2. Du gibst einmal über das Terminal einen einzigen Befehl ein, der Coolify installiert. Das Terminal ist das schwarze Eingabefenster, in das man Computerbefehle tippt. Du brauchst es genau dieses eine Mal.
3. Ab da läuft alles über eine Oberfläche im Browser: GitHub verbinden, Veröffentlichung per Klick starten, HTTPS automatisch.

Das Setup braucht etwa zwei bis drei Stunden, wenn du es zum ersten Mal machst. Danach hast du volle Kontrolle, vollständige DSGVO-Konformität und keinen Anbieter, der dir morgen die Konditionen ändert. Für jemanden, der den einen Nachmittag investiert, ist das die solideste Grundlage.

Wann du dir besser einen Profi holst

KI nimmt dir viel ab. Trotzdem gibt es Situationen, in denen Eigenregie am Ende teurer wird als ein Profi von Anfang an. Drei davon solltest du kennen.

Du hast schon eine Website, die bei Google rankt? Dann ist Vorsicht angesagt. Ohne saubere Weiterleitungen von den alten auf die neuen Adressen verlierst du Positionen, die du dir über Monate erarbeitet hast. Das passiert schnell und erholt sich nur langsam. Wie du einen Wechsel richtig planst, steht in unserem Projektplan für den Website-Relaunch.

Zuverlässiger E-Mail-Versand ist dir wichtig? Ein falsch eingerichteter Mail-Server landet im Spam-Ordner oder sendet gar nicht erst. Das Tückische: Du merkst es oft erst, wenn Anfragen ausbleiben, und fragst dich, warum sich niemand meldet.

Und wenn du ehrlich noch nicht weißt, was eine gute Website-Struktur ausmacht: Die KI baut, was du beschreibst. Beschreibst du etwas Hübsches ohne klare Struktur, bekommst du etwas Hübsches, das niemand findet. Genau dafür gibt es den Vibe Design Sprint. An einem Tag bauen wir deine Website gemeinsam mit KI, mit dem Blick fürs Ganze, der der KI fehlt: klare Struktur, ein Design das nach dir aussieht und Texte, die Besucher zu Kunden machen.

Dein nächster Schritt

Fang klein an. Öffne Claude Design, beschreibe dein Geschäft und lass dir eine einzige Seite bauen. Exportiere sie als HTML und schau sie dir auf deinem Handy an. Mehr nicht für heute.

Wenn dir das Ergebnis gefällt, hast du die zwei wichtigsten Phasen schon hinter dir. Der Rest, Hosting und Domain, ist danach nur noch Handwerk. Und für den Teil, bei dem du dir unsicher bist, weißt du jetzt, woran du erkennst, dass sich ein Profi lohnt.