Die besten KI-Prompts zum Erstellen einer Website – vom ersten Entwurf bis zum Launch

Was macht einen guten Prompt zum Erstellen einer Website aus?

Die besten KI-Prompts beschreiben das gewünschte Ergebnis, ohne jedes technische Implementierungsdetail vorzugeben. In Coderblock chatten Sie mit der KI, während sie eine echte Full-Stack-Anwendung mit React, TypeScript, Tailwind CSS, einem Backend und einer Postgres-Datenbank erstellt.

Ein guter Ausgangsprompt deckt normalerweise fünf Punkte ab:

1. Zweck: Was sollen Menschen mithilfe der Website erreichen?
2. Zielgruppe: Wer wird sie nutzen?
3. Seiten: Welche zentralen Ansichten werden benötigt?
4. Funktionen: Was müssen Besucher oder Administratoren tun können?
5. Stil: Wie soll die Nutzung aussehen und sich anfühlen?

Sie müssen keine API-Routen, Datenbankmigrationen, Passwort-Hashing-Verfahren oder Deployment-Skripte festlegen. Beschreiben Sie das gewünschte Produkt in einfachen Worten und überlassen Sie die Umsetzung anschließend dem Agenten.

Schritt 1: Mit einem strukturierten Basis-Prompt beginnen

Öffnen Sie ein neues Coderblock-Projekt oder wählen Sie eine der verfügbaren Produktvorlagen aus. Wenn Sie bei null anfangen, verwenden Sie diese Vorlage:

Erstelle eine [Art der Website] für [Zielgruppe].

Ihr Hauptzweck ist es, [wichtigstes Ziel der Nutzer] zu ermöglichen. Erstelle diese Seiten: [Seitenliste]. Füge [wesentliche Funktionen] hinzu. Verwende ein Design im Stil von [visueller Stil] mit [Farben, Typografie oder Layout-Vorgaben]. Gestalte die Website responsiv und sorge dafür, dass sie auf Smartphones und Desktop-Computern einfach zu bedienen ist.

Zum Beispiel:

Erstelle eine Website für einen selbstständigen Fitnesstrainer. Ihr Hauptzweck ist es, die Coaching-Angebote zu erklären und Besuchern die Möglichkeit zu geben, ein Erstgespräch anzufragen.

Erstelle eine Startseite, eine Leistungsseite, ein Trainerprofil, eine Seite mit Kundenstimmen, einen FAQ-Bereich und eine Kontaktseite. Platziere auf der gesamten Website eine deutliche Handlungsaufforderung zur Buchung eines Termins. Verwende einen selbstbewussten, aber einladenden Stil mit Dunkelblau, gebrochenem Weiß und warmen orangefarbenen Akzenten. Gestalte die Website responsiv und lege besonderen Wert auf gute Lesbarkeit auf Mobilgeräten.

Coderblock erstellt die Anwendung und öffnet eine Live-Entwicklungsvorschau unter einer Adresse wie <app>.coderblock.dev. Anschließend können Sie das Ergebnis im Chat weiter verfeinern; Aktualisierungen erscheinen innerhalb weniger Sekunden.

Schritt 2: Eine klare Seitenstruktur anfordern

Wenn die erste Version unvollständig wirkt, sollten Sie die KI nicht einfach bitten, sie „besser zu machen“. Beschreiben Sie stattdessen, was jede Seite vermitteln und zu welcher Handlung sie anregen soll.

Verbessere die Struktur der Startseite. Füge Folgendes hinzu:
- einen Hero-Bereich mit einer klaren Überschrift und einer primären Handlungsaufforderung
- einen Abschnitt mit drei Vorteilen
- einen kurzen Abschnitt zur Funktionsweise
- Kundenstimmen
- einen FAQ-Bereich mit fünf häufig gestellten Fragen
- eine abschließende Aufforderung zur Buchung

Halte jeden Abschnitt kurz und vermeide es, dieselben Aussagen zu wiederholen.

Für eine mehrseitige Unternehmenswebsite können Sie Folgendes versuchen:

Füge separate Seiten für Leistungen, Über uns, Fallstudien und Kontakt hinzu. Verwende auf allen Seiten dieselbe Navigation und dasselbe visuelle System. Erstelle für jede Leistung einen eigenen Abschnitt mit einer kurzen Beschreibung, der vorgesehenen Zielgruppe und dem nächsten Schritt.

Das ist zuverlässiger, als alle denkbaren Seiten und Funktionen auf einmal anzufordern.

Schritt 3: Visuelle Prompts mit konkreten Vorgaben verwenden

Begriffe wie „modern“ oder „schön“ sind subjektiv. Ergänzen Sie stattdessen konkrete, sichtbare Designentscheidungen:

Gestalte die Website in einem klaren redaktionellen Stil neu. Verwende großzügige Weißräume, große Überschriften, zurückhaltende dunkelgrüne Akzente, dezente Rahmen anstelle kräftiger Schatten und eine maximale Inhaltsbreite, bei der Absätze gut lesbar bleiben. Fixiere die Navigationsleiste beim Scrollen und verwandle die mobile Navigation in ein kompaktes Menü.

Sie können auch einzelne Komponenten gezielt optimieren:

Gestalte die Preiskarten so, dass sie sich leichter vergleichen lassen. Hebe den mittleren Tarif hervor, richte die Funktionslisten einheitlich aus, stelle den monatlichen Preis deutlich dar und platziere am unteren Ende jeder Karte eine klare Schaltfläche.

Fordern Sie jeweils nur eine visuelle Änderung an, wenn Sie das Ergebnis genauer steuern möchten.

Schritt 4: Echte Daten und Benutzerkonten hinzufügen

Eine Website wird zur Full-Stack-Anwendung, wenn sie Daten speichert oder Nutzern personalisierten Zugriff gewährt. Beschreiben Sie das gewünschte Verhalten, statt individuellen Authentifizierungscode anzufordern.

Füge eine Registrierung und Anmeldung für Kunden hinzu. Schütze das Konto-Dashboard, sodass nur angemeldete Nutzer darauf zugreifen können. Jeder Kunde darf ausschließlich sein eigenes Profil und seine eigenen Buchungsanfragen anzeigen und bearbeiten. Füge eine Administratoransicht hinzu, in der Mitarbeiter alle Buchungen prüfen und deren Status ändern können.

Der Agent richtet Supabase Auth, die Sitzungsverwaltung, geschützte Routen, Datenbanktabellen und Row Level Security ein. Jede App enthält bereits eine Profiltabelle und eine grundlegende Rollenstruktur. Fordern Sie daher weder eine separate Passworttabelle noch eine eigene JWT-Implementierung an.

Beschreiben Sie bei der Datenmodellierung genau, welche Daten Nutzer erstellen und sehen können:

Füge eine Buchungstabelle mit Leistung, Wunschtermin, Kundennotizen, Status und Erstellungsdatum hinzu. Kunden dürfen nur ihre eigenen Buchungen sehen. Administratoren müssen alle Buchungen anzeigen und den Status auf ausstehend, bestätigt, abgeschlossen oder storniert setzen können.

Im Tab Backend können Sie Tabellen, Authentifizierungsnutzer, Speicher und Funktionen einsehen.

Schritt 5: Zahlungen in einfachen Worten anfordern

Wenn Sie ein Produkt oder Abonnement verkaufen möchten, geben Sie Preis, Währung, Abrechnungsintervall und das gewünschte Verhalten nach der Zahlung an:

Füge ein Pro-Abonnement für 9,99 € pro Monat hinzu. Erstelle eine Preisseite und einen Stripe-Checkout. Markiere den Kunden nach erfolgreicher Zahlung als Pro und schalte das Premium-Dashboard frei. Abonnenten sollen ihren aktuellen Tarif einsehen und ihr Abonnement verwalten können.

Standardmäßig kann der Agent ein verwaltetes Stripe-Konto erstellen, nachdem er Angaben wie Land und Unternehmensname abgefragt hat. Es sind keine API-Schlüssel erforderlich, und Coderblock verarbeitet den Zahlungs-Webhook. Auszahlungen und die KYC-Prüfung können Sie später über den gehosteten Stripe-Onboarding-Link abschließen.

Wenn Sie lieber Ihr eigenes Stripe-Konto verwenden möchten, fordern Sie den BYOK-Modus an. Der Agent fragt STRIPE_SECRET_KEY über eine sichere Eingabeaufforderung für Umgebungsvariablen ab und registriert den Webhook automatisch. Geheimnisse bleiben im serverseitigen Speicher des Projekts und werden weder im Code noch im Chat abgelegt. Beginnen Sie im Testmodus, bevor Sie zu echten Zahlungen wechseln.

Schritt 6: Benutzerfreundlichkeit mit rollenbasierten Prompts verbessern

Bitten Sie die KI, die Nutzererfahrung aus der Perspektive einer bestimmten Person zu prüfen:

Überprüfe den Buchungsablauf aus der Sicht eines mobilen Erstbesuchers. Reduziere unnötige Schritte, kennzeichne Pflichtfelder eindeutig, füge hilfreiche Leer- und Fehlerzustände hinzu und zeige nach dem Absenden eine Bestätigungsseite an. Entferne keine bestehenden Funktionen.

Prüfen Sie anschließend die Nutzung aus administrativer Sicht:

Verbessere die Administratoransicht für Buchungen. Füge eine Suche, Statusfilter, sortierbare Datumsangaben und einen klaren Leerzustand hinzu. Zeige die wichtigsten Buchungsdetails in der Tabelle an und stelle ergänzende Informationen in einem Detailbereich dar.

Diese Prompts geben ein messbares Ziel vor und verhindern umfassende, unkontrollierte Neugestaltungen.

Schritt 7: Einen abschließenden Prompt vor dem Launch ausführen

Bitten Sie vor der Veröffentlichung um eine gezielte Qualitätsprüfung:

Bereite diese Website auf den Launch vor. Überprüfe jede Seite auf Probleme mit dem responsiven Layout, fehlerhafte Navigation, unklare Schaltflächen, fehlende Formularvalidierung, uneinheitliche Abstände, Ladezustände, Leerzustände und Probleme mit der Barrierefreiheit. Behalte die aktuelle visuelle Richtung bei und fasse die vorgenommenen Änderungen zusammen.

Lassen Sie anschließend die Inhalte prüfen:

Überprüfe alle sichtbaren Texte. Formuliere Überschriften präziser, kürze lange Absätze, halte den Tonfall einheitlich und ersetze vage Handlungsaufforderungen durch klare nächste Schritte. Erfinde keine Kundenversprechen, Statistiken oder Kundenstimmen.

Testen Sie gegebenenfalls die Registrierung, geschützte Seiten, das Absenden von Formularen, Administratorberechtigungen und den Stripe-Test-Checkout.

Schritt 8: Veröffentlichen und kontinuierlich weiterentwickeln

Wenn die Live-Vorschau bereit ist, wählen Sie Publish, um die Produktionsversion mit SSL unter <app>.coderblock.app bereitzustellen. Unter Settings → Domains können Sie mithilfe der angeleiteten DNS-Einträge eine bestehende Domain verbinden. Alternativ können Sie eine Domain in Coderblock kaufen, damit DNS und SSL automatisch eingerichtet werden.

Mit der Veröffentlichung endet das Prompting nicht. Arbeiten Sie mit kleinen, präzisen Anfragen weiter, zum Beispiel:

Fixiere die Navigationsleiste beim Scrollen, ohne ihre Höhe zu verändern.

Füge nach dem Absenden einer Buchung einen Schritt zum Versand einer Bestätigungs-E-Mail hinzu.

Zeige im Dashboard einen hilfreichen Leerzustand an, wenn ein Kunde keine Buchungen hat.

Der effektivste Arbeitsablauf ist iterativ: Legen Sie das Produkt fest, prüfen Sie die Live-Vorschau, fordern Sie eine sinnvolle Verbesserung an und kontrollieren Sie das Ergebnis, bevor Sie mit dem nächsten Schritt fortfahren.