Eine Website mit KI erstellen und den Entwurf prüfen

Beschreibe eine Aufgabe, nicht gleich dein ganzes Unternehmen.

Beginne mit einer Informationsseite ohne Anmeldung, Zahlung und Datenspeicherung. Nenne Zielgruppe, Angebot, Ton und den gewünschten nächsten Schritt. Sage ausdrücklich, was noch nicht gebaut werden soll. Sonst entstehen schnell ein funktionsloses Kontaktformular oder unnötige Bibliotheken, die nachher mitbetrieben werden müssen.

Das Design darf inspirieren, aber der erste Erfolg ist eine verständliche Seite. Du solltest die gelieferten Dateien benennen können und wissen, wie du sie lokal öffnest. Wenn ein Werkzeug stattdessen ein umfangreiches Projekt erzeugt, lass dir den zusätzlichen Bedarf begründen, bevor du neue Dienste oder Konten anlegst.

Ein Prompt, mit dem du klein und überprüfbar startest.

Passe Zielgruppe und Angebot im folgenden Briefing an. Verwende zunächst ausgedachte Inhalte. Der Auftrag legt bewusst fest, dass die erste Version lokal funktioniert und keine Besucherangaben überträgt.

Erstelle eine deutschsprachige Informationsseite für ein fiktives Angebot.
Zielgruppe: kleine Handwerksbetriebe.
Nutzen: weniger Suchaufwand bei digitalen Unterlagen.
Nächster Schritt: zum Kontaktabschnitt springen, noch keine Daten versenden.

Liefere genau zwei Dateien: index.html und styles.css.
Verwende semantisches HTML und normales CSS.
Keine externen Schriftarten, Tracker, Bibliotheken oder Downloads.
Kein Login, keine Datenbank, kein Formular und keine erfundenen Referenzen.
Kennzeichne den Stand sichtbar als lokalen Entwurf.

Die Seite soll ab 320 Pixel Breite ohne seitliches Scrollen funktionieren.
Links müssen per Tastatur erreichbar und Fokuszustände sichtbar sein.
Beschreibe, wie ich die Dateien lokal öffne und das Ergebnis teste.
Erkläre separat, was vor einer geschäftlichen Veröffentlichung noch fehlt.

So arbeitest du Änderungen kontrolliert ein.

1. Speichere die ausgegebenen Dateien in einem neuen Ordner. Prüfe, dass die HTML-Datei genau auf die gelieferte CSS-Datei verweist, und öffne index.html im Browser.
2. Lies Texte und Links selbst. Entferne erfundene Bewertungen, Garantien, Kundenlogos und Kontaktangaben, statt sie für einen professionellen Eindruck stehen zu lassen.
3. Prüfe eine Sache nach der anderen: Inhalt, schmale Darstellung, Tastaturbedienung, erst danach kleine Gestaltungseffekte.
4. Beschreibe Fehler mit Ausgangssituation und Erwartung: „Bei 360 Pixel Breite läuft die Überschrift rechts heraus. Ändere nur den Umbruch; die Desktopdarstellung soll bleiben.“
5. Fordere eine Liste der geänderten Stellen an. Sichere den funktionierenden Stand vor jeder weiteren Änderung unter einer eindeutigen Versionsbezeichnung.
6. Wenn neue Pakete, Terminalbefehle oder externe Dienste vorgeschlagen werden, kläre zuerst Zweck, Herkunft, Kosten und Rückweg. Unverstandene Befehle nicht einfach in ein produktives Projekt übernehmen.

Teste das, was die Vorschau nicht beweist.

Eine attraktive Bildschirmansicht beweist weder eine funktionierende Datenübertragung noch saubere Zugriffsrechte. Prüfe die Seite mit Tastatur und vergrößerter Schrift, klicke jeden Link und lies den Quelltext auf unerwartete externe Adressen. Im Netzwerkbereich der Browser-Entwicklerwerkzeuge kannst du beim Neuladen erkennen, welche Dienste tatsächlich aufgerufen werden.

Nutze für den einfachen lokalen Entwurf die Prüfpunkte aus dem Website-Einstieg. Bei einem größeren Projekt kommen reproduzierbarer Build, Abhängigkeiten und eine getrennte Testumgebung hinzu. Lasse einen fehlgeschlagenen Test nicht durch das Entfernen der Prüfung „reparieren“. Die Anforderung soll erfüllt werden, nicht nur die Fehlermeldung verschwinden.

Der Wechsel zur Anwendung ist eine bewusste Entscheidung.

Sobald die Website Konten, interne Informationen, Uploads oder Zahlungen verwaltet, reicht reine Oberflächengestaltung nicht mehr. Dann müssen unter anderem serverseitige Berechtigungen, Fehlermeldungen, Speicherung und Betrieb geplant und getestet werden. Ein versteckter Button oder eine unbekannte URL schützt keine Daten.

KI kann beim Schreiben und Prüfen helfen. Sie übernimmt aber nicht automatisch die Verantwortung für das Ergebnis. Gerade hier kann eine gezielte technische Abnahme sinnvoller sein als ein kompletter Neubau: Du behältst deinen Entwurf, und die kritischen Stellen werden fachlich ergänzt.