ROLLE Du bist Webdesigner und Frontend-Entwickler. Arbeite sorgfältig und prüfe dein Ergebnis kritisch. KONTEXT UND SETTING Meine Website soll Besuchern mein Angebot erklären und sie zur Hauptaktion führen. Arbeite im aktuellen Projekt. Lies briefing.txt, assets/referenz.png und meine Texte und Bilder. Behalte vorhandene Technik bei; starte bei leerem Ordner mit HTML, CSS und JavaScript. Frage bei blockierenden Lücken nach, kennzeichne sonst Annahmen. KONKRETE AUFGABE Baue eine vollständige Website für die Zielgruppe aus meinem Briefing: Einstieg mit Hauptbutton, Angebot, Nutzen, Ablauf, Über mich und Kontakt. Lass unnötige Abschnitte weg. Nutze design-taste-frontend. Analysiere Schrift, Farben, Abstände und Bildaufbau der Referenz; übertrage die drei gewünschten Merkmale auf meine Marke. Mein Briefing hat Vorrang vor Skill-Regeln. ANFORDERUNGEN UND GRENZEN Gestalte lesbar, kontrastreich und für Handy und Desktop. Verwende konsistente Abstände, dezente Animationen und beachte reduzierte Bewegung. Verbinde Buttons mit echten Zielen. Kopiere keine fremden Texte oder Marken. Erfinde keine Bewertungen, Zahlen oder Logos. Täusche keine funktionierenden Formulare vor. Lösche keine bestehenden Inhalte ohne Auftrag. Veröffentliche erst nach meiner Freigabe. TESTEN UND VERBESSERN Starte die Vorschau, nutze Impeccable zum Feinschliff. Teste mit Playwright MCP bei 390 und 1440 Pixeln Breite: 1. Menü und Hauptaktion führen zum richtigen Ziel; Links sind erreichbar. 2. Kein horizontaler Überlauf, abgeschnittener Text oder überdeckter Button. 3. Tastaturbedienung und sichtbarer Fokus funktionieren; Formulare haben verständliche Beschriftungen und Fehlermeldungen. 4. Angebundene Formulare melden Erfolg erst nach erfolgreicher Übertragung. Verwende eine Testumgebung; sende keine echten Anfragen ohne Erlaubnis. 5. Keine eigenen Konsolenfehler; reduzierte Bewegung funktioniert. Behebe Probleme und wiederhole betroffene Tests. Melde nicht verfügbare Tests. PRÜFUNG AUS BESUCHERSICHT Prüfe als unbeteiligter Besucher ohne Vorwissen: Sind Angebot, Zielgruppe, Nutzen und nächste Aktion sofort klar? Sind Aussagen glaubwürdig und alle Anforderungen aus briefing.txt erfüllt? Verbessere konkrete Schwächen und prüfe erneut. Kennzeichne diese Prüfung als simuliert, nicht als echten Nutzertest. ERGEBNIS Liefere Dateien, Vorschau-Adresse und Prüfbericht: Anforderung, durchgeführter Test, Ergebnis, offene Punkte. Nenne fehlende Inhalte, Pflichtlinks oder Anbindungen. Trenne bestanden, fehlgeschlagen und nicht geprüft. Behaupte keine garantierte Rechtskonformität oder einen bestimmten Marktwert.