Baue einen lokalen HTML-Mockup-Editor „Anmeldung neu gestalten“. Ausgangsfall: kostenloser öffentlicher Campus-Workshop, keine Zahlung, kein Versand, kein Nutzerkonto. Start mit Titel, Vorname, Nachname, E-Mail, E-Mail-Wiederholung, Telefonnummer, Postanschrift, Geburtsdatum, Newsletter-Opt-in, Datenschutzhinweis, Anmeldung-Button. Palette mit diesen Bausteinen plus optionaler Hilfetext, Fortschrittsanzeige, zusätzliche Überschrift. Inhalte per Drag-and-drop platzieren und umsortieren, per Entfernen-Button wegnehmen; zusätzlich Hinzufügen/↑/↓-Buttons als Tastatur-/Touch-Alternative. Je Baustein Label/Text und Pflichtstatus bearbeiten. Farben von Hintergrund, Text und Button anpassen. Live-Vorschau, Reset, lokale Speicherung nur auf Wunsch, Export der Konfiguration als JSON und Export eines eigenständigen Mockups als HTML; keine Anmeldung absenden, keine echten Daten erfassen. Zwei Varianten A „ergänzen“ und B „vereinfachen“ getrennt vergleichen. Fachliche Mindestanforderungen dieses fiktiven Auftrags: genau ein E-Mail-Feld mit verständlichem Label; Datenschutzhinweis erhalten; klarer Anmeldung-Button; keine vorangekreuzte Newsletter-Option. Bewerte transparent nach Datenminimierung, Klarheit, verbleibenden Pflichtfeldern, doppelter Erfassung und WCAG-Kontrast (4,5:1 für normale Texte); zeige konkrete Befunde statt objektiv wirkender Gesamtnote. Kriterien sind didaktisch, keine Rechts- oder vollständige Accessibility-Prüfung. Weniger Felder ist nur bei erhaltenem Zweck besser. Am Ende ein Textbericht „Was ergänzt / entfernt / begründet?“ und Button zum Kopieren eines ChatGPT-Prüfprompts zusammen mit der aktuellen Konfiguration. Liefere Datei und Tests für fehlendes E-Mail-Feld, verlorenen Hinweis und schlechten Kontrast.

Gestaltung: clean, großzügiger Weißraum, Hintergrund #F7F7F5, Text #182C33, Akzent Petrol #24666A, Salbei #DCEFE1 und zurückhaltendes Gold #F4EAC8. Systemschrift, große klare Überschriften, kurze Texte, Karten und Bilder mit 18px abgerundeten Ecken und feinem Schatten. Diagramme und beschriftete Bilder vollständig zeigen, nicht abschneiden oder verzerren. Hoher Kontrast, sichtbarer Tastaturfokus, responsive Darstellung. Kein Neon, keine dekorative Überladung. HTML/CSS/JavaScript vollständig in einer Datei, keine CDNs, externen Fonts, APIs oder Netzwerkanfragen. Alle Aktionen müssen auch per Tastatur und Klick bedienbar sein. Verwende nur synthetische Daten.