Website mit KI erstellen: Vom Briefing zur fertigen Seite

Um eine Website mit KI zu erstellen, beschreibst du die Website in normaler Sprache, lässt ein KI-Tool die Seiten erzeugen und prüfst, korrigierst und veröffentlichst sie dann. Das geht in einem KI-Website-Baukasten, der die Website für dich hostet, oder mit einem KI-Agenten wie Claude Code, der echte Dateien schreibt, die dir gehören und die du auf jeden Hoster stellen kannst, etwa auf Vercel.

Drei Wege, eine Website mit KI zu erstellen

Die Tools unterscheiden sich weniger darin, wie schlau die KI ist, als darin, wo deine Website am Ende wohnt. Das entscheidet, was du jeden Monat zahlst und wie leicht du wieder wegkommst.

Wix kann inzwischen aus einem einzigen Prompt einen Website-Entwurf erstellen, und Squarespace und Framer bieten ähnliche KI-Baukästen an. Die Website lebt aber auf deren Plattform, und zwar so lange, wie du zahlst. App-Baukästen im Browser schreiben echten Code und hosten ihn für dich, meist mit Abrechnung über Credits.

Die Vor- und Nachteile im Detail stehen in unserem Vergleich Claude Code vs. Lovable, und die aktuellen Preise jedes Tools findest du bei den besten Vibe-Coding-Tools.

So entscheidest du schnell

• Nimm einen Website-Baukasten, wenn du eine einzige Rechnung und einen Drag-and-drop-Editor willst und die Website selten änderst.
• Nimm einen App-Baukasten im Browser, wenn du innerhalb einer Stunde etwas Funktionierendes willst und es dir nichts ausmacht, in Credits zu zahlen.
• Nimm einen KI-Agenten, wenn du ein individuelles Design willst, die volle Kontrolle über die Dateien und Platz, um später Seiten, einen Blog oder kleine Tools zu ergänzen.

Wenn ich Websites für Kunden baue, nehme ich standardmäßig den Agenten-Weg, weil der Kunde am Ende Dateien hat, die er überallhin mitnehmen kann. Der Rest dieser Anleitung folgt diesem Weg, vom leeren Ordner bis zur Website, die online ist.

Was du vor dem Start brauchst

Schritt 1: Schreib ein einseitiges Briefing

Das Briefing entscheidet über den Großteil der Qualität. KI ist sehr gut darin, klare Anweisungen in Seiten zu verwandeln, und sehr schlecht darin, zu erraten, was dein Unternehmen besonders macht.

Füll das hier aus und speichere es als brief.md in einem leeren Projektordner:

UNTERNEHMEN: [NAME], [WAS DU VERKAUFST], [DEIN EINZUGSGEBIET]
ZIELGRUPPE: [WER KAUFT UND WORÜBER ER SICH VOR DEM KAUF SORGT]
HAUPTAKTION: [TERMIN BUCHEN, ANGEBOT ANFRAGEN, ANRUFEN ODER KAUFEN]
SEITEN: Startseite, Leistungen, Über uns, Kontakt
BELEGE: [ECHTE BEWERTUNGEN, JAHRE AM MARKT, ZERTIFIZIERUNGEN]
FAKTEN, DIE EXAKT STIMMEN MÜSSEN: [TELEFON, ADRESSE, ÖFFNUNGSZEITEN, PREISE]
TON: [DREI WÖRTER, ZUM BEISPIEL HERZLICH, KOMPETENT, KLAR]
LOOK: [MARKENFARBEN ALS HEX-CODES, SCHRIFTEN, FALLS VORHANDEN]
WEBSITES, DIE MIR GEFALLEN: [2 ODER 3 LINKS UND WAS DIR AN JEDER GEFÄLLT]
NIEMALS: Bewertungen, Zahlen oder Auszeichnungen erfinden. Keine Stockfoto-Klischees.

Schritt 2: Ordner und Sicherheitsnetz einrichten

1. Öffne das Projekt. Klick in der Claude-Desktop-App auf den Tab Code, wähle Lokal (Local), klick auf Ordner auswählen (Select folder) und wähl deinen Projektordner.
2. Schalte den Versionsverlauf ein. Bitte Claude, Git einzurichten und nach jeder funktionierenden Version einen Commit zu machen. Git ist ein kostenloses Tool, das Schnappschüsse deines Projekts speichert, damit du zu jeder früheren Version zurückkannst.
3. Speichere deine Regeln. Lass ihn aus Ton, Look, exakten Fakten und der „Niemals“-Liste deines Briefings eine CLAUDE.md-Datei anlegen. Claude Code liest diese Datei zu Beginn jeder Sitzung, und unsere Anleitung zur CLAUDE.md hat fertige Vorlagen.

