Kann ich eine Website mit KI erstellen, ohne programmieren zu können?

Ja, für eine einfache Marketing-Seite oder ein Portfolio. Ein Coding-Agent schreibt die Dateien und führt die Befehle aus; deine Aufgabe ist es, klar zu beschreiben, was du willst, das Ergebnis im Browser zu prüfen und vor dem Livegang ein paar Grundchecks durchzuführen.

Welchen Stack sollte ich nehmen, um eine Website mit KI zu erstellen?

Für eine Content-Seite (Marketing-Seiten, Blog, Portfolio) ist Astro ein guter Standard. Brauchst du Logins, ein Dashboard oder eine Datenbank, passt Next.js besser; für eine einzelne Seite reichen reines HTML und CSS.

Sollte ich einen KI-Website-Builder oder einen Coding-Agenten nutzen?

KI-Site-Builder liefern in Minuten eine Live-Seite, binden dich aber an ihre Plattform. Ein Coding-Agent braucht mehr Schritte; dafür gehört dir der Code, du kannst überall hosten und alles ändern.

Rankt eine mit KI erstellte Website bei Google?

Technisch ja: Mit passenden Titeln, Meta-Descriptions, einer Sitemap und schnell ladenden Seiten crawlt Google sie wie jede andere Seite. Das Ranking hängt von Qualität und Nutzen der Inhalte ab, nicht davon, ob KI den Code geschrieben hat.

Wo kann ich eine mit KI erstellte Website hosten?

Vercel, Netlify und Cloudflare Pages sind gängige Optionen für statische Seiten; alle drei lassen sich mit einem GitHub-Repo verbinden und deployen bei jedem Push neu. Deine eigene Domain trägst du im Dashboard ein und aktualisierst den DNS-Eintrag bei deinem Registrar.

Website mit KI erstellen: Schritt-für-Schritt-Anleitung

Um eine Website mit KI zu erstellen, beschreibst du die Seite in einem kurzen, konkreten Briefing einem Coding-Agenten (Claude Code, Codex, Gemini CLI und Ähnliche); der Agent richtet das Projekt ein und schreibt die Seiten, du prüfst sie im Browser und bittest um Korrekturen, und am Ende deployst du sie zu Vercel, Netlify oder Cloudflare Pages. Für eine Marketing-Seite oder ein Portfolio kann das einen Nachmittag dauern. Den Unterschied machen der richtige Stack, ein guter erster Prompt und eine Checkliste vor dem Launch.

Diese Anleitung führt den ganzen Weg vom leeren Ordner zur Live-Seite: welchen Stack du wählst und warum, was in den ersten Prompt gehört, wie du das Design per Screenshots schärfst, Mobile- und Barrierefreiheits-Checks, SEO-Grundlagen, ein Kontaktformular, eine Domain und das Deployment. Am Ende steht eine Liste der Fehler, die KI gern macht, und ein paar Sicherheitsregeln.

Erste Entscheidung: KI-Site-Builder oder Coding-Agent?

Es gibt zwei Wege, und beide zählen als „Website mit KI bauen“.

KI-Website-Builder (die KI-Funktionen in Plattformen wie Wix, Framer oder Webflow oder browserbasierte App-Generatoren) machen aus einem Satz in Minuten eine Live-Seite. Sie sind schnell, und Hosting ist inklusive. Der Preis dafür: Der Code bleibt meist auf der Plattform, du zahlst monatlich, du kannst nur, was die Plattform erlaubt, und ein Umzug ist schwer.

Coding-Agenten laufen auf deinem Rechner, in deinem Ordner. Sie schreiben Dateien, führen npm install aus, lesen Fehler und beheben sie. Das braucht mehr Schritte; dafür bekommst du am Ende ein ganz normales Code-Repository. Du kannst es in kostenlosen Tarifen hosten, jedem Entwickler übergeben und jede Bibliothek ergänzen, die du willst.

	Site-Builder	Coding-Agent
Zeit bis zum ersten Ergebnis	Minuten	Ein bis zwei Stunden
Wem der Code gehört	Meist der Plattform	Dir
Hosting	Deren, im Bezahltarif	Überall, oft kostenlos
Individuelle Wünsche	So weit die Plattform es erlaubt	So weit Code reicht
Lernkurve	Sehr niedrig	Etwas Routine mit Terminal und Git

Diese Anleitung behandelt den zweiten Weg: eine Seite per Vibe Coding bauen, bei der der Agent den Code schreibt und du das Ergebnis steuerst. Wenn du noch keinen Agenten gewählt hast, lies die besten KI-Coding-CLI-Tools.

1. Die Grundlagen installieren

Du brauchst drei Dinge:

Node.js (die LTS-Version). Astro und Next.js laufen darauf.
Git und ein GitHub-Konto. Das ist dein Rückgängig-Knopf und der einfachste Weg zur Anbindung ans Hosting.
Einen Coding-Agenten, zum Beispiel:

