PromptRegister
Alle Guides

Die besten KI-Prompts für Webentwicklung & Webdesign

Ein brauchbarer Prompt für Webentwicklung beschreibt, was die Seite tun soll und welcher Code schon da ist. Hier findest du Beispiele für schmale Bildschirme und Formulare. Die Antwort enthält einen Entwurf und Prüfschritte, die du im Browser selbst ausführst.

Aktualisiert am

Beschreibe Verhalten und vorhandenen Code

Gib HTML, CSS und nötiges JavaScript mit. Nenne das verwendete System und seine Version. Beschreibe auch leere Inhalte, lange Texte und Fehlermeldungen. So kann die KI diese Fälle beim Vorschlag berücksichtigen.

Eine Prüfung des Quelltexts zeigt nicht, wie sich die fertige Seite bedienen lässt. Teste das Ergebnis im Browser mit Tastatur, schmalem Fenster und vergrößerter Schrift.

Beispielprompts zum Kopieren

Ersetze die Angaben in eckigen Klammern. Lies die Antwort und prüfe sie mit dem Schritt unter dem jeweiligen Beispiel.

Ein Layout für schmale Bildschirme anpassen

Nutze den Prompt, wenn Inhalt am Handy abgeschnitten wird oder die Seite seitlich scrollt.

Prüfe dieses Layout und schlage eine kleine Änderung vor.
HTML oder Komponente: [Code]
CSS und vorhandene Stile: [Code]
Verwendetes System und Version: [Angaben]
Betroffene Breite: [z. B. 360 CSS-Pixel]
Beobachteter Fehler: [Beschreibung]
Gewünschtes Verhalten: [z. B. Karten untereinander, alle Texte lesbar]

Nenne die Stellen, die den Fehler verursachen könnten, und wie ich jede Vermutung im Browser prüfe. Gib danach nur die nötigen Änderungen am vorhandenen Code aus. Erhalte Inhalt und Lesereihenfolge. Berücksichtige lange Wörter, leere Inhalte und vergrößerte Schrift. Liste Prüfschritte für die schmale Breite und ein breites Fenster auf. Behaupte nicht, den Browser selbst getestet zu haben.

So prüfst du die Antwort: Prüfe die betroffene Breite und benachbarte Größen. Vergrößere die Schrift und setze einen langen Titel ein. Inhalt und Bedienelemente müssen erreichbar bleiben.

Web Design Consultant – Für Fragen zu Aufbau und Zweck der Seite. Ergänze Nutzeraufgabe und vorhandene Inhalte.

Ein Formular auf Bedienfehler prüfen

Nutze den Prompt, um ein konkretes Formular samt Fehlermeldungen durchzugehen.

Prüfe dieses Formular anhand des gelieferten Codes.
HTML oder Komponente: [Code]
CSS und JavaScript für Fokus und Fehler: [Code]
Aufgabe des Formulars: [Zweck]
Pflichtfelder und Regeln: [Angaben]

Prüfe Beschriftungen, die Zuordnung von Fehlern zu Feldern, die Reihenfolge beim Drücken der Tab-Taste und sichtbare Fokuszustände. Nenne zu jedem Befund die Codezeile, die mögliche Folge für die Bedienung und eine kleine Korrektur. Bevorzuge passende HTML-Elemente. Gib zum Schluss einen manuellen Testablauf für leeres Absenden, falsche Eingaben und erfolgreiche Eingaben aus. Kennzeichne alles, was du ohne Browser oder Screenreader nicht prüfen kannst. Leite aus dieser Codeprüfung keine vollständige Barrierefreiheit ab.

So prüfst du die Antwort: Führe den Ablauf ohne Maus aus. Prüfe, ob Feldnamen und Fehlermeldungen mit einem Screenreader verständlich sind. Eine Antwort zum Code ersetzt diese Prüfung nicht.

Accessibility Auditor – Für eine breitere Liste von Prüfpunkten. Nenne den prüfbaren Umfang; eine URL allein belegt noch keine ausgeführte Prüfung.

Weitere Vorlagen für Webentwicklung

10 handverlesene Prompts aus der Kategorie Webentwicklung.

Tipps zum Anwenden und Prüfen

  • ▸Nenne den kleinsten Codeausschnitt, der das Problem zeigt.
  • ▸Beschreibe auch Ladezustand, Fehler und leere Inhalte.
  • ▸Bitte um kleine Änderungen, die zu den vorhandenen Stilen passen.
  • ▸Prüfe die Antwort im Browser und gleiche verwendete Schnittstellen mit deiner Dokumentation ab.

Häufige Fragen

Kann ich die Beispiele mit React oder Vue nutzen?

Ja, du kannst statt reinem HTML eine Komponente einfügen. Nenne das System und seine Version. Prüfe, ob der Vorschlag die bestehenden Abläufe und Zustände erhält.

Ist der Code nach einem KI-Check barrierefrei?

Das lässt sich aus einer KI-Antwort nicht ableiten. Der Prompt hilft, mögliche Fehler und Prüfschritte zu sammeln. Die Bedienung der fertigen Seite musst du gesondert prüfen.

Du brauchst einen Prompt, der genau zu deinem Fall passt?

Prompt-Generator

Weitere Guides

Die besten KI-Prompts für Marketing

Guide öffnen

Die besten KI-Prompts für Vertrieb & Sales

Guide öffnen

Die besten KI-Prompts für Bildung & Lernen

Guide öffnen

Die besten KI-Prompts für Programmierung & Coding

Guide öffnen

Die besten KI-Prompts für IT & Technologie

Guide öffnen

Die besten KI-Prompts für Gesundheit & Fitness

Guide öffnen

Die besten KI-Prompts für Finanzen & Geld

Guide öffnen

Die besten KI-Prompts für Bewerbung & Karriere

Guide öffnen

Die besten KI-Prompts für Psychologie & Reflexion

Guide öffnen

Die besten KI-Prompts für Wissenschaft & Forschung

Guide öffnen

Die besten KI-Prompts für kreatives Schreiben

Guide öffnen

Die besten KI-Prompts für Sprachen lernen & Übersetzen

Guide öffnen