Claude Code legt außerdem eigene Checkpoints an, die du mit /rewind zurückspulen kannst. Git ist das dauerhafte Sicherheitsnetz, also behalte beides.

Schritt 3: Lass die erste Version erzeugen

Nimm die einfachste Technik, die passt. Für eine bis fünf Seiten reichen einfaches HTML und CSS: Es gibt keinen Build-Schritt und kein Framework, das du ständig aktualisieren musst. Wenn du einen Blog mit vielen Artikeln planst, frag stattdessen nach Next.js, und Claude Code sagt dir, ob er vorher etwas installieren muss.

Starte im Plan-Modus, damit Claude erst vorschlägt und dann schreibt. In der Desktop-App wählst du Plan in der Modusauswahl neben dem Senden-Button, im Terminal drückst du Shift+Tab, bis du plan mode siehst.

Lies brief.md und CLAUDE.md. Plane eine Website mit [ANZAHL] Seiten für
dieses Unternehmen in einfachem HTML und CSS, Mobile First. Liste für
jede Seite die Abschnitte auf, eine Entwurfsüberschrift für jeden
Abschnitt und alles, was du von mir brauchst. Schreib keinen Code,
bevor ich den Plan freigebe.

Beantworte seine Fragen und gib den Plan frei. Wechsle dann in den Modus Manual, um jede Änderung einzeln freizugeben, oder in Accept edits, um hinterher zu prüfen, damit er bauen kann.

Um das Ergebnis zu sehen, öffnest du die Browser-Ansicht (Browser pane) mit Cmd+Shift+B auf dem Mac oder Strg+Umschalt+B unter Windows und bittest Claude, index.html dort zu öffnen.

Schritt 4: Verfeinere sie Abschnitt für Abschnitt

Hier wird die Website zu deiner. Kurze, konkrete Nachrichten funktionieren viel besser als lange Aufsätze, und jede einzelne lässt sich leicht rückgängig machen.

• Eine Änderung pro Nachricht. Kleine Schritte halten Fehler klein und leicht rückgängig zu machen.
• Zeigen statt beschreiben. Zieh einen Screenshot ins Eingabefeld und sag, was sich ändern soll.
• Prüf oft die Handybreite. Viele deiner Besucher kommen über das Handy.
• Nur echte Inhalte. Veröffentliche nie von der KI erfundene Bewertungen, Kundenlogos oder Statistiken. Das führt Kunden in die Irre und kann gegen Verbraucherschutzregeln verstoßen.
• Rückgängig machen, dann kleiner fragen. Wenn eine Änderung etwas kaputtmacht, lass Claude sie zurücknehmen oder führ /rewind aus und versuch es dann in einem kleineren Schritt.

Schritt 5: Veröffentliche sie auf Vercel

Vercel ist ein Hosting-Dienst: Er hält deine Website online und gibt jedem Deployment eine kostenlose Adresse auf vercel.app, die du teilen kannst, bevor du eine eigene Domain hast.

Netlify und Cloudflare Pages hosten ebenfalls statische Websites und haben kostenlose Pläne. Lies bei jedem Anbieter die Bedingungen zur kommerziellen Nutzung, bevor du dich für ein Unternehmen darauf verlässt.

Option A: per Drag-and-drop, ohne Terminal

1. Öffne Vercel Drop. Geh eingeloggt auf vercel.com/drop (so funktioniert Vercel Drop).
2. Zieh den Ordner hinein. Zieh deinen Projektordner auf die Seite.
3. Veröffentliche. Wähl dein Team, benenne das Projekt und klick auf Deploy. Wenn es fertig ist, bekommst du eine Live-URL.
4. Später aktualisieren. Zieh den Ordner im Vercel-Dashboard auf das Projekt, und Vercel veröffentlicht eine neue Produktionsversion.

Option B: Lass Claude Code das Deployment machen

Frag: „Veröffentliche diese Website mit der Vercel CLI in der Produktion und führ mich durch die Anmeldung.“ Die CLI (das Kommandozeilen-Tool) braucht Node.js, und Claude sagt dir, falls es fehlt. Das sind die Befehle, die er ausführt, und unter Windows sind sie in PowerShell dieselben:

# Das Vercel-Kommandozeilen-Tool installieren (braucht Node.js)
$ npm i -g vercel
# Anmelden: Ein Browserfenster öffnet sich
$ vercel login
# Zuerst ein Preview-Deployment zum Prüfen erstellen
$ vercel
# In der Produktion veröffentlichen
$ vercel deploy --prod
$ 