npm install -g @anthropic-ai/claude-code   # Claude Code
npm install -g @openai/codex               # Codex

Lege dann einen leeren Ordner an, initialisiere Git und starte dort den Agenten:

mkdir cafe-site && cd cafe-site
git init
claude

Git zuerst zu starten ist wichtig: Wenn der Agent etwas kaputt macht, zeigt git diff, was sich geändert hat, und git checkout . nimmt es zurück.

2. Einen Stack wählen: Astro, Next.js oder reines HTML

Der Agent kann alles schreiben, greift ohne Vorgabe aber womöglich zur schwersten Option, die ihm einfällt. Grob gilt:

Reines HTML + CSS: eine einseitige Einladung, ein Produkt-Teaser, eine „Coming soon“-Seite. Kein Build-Schritt, keine Abhängigkeiten, läuft überall.
Astro: Marketing-Seiten, Firmenseiten, Blogs, Portfolios. Seiten werden standardmäßig zu reinem HTML gerendert, sind also schnell und SEO-freundlich, und Blogbeiträge liegen als Markdown-Dateien vor. Das ist mein Standard für Content-Seiten.
Next.js: App-lastige Projekte mit Nutzerkonten, Dashboards, Datenbank oder Zahlungen. Für eine reine Visitenkarten-Seite übertrieben.

Wenn du unsicher bist, fang mit Astro an. Es kann später immer noch ein Kontaktformular oder eine kleine API übernehmen.

3. Der erste Prompt, mit Designvorgaben

Der häufigste Fehler ist, „mach mir eine Café-Website“ zu tippen. Du bekommst das Template, das alle schon gesehen haben: violetter Verlauf, zentrierte Überschrift, drei Karten. Gib in der ersten Nachricht Inhalt, Struktur und Designrichtung vor:

Build a marketing site with Astro for a neighbourhood cafe called "Piggy Bank Coffee".

Pages: Home, Menu, About, Contact.
Home: a large photo area (placeholder for now), a one-line tagline,
a "See the menu" button, opening hours, address and a map link.
Menu: a list grouped by category (coffee, pastries, breakfast), prices in USD.

Design direction: warm and simple. Cream background (#f6f0e6), dark brown text (#2b1d14),
terracotta accent (#c2603a). Serif for headings, a readable sans-serif for body text
(Google Fonts). Generous whitespace, small corner radius, no shadows, no gradients.
Mobile first.

Rules:
- No Tailwind; use plain CSS and CSS custom properties.
- html lang="en".
- Every page gets a unique <title> and meta description.
- When done, start `npm run dev` and list the files you created.

Warum das funktioniert: Du hast konkrete Farben und Schriften genannt, eine „Lass das“-Liste (Verläufe, Schatten) mitgegeben sowie Seitenstruktur und Inhalt. Je weniger der Agent raten muss, desto ähnlicher wird das Ergebnis deiner Vorstellung. Du kannst auch einen Screenshot einer Seite anhängen, die dir gefällt: „Match the spacing and typography feel of this site; don’t copy its colours or content.“

4. Das Design per Screenshots verfeinern

Sobald der Agent npm run dev ausführt, öffnet sich die Seite meist unter http://localhost:4321 (Astro) oder http://localhost:3000 (Next.js). Ab hier läuft eine Schleife:

Öffne die Seite und mach einen Screenshot von dem, was dir nicht gefällt.
Gib das Bild dem Agenten (die meisten CLIs nehmen Bilder per Drag-and-drop oder Einfügen an) und bitte ihn, eine Sache zu korrigieren.
Prüfe das Ergebnis; wenn es gut ist, committe.

The attached image is the home page on mobile. Three problems:
1. The tagline doesn't fit; the line breaks look bad.
2. The "See the menu" button touches the screen edge.
3. The opening-hours table overflows horizontally.
Fix only these. Don't change anything else.

„Don’t change anything else“ ist klein, aber wichtig: Agenten „verbessern“ beim Korrigieren gern benachbarte Komponenten mit. Führe nach jedem guten Schritt git add -A && git commit -m "..." aus, damit du bei einem Fehlschlag der nächsten Anfrage zum letzten guten Stand zurückkehren kannst.

Wenn der Agent selbst einen Browser steuern soll, füge einen Playwright-MCP-Server hinzu; er kann die Seite öffnen, eigene Screenshots machen und beheben, was er sieht.

5. Mobile- und Barrierefreiheits-Checks

KI-gebaute Seiten sehen am Desktop oft gut aus und zerfallen auf dem Handy. Vor dem Launch:

Schalte in den Dev-Tools deines Browsers den Gerätemodus ein und prüfe mindestens 375 px (Handy), 768 px (Tablet) und 1440 px (Desktop). Eine horizontale Scrollleiste bedeutet, dass etwas überläuft.
Starte Lighthouse in den Chrome DevTools. Es bewertet Performance, Barrierefreiheit, Best Practices und SEO und listet konkrete Warnungen auf.
Navigiere nur mit der Tastatur (Tab, Enter) durch die Seite. Erreichst du jeden Link und Button, und siehst du, wo der Fokus liegt?

Gib die Warnungen direkt an den Agenten weiter:

The Lighthouse accessibility report says: [paste the warnings].
Fix them. Also check that every image has meaningful alt text, every form field
has a label, text/background contrast meets WCAG AA and keyboard focus is visible.

6. SEO-Grundlagen

Der Agent kennt das alles, lässt es aber oft halbfertig, wenn du nicht danach fragst. Checkliste:

Ein eindeutiger <title> pro Seite (etwa 60 Zeichen) und eine Meta-Description (etwa 150–160 Zeichen).
Ein <h1> pro Seite mit sinnvoller <h2>/<h3>-Reihenfolge darunter.
sitemap.xml und robots.txt. In Astro erzeugt die Integration @astrojs/sitemap die Sitemap; dafür muss die site-URL in astro.config gesetzt sein.
Open-Graph-Tags (og:title, og:description, og:image); Link-Vorschauen in Chat-Apps und sozialen Netzwerken kommen daher.
Eine kanonische URL und das richtige lang-Attribut.
Bei einem lokalen Geschäft schreibe Adresse, Telefonnummer und Öffnungszeiten als Text (nicht in ein Bild eingebrannt) und ergänze optional strukturierte LocalBusiness-Daten.

Run an SEO audit: list every page's title and meta description and fix
any that are missing or too long. Add @astrojs/sitemap, create robots.txt,
put Open Graph tags in the shared layout. Summarise the changes.

7. Ein Kontaktformular

Eine statische Seite hat keinen eigenen Server, also müssen Formularabsendungen irgendwohin gehen. Drei vernünftige Optionen:

Ein Formular-Dienst: etwa Formspree oder Netlify Forms, wenn du auf Netlify hostest. Das Formular sendet an den Dienst, und du bekommst eine E-Mail. Der einfachste Weg.
Eine Serverless-Funktion: Eine kleine API-Route in Astro oder Next.js nimmt das Formular entgegen und schickt es über eine E-Mail-API weiter. Der API-Key liegt nur auf dem Server, in einer Umgebungsvariable.
Nur ein mailto:-Link: kein Formular, kein Problem. Für ein kleines Unternehmen oft genug.

Was du auch wählst, lass den Agenten serverseitige Validierung der Pflichtfelder, einen einfachen Spam-Schutz (ein verstecktes Honeypot-Feld oder das Captcha des Dienstes) und einen klaren „Nachricht erhalten“-Zustand ergänzen. Da du personenbezogene Daten erhebst, gehört auch ein kurzer Datenschutzhinweis dazu.

8. Domain und Deployment

Pushe die Seite zuerst zu GitHub:

git remote add origin git@github.com:you/cafe-site.git
git push -u origin main

Verbinde dann einen der drei gängigen Hosts. Alle bauen und deployen bei jedem Push neu, sobald das Repo verbunden ist, und können Preview-URLs für Branches oder Pull Requests liefern:

Vercel: vom Next.js-Team, kommt auch mit Astro gut zurecht. CLI: npx vercel für eine Preview, npx vercel --prod für Produktion.
Netlify: bei statischen Seiten sehr etabliert, mit eingebauten Formularen. CLI: npx netlify deploy --prod.
Cloudflare Pages: hostet im Netzwerk von Cloudflare; praktisch, wenn deine Domain schon bei Cloudflare liegt. CLI: npx wrangler pages deploy dist.

Die Build-Einstellungen werden meist automatisch erkannt: Bei Astro lautet der Build-Befehl npm run build und der Ausgabeordner dist. Trag deine Domain im Dashboard des Hosts ein und gib dann den DNS-Eintrag, den er dir nennt (meist ein A- oder CNAME-Eintrag), bei deinem Registrar ein. HTTPS-Zertifikate werden automatisch ausgestellt.

Füge die Seite nach dem Launch in die Google Search Console ein und reiche die URL deiner Sitemap ein, damit Google sie früher findet.

Wo die KI danebenliegt

Template-Look. Ohne Designvorgabe bekommt alles denselben Verlauf und dasselbe Kartenraster. Gib Farben, Schriften und eine „Lass das“-Liste vor.
Erfundene Inhalte. Agenten schreiben bereitwillig falsche Kundenstimmen, erfundene Zahlen („10.000+ zufriedene Kunden“) und Auszeichnungen, die es nicht gibt. Lies jede Zeile und lösche, was nicht stimmt.
Bilder mit Lizenzrisiko. Er verlinkt womöglich beliebige Bilder aus dem Netz. Nutze eigene Fotos oder ordentlich lizenzierte.
Unnötige Abhängigkeiten. Eine große Animations- oder UI-Bibliothek für eine einfache Speisekarte. Füge die Regel „vor neuen Paketen fragen“ hinzu.
Kaputte Links und leere hrefs. Such nach Buttons, die als href="#" stehen geblieben sind, und klicke vor dem Launch jeden Link an.
Nur am Desktop getestet. Der Agent prüft meist nur die Standard-Fenstergröße; fordere Mobile ausdrücklich an.
Vorzeitiger Erfolgsmeldung. Ein Agent kann „fertig“ sagen, obwohl der Build fehlschlägt. Führe npm run build vor dem Deploy selbst aus; er muss fehlerfrei durchlaufen.

Sicherheit

Auch eine Visitenkarten-Seite braucht ein paar Regeln:

Halte Secrets in einer .env-Datei und stelle sicher, dass .env in .gitignore steht. Trag bei deinem Host dieselben Werte als Umgebungsvariablen im Dashboard ein.
Füge nie API-Keys in den Chat ein. Sag dem Agenten „der Key liegt in .env als RESEND_API_KEY“, nicht den Wert selbst. Auch der Chatverlauf wird irgendwo gespeichert.
Keine Secrets im Client-Code. Jeder Key, der in Browser-JavaScript ausgeliefert wird, ist ein Key, den jeder lesen kann. E-Mail- und Zahlungs-Keys gehören nur auf den Server.
Lies, was der Agent ausführt. Genehmige Befehle wie rm -rf, curl ... | sh, globale Installationen oder git push --force nicht automatisch.
Sieh dir den Diff an, bevor du committest. git diff ist der einfachste Weg, sowohl Bugs als auch ein versehentlich eingeschlichenes Secret zu finden.

Mit AgentVera umsetzen

Alles oben funktioniert mit einem Terminal und einem Browser. Ein paar Dinge machen es in meinem eigenen Workflow angenehmer, und ich nutze sie in AgentVera:

Parallele Agenten in getrennten Worktrees. Zum Beispiel arbeitet ein Claude-Code-Agent an Inhalt und SEO, während ein Codex-Agent an der UI arbeitet; jeder sitzt in einem eigenen Git-Worktree, sodass keiner den anderen überschreibt. Alle erscheinen in einem Workspace-Raster.
Preview-Umgebungen. Der Dev-Server jedes Worktrees bekommt eine eigene Adresse; Preview-Umgebungen können Seiten in Mobil-, Tablet- und Desktop-Größe erfassen und pixelgenau mit einer früheren Baseline vergleichen.
Agent-Browser. Agenten nutzen über Playwright ein Chrome mit separatem Profil, und du siehst im Agent-Browser live, was sie tun.
Review und Token-Tracking. Wenn ein Turn endet, lässt das Code-Review ein zweites Modell lesen, was der Agent geschrieben hat, und der Token-Verbrauch jedes Agenten ist sichtbar. Den Diff liest du vor dem Merge trotzdem selbst.
Vercel. Ist das Projekt mit Vercel verknüpft, zeigt der Vercel-Tab Deployments und Build-Logs, und du kannst einen fehlgeschlagenen Build an einen Agenten übergeben.

Nichts davon ist Pflicht; es macht es nur leichter, den Überblick zu behalten, sobald du mit mehr als einem Agenten arbeitest. Zur Methode selbst siehe parallele Coding-Agenten.

Kurze Checkliste

Stack gewählt (Astro für eine Content-Seite)
Erster Prompt enthält Seiten, Inhalt, Farben, Schriften und eine „Lass das“-Liste
Ein Commit nach jedem guten Schritt
Bei 375, 768 und 1440 px geprüft; Lighthouse-Warnungen behoben
Jede Seite hat Titel, Meta-Description und ein h1; sitemap und robots.txt existieren
Keine erfundenen Kundenstimmen, Zahlen oder Bilder mehr übrig
Das Formular funktioniert, mit Spam-Schutz und Datenschutzhinweis
.env liegt nicht in Git; Secrets nur auf dem Server
npm run build läuft durch; die Seite ist mit deiner Domain und HTTPS live

Fazit

Eine Website mit KI zu erstellen heißt heute weniger, Code zu schreiben, und mehr, gut zu beschreiben und sorgfältig zu prüfen. Wähle den passenden Stack, gib im ersten Prompt Designvorgaben mit, geh in kleinen Schritten vor und committe jeden, und führe vor dem Launch Mobile-, Barrierefreiheits- und SEO-Checks durch. Der Agent schreibt schnell; du bist es weiterhin, der entscheidet, was richtig ist.