Eine Website mit einem KI-Prompt erstellen

1. Das Projekt knapp beschreiben

Kläre vor dem Einfügen des Prompts die Zielgruppe, die wichtigste Handlung auf der Seite und die tatsächlich benötigten Unterseiten. Ergänze den Projekt- oder Unternehmensnamen, erste Texte und vorhandene Bilder. Bei einer bestehenden Website sollte der Assistent zuerst den vorhandenen Aufbau prüfen, bevor er ihn verändert.

Für ein neues Projekt vereinbarst du einen technischen Ansatz, den du starten und später pflegen kannst. Claude oder Codex benötigt Zugriff auf das Projekt und passende Entwicklungswerkzeuge. Ein Textgespräch allein ergibt noch keine laufende Website. Halte offene Entscheidungen fest, damit der Assistent fehlende Angaben nicht einfach erfindet.

• Was sollen Besucher auf dieser Seite verstehen oder erledigen?
• Welche Texte und Medien sind fertig, welche dienen als Platzhalter?
• Gibt es bereits ein Framework oder eine Komponentenbibliothek?
• Welche Interaktionen müssen in der ersten Fassung funktionieren?

2. Aus Referenzen konkrete Abläufe ableiten

Füge den englischen Prompt ein und ergänze deine projektspezifischen Anforderungen als klar erkennbaren Zusatz. Sind Referenzen vorhanden, stelle sie über die Möglichkeiten der jeweiligen Arbeitsumgebung bereit. Beschreibe wichtige Zustände zusätzlich in Worten: den Einstieg, die gescrollte Seite, das geöffnete Menü und die mobile Ansicht.

Bei einem Video benennst du den relevanten Moment und das gewünschte Verhalten. Dreht sich ein Objekt fortlaufend, folgt es dem Mauszeiger oder reagiert es auf Scrollen? Erscheint eine Textanimation einmal oder bei jedem erneuten Sichtkontakt? Solche Angaben lassen sich später tatsächlich überprüfen.

3. Benötigte Medien früh klären

Lass den Assistenten auflisten, welche Bilder, Schriften, Videos, Symbole oder 3D-Modelle für die geplante Umsetzung nötig sind. Prüfe, was bereits vorliegt und wo ein Ersatz gebraucht wird. Ein fehlendes Titelbild kann die Wirkung des Entwurfs stärker verändern als ein abweichender Abstand.

Wenn die Referenz echte 3D-Geometrie voraussetzt, formuliere das ausdrücklich. Entscheide, ob ein vorhandenes Modell verwendet, eine einfache Geometrie aufgebaut oder eine andere Darstellung gewählt werden soll. Platzhalter können die Arbeit erleichtern, sollten aber eindeutig als vorläufig erkennbar bleiben.

4. Umsetzen, starten und einzeln korrigieren

Lass zunächst eine lauffähige Fassung erstellen und die zum Projekt gehörenden Build-Prüfungen ausführen. Öffne die Seite selbst oder nutze verfügbare Browserwerkzeuge in der Entwicklungsumgebung. Vergleiche die Umsetzung möglichst bei derselben Fenstergröße mit der Referenz, bevor du gestalterische Feinheiten beurteilst.

Formuliere Rückmeldungen als Beobachtung mit einem gewünschten Ergebnis. Zum Beispiel: Das Menü verdeckt auf einem schmalen Bildschirm den wichtigsten Button; es soll sich schließen lassen und der Button erreichbar bleiben. Eine solche Korrektur lässt sich besser prüfen als die allgemeine Bitte um mehr Hochwertigkeit.

5. Den gesamten Besuch der Website testen

Gehe die Seite wie ein Besucher durch, einschließlich der Zustände, die in der Vorschau nicht zu sehen sind. Folge Links, öffne Menüs, bediene die Seite per Tastatur und teste eine schmale Bildschirmbreite. Bei Formularen und Integrationen prüfst du, ob nur die Oberfläche vorhanden ist oder die Funktion tatsächlich angeschlossen und getestet wurde.

Beurteile echte Texte, Bildausschnitte, Ladeverhalten und Bewegung gemeinsam. Sobald die Umsetzung passt, folgen Hosting und Einstellungen für die Veröffentlichung. Prüfe anschließend auch die öffentliche Website: Eine lokale Vorschau bestätigt noch nicht, dass im veröffentlichten Zustand alles funktioniert.

• Inhalt: richtige Namen, verständliche Texte und keine übersehenen Platzhalter.
• Bedienung: funktionierende Ziele, sichtbarer Fokus und brauchbare Touch-Bedienelemente.
• Darstellung: keine abgeschnittenen Überschriften oder seitlich überlaufenden Inhalte.
• Bewegung: lesbare Inhalte und eine passende Variante für reduzierte Animationen.