Sobald du die Website öfter bearbeitest, verbinde das Projekt stattdessen mit einem GitHub-Repository. Vercel veröffentlicht dann jeden Push automatisch, mit Vorschauen für Nebenbranches und der Produktion für deinen Hauptbranch.

Schritt 6: Verbinde deine Domain

1. Füg die Domain hinzu. Öffne in deinem Vercel-Projekt Settings > Domains und klick auf Add Domain.
2. Nimm die www-Version mit. Wenn du example.com hinzufügst, schlägt Vercel vor, auch www.example.com hinzuzufügen, und empfiehlt www als Hauptadresse.
3. Trag die DNS-Einträge ein, die Vercel anzeigt, und zwar bei deinem Registrar (der Firma, bei der du die Domain gekauft hast).
4. Warte auf das Häkchen. DNS-Änderungen können eine Weile brauchen, bis sie sich verbreitet haben, und das HTTPS-Zertifikat (das Schloss-Symbol) wird für dich eingerichtet.

Schritt 7: SEO-Grundlagen, damit Google dich findet

SEO (Suchmaschinenoptimierung) heißt, Seiten so zu gestalten, dass Suchmaschinen sie leicht verstehen und für zeigenswert halten. Googles eigener Startleitfaden zur Suchmaschinenoptimierung ist kurz und gut lesbar, und das hier sind die Teile, die für eine kleine Website am meisten zählen.

Zwei Dinge kannst du dir sparen: Laut Google wird das Meta-Keywords-Tag nicht genutzt, und Länge allein hilft keiner Seite beim Ranking.

Mach einen SEO-Durchgang über die ganze Website:
1. Schreib für jede Seite einen eigenen Titel (unter 60 Zeichen) und eine
   Meta-Beschreibung (unter 155 Zeichen), mit Firmennamen und Ort.
2. Ergänze aussagekräftigen Alt-Text für jedes relevante Bild.
3. Erstelle sitemap.xml und robots.txt für https://www.[DEINE DOMAIN].de
4. Füg LocalBusiness-JSON-LD hinzu und nutze dafür nur Fakten aus brief.md.
   Fehlt ein Wert, frag mich, statt ihn zu erfinden.
5. Liste alles auf, was du nicht erledigen konntest, und warum.

Sag Google, dass die Website existiert

1. Leg eine Property an. Füg in der Google Search Console eine Domain-Property hinzu. Google bestätigt sie über einen DNS-Eintrag bei deinem Registrar, und sie deckt die Version mit und ohne www ab.
2. Reich die Sitemap ein. Gib im Bericht „Sitemaps“ die URL deiner Sitemap ein.
3. Beantrage die Indexierung. Prüf die URL deiner Startseite und klick auf Indexierung beantragen.

Google behandelt eine Sitemap als Hinweis, und eine beantragte Indexierung garantiert nicht, dass eine Seite indexiert wird. Oft dauert es etwa einen Tag, manchmal ein oder zwei Wochen.

Kannst du auf dieselbe Art eine App mit KI bauen?

Ja, bei einfachen Apps. Ein Buchungstool, ein Angebotsrechner oder ein kleines Kundenportal folgen denselben Schritten, aber das Risiko ändert sich, sobald es Nutzerkonten, Zahlungen oder gespeicherte Kundendaten gibt.

Nutze für Logins und Zahlungen etablierte Dienste statt selbst geschriebenem Code, trenn Testdaten von echten Daten und lass die App vor dem Start von einem Entwickler prüfen. Die echten Risiken und eine Sicherheits-Checkliste findest du in unserem Artikel darüber, ob Vibe Coding schlecht ist.

Dein nächster Schritt

Schreib dein Briefing heute Abend mit der Vorlage oben, auch wenn du erst am Wochenende baust, denn dieser Schritt entscheidet am stärksten über die Qualität. Bau dann nur die Startseite, veröffentliche sie mit Vercel Drop unter einer kostenlosen vercel.app-Adresse und schau sie dir auf dem Handy an, bevor du weitere Seiten hinzufügst.

Wenn du lieber mit einer einzelnen Landingpage anfängst, folge der Anleitung, wie du eine Website per Vibe Coding baust, Prompt für Prompt. Der Vibe-Coding-Kurs Builders geht tiefer auf Planung, Kundenpsychologie und das SEO-Setup hinter einer Website ein, die Anfragen bringt.