Alle Beiträge

Die besten KI-Prompts für eine Website in einer einzigen Datei

Die nützlichste Anweisung, die du jedem Website-Prompt hinzufügen kannst, lautet: „als eine eigenständige HTML-Datei, mit eingebettetem CSS und JavaScript, ohne externe Abhängigkeiten“. Diese eine Zeile entscheidet, ob du Code bekommst, den du sofort einfügen und veröffentlichen kannst, oder Code, der auf mehrere Dateien verteilt ist und einen Build-Schritt braucht.

Warum die Formulierung zählt

ChatGPT, Claude und Gemini erstellen aus einer einfachen Beschreibung eine Website, gehen aber standardmäßig manchmal von einem echten Projekt aus: getrennte HTML-, CSS- und JavaScript-Dateien oder eine Framework-Struktur. Das ist nicht falsch, aber unnötige Reibung, wenn du nur eine Seite bei einem Hoster einfügen und teilen willst. Sagst du dem Modell genau, welche Form du erwartest, verschwindet die Reibung, bevor sie entsteht.

Die Prompt-Formel

Baue jeden Website-Prompt aus drei Teilen:

1. Was die Seite ist: konkret Zweck und Inhalt, nicht nur das Thema.
2. Die Format-Vorgabe: „als eine HTML-Datei mit eingebettetem CSS und JavaScript, ohne externe Abhängigkeiten“.
3. Die Stilrichtung: Farben, Stimmung oder ein Vergleich („klar und minimalistisch“, „dunkles Design“, „wie eine moderne SaaS-Landingpage“).

Fertige Prompts

Kopiere einen davon in ChatGPT, Claude oder Gemini und passe die Details an:

Portfolio: „Erstelle eine einzelne HTML-Datei (CSS und JS eingebettet, keine externen Abhängigkeiten) für das Portfolio einer freiberuflichen Designerin. Mit Hero-Bereich mit Name und Berufsbezeichnung, einem Raster aus 4 Projektkarten und einem Kontaktbereich. Dunkles Design, klare serifenlose Typografie.“

Landingpage: „Schreibe eine Landingpage in einer HTML-Datei für eine Produktivitäts-App namens Focus. Mit Überschrift, drei Feature-Karten, einem Preisbereich mit zwei Tarifen und einem E-Mail-Anmeldeformular. Alles CSS und JS eingebettet, keine externen Abhängigkeiten, für Mobilgeräte optimiert.“

Warteliste: „Baue eine einzelne HTML-Datei für die Wartelisten-Seite eines jungen Start-ups. Überschrift, Beschreibung in einem Satz, ein E-Mail-Feld mit Button und ein kleiner Zähler «Schon über 500 Personen dabei». Nur eingebettetes CSS und JS.“

Veranstaltungsseite: „Erstelle eine Veranstaltungsseite in einer HTML-Datei für einen eintägigen Workshop. Mit Datum, Ort, kurzer Agenda und Anmelde-Button. Warme Farbpalette, keine externen Abhängigkeiten.“

Einfaches Spiel: „Baue ein kleines Browserspiel in einer eigenständigen HTML-Datei, eine einfache Version von [Spiel]. Nur reines JavaScript und eingebettetes CSS, Steuerung mit den Pfeiltasten, keine externen Bibliotheken.“

Drei Gewohnheiten für sauberen Code

Füge immer „für Mobilgeräte optimiert“ hinzu, wenn die Seite auf dem Handy funktionieren soll; das wird nicht automatisch angenommen. Bitte um Änderungen in Folgenachrichten, statt den ganzen Prompt neu zu schreiben: Modelle kommen mit „mach den Button blau und füge einen Footer hinzu“ besser zurecht als mit einem zweiten Riesen-Prompt. Und liefert ein Modell trotzdem mehrere Dateien, reicht ein Satz: „führe das zu einer HTML-Datei zusammen, mit allem eingebettet“.

Häufige Fragen

Was ist die wichtigste Anweisung in einem Website-Prompt?
Bitte ausdrücklich um eine einzige, eigenständige HTML-Datei mit eingebettetem CSS und JavaScript und ohne externe Abhängigkeiten. Diese eine Anweisung entscheidet, ob du das Ergebnis direkt bei einem Hoster einfügen kannst.

Funktioniert das in ChatGPT, Claude und Gemini gleich?
Ja. Alle drei KI-Assistenten schreiben auf Wunsch eine komplette Website in einer HTML-Datei; die Prompt-Struktur aus dieser Anleitung funktioniert bei allen.

Was, wenn die KI den Code trotzdem auf mehrere Dateien verteilt?
Bitte sie direkt, alles in eine HTML-Datei mit eingebettetem CSS und JavaScript zusammenzuführen. Das klappt auch nachträglich zuverlässig.

Kann ich mit diesen Prompts auch etwas Interaktives bauen?
Ja. Eine einzelne HTML-Datei kann komplette JavaScript-Logik enthalten, daher funktionieren Spiele, Rechner und interaktive Tools genauso wie eine statische Landingpage.