tmj-90/Landing-Page-Generator

Generieren Sie hochkonvertierende Landing Pages

Liefern Sie eine echte Seite: funktionierende TSX-Komponenten, echte Copystruktur und gemessene Performance. Passen Sie das vorhandene Framework, Styling und die Komponentenkonventionen des Repos an und verwenden Sie nur Abhängigkeiten, die es bereits hat: Eine Auslieferung installiert niemals eine (der Sicherheitshaken blockiert es). Ein Greenfield-Bootstrap ohne ausgewählten Stack kann standardmäßig Next.js + Tailwind verwenden; überall sonst, wenn die Seite wirklich eine fehlende Abhängigkeit benötigt, rufen Sie mark_ticket_blocked auf und nennen Sie sie.

Ziele (Core Web Vitals „gut“, Feld p75): LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1. Erfüllen Sie außerdem WCAG 2.2 AA: Textkontrast ≥ 4,5:1, sichtbarer Fokusring, beschriftete Eingaben und eine per Tastatur bedienbare Seite.

Copy-Framework (wählen Sie eines pro Seite)

Framework	Struktur	Am besten geeignet für
PAS	Problem → Agitation → Lösung	Problembewusster Traffic
AIDA	Aufmerksamkeit → Interesse → Verlangen → Handlung	Kalter Traffic, neue Kategorie
BAB	Vorher → Nachher → Brücke	Ergebnis-/Transformationsangebote

Vorlagen und das FAQ mit fünf Einwänden finden Sie in references/copy-frameworks.md. Das Skill copywriting behandelt die Erstellung von Überschriften und CTAs.

Abschnitts-Blueprint

1. Hero: Eine Ergebnisüberschrift (≤ ~10 Wörter), ein ein-sätziger Untertitel zum „Wie“, ein primärer CTA und ein Vertrauenssignal (eine Anzahl, Logos oder eine Bewertung). Kein Karussell.
2. Problem: Die Kosten des Status quo, in den Worten des Kunden.
3. Lösung / Vorteile: 3–6 Vorteile, jeweils mit einer einzeiligen Erklärung und einem optionalen visuellen Element.
4. Sozialer Beweis: Testimonials mit Name, Rolle, Unternehmen und Ergebnis; Logos.
5. Preise (falls zutreffend): 2–4 Stufen, wobei die empfohlene hervorgehoben wird.
6. FAQ: Die fünf Einwände. Verwenden Sie natives <details>/<summary> oder ein zugängliches Accordion. FAQPage-Markup ist optional, da Google keine FAQ-Rich-Results mehr anzeigt.
7. Footer-CTA: Wiederholt die primäre Aktion mit minimaler Reibung (z. B. nur E-Mail).

Schritte

1. Sammeln Sie die Eingaben. Produktname, Zielgruppe, Hauptproblem, Hauptergebnis, primärer CTA und dessen Ziel, verfügbare Belege sowie die Stilrichtung. Lesen Sie zuerst das Ticket, BRAND.md/Tokens und die vorhandenen Seiten. Wenn unbeaufsichtigt, fragen Sie nicht nach: verwenden Sie, was vorhanden ist, und markieren Sie Lücken als [TODO: …] im Copy. Erfinden Sie niemals Testimonials, Logos, Kundenanzahlen oder Bewertungen.

2. Wählen Sie das Framework basierend auf der Trafficquelle und dem Bekanntheitsgrad. Schreiben Sie den Copy vor dem Layout. Entwerfen Sie fünf Überschriften und behalten Sie die klarste.

3. Bauen Sie die Abschnitte als separate Komponenten im Komponentenverzeichnis des Repos. Setzen Sie den Copy in Props oder ein Content-Objekt, nicht verstreut im JSX. Halten Sie die Seite größtenteils serverseitig gerendert, mit Client-Komponenten nur dort, wo Interaktion sie benötigt.

4. SEO-Metadaten. Setzen Sie einen eindeutigen <title>, eine Meta-Beschreibung, einen Canonical, Open Graph- und Twitter-Tags sowie ein <h1>. Im Next.js App Router verwenden Sie den metadata- Export.

5. Performance.

   • Laden Sie das Hero/LCP-Bild eager mit fetchpriority="high". In Next.js 16+ verwenden Sie <Image preload> (oder loading="eager" + fetchPriority="high"); priority ist die Next.js ≤ 15-Form, in 16 veraltet. Niemals lazy laden.
   • Laden Sie Bilder unter dem Fold lazy.
   • Jedes Bild erhält explizite width/height und AVIF/WebP.
   • Schriftarten verwenden font-display: swap (oder next/font) mit nur den benötigten Gewichten.
   • Keine Drittanbieter-Skripte oberhalb des Folds.

6. Formular (Lead-Capture). Verwenden Sie beschriftete Eingaben mit dem korrekten type und autocomplete, Inline-Validierung und eine Fehlerübersicht, die die Eingabe des Benutzers erhält. Zeigen Sie einen Erfolgszustand an, deaktivieren Sie Doppelklick und posten Sie an den echten Endpunkt, der im Ticket genannt wird.

7. Überprüfen. Führen Sie jede Prüfung aus und dokumentieren Sie sie:

   • die Typprüfung (npx --no -- tsc --noEmit, die fehlschlägt, statt herunterzuladen) und den Lint des Repos;
   • das Build-Skript des Repos (z. B. npm run build);
   • einen Komponententest, der die Seite rendert und das h1, den primären CTA-Href und die Erfolgs- und Fehlerzustände des Formulars überprüft;
   • Lighthouse (mobil) als Lab-Check, mit Aufzeichnung von LCP, CLS, TBT und dem Accessibility- Score, nur wenn es bereits installiert ist (npx --no -- lighthouse);
   • eine Viewport-Überprüfung bei 375 px, 768 px und 1440 px auf Überlauf und den CTA oberhalb des Folds, durch den Browser-Test-Runner des Repos, falls vorhanden.

   Installieren oder holen Sie niemals ein Tool, um eine Prüfung durchzuführen. Nennen Sie jede Prüfung, die Sie nicht durchführen konnten, in Ihrem Nachweis, anstatt sie zu behaupten.

Erledigt, wenn

• Die Seite baut, typgeprüft ist und ihre Komponententests besteht.
• Der Hero ein Ergebnis angibt und der primäre CTA bei 375 px und 1440 px oberhalb des Folds ist (durch einen Viewport-Test überprüft oder als ungeprüft benannt).
• Wo Lighthouse oder axe verfügbar ist, zeigt der Lab-Durchlauf LCP ≤ 2,5 s und CLS ≤ 0,1 auf mobil und keine automatisierten Barrierefreiheitsverstöße; andernfalls sagt der Nachweis, dass diese nicht gemessen wurden.
• Keine erfundenen Belege. Jede Lücke wird als [TODO] markiert und im Bericht aufgeführt.

Anti-Patterns

• Ein lazy-geladenes Hero-Bild oder Layout-Verschiebung durch nicht dimensionierte Medien oder späte Schriftarten.
• Mehrere gleichwertige CTAs oder vollständige Site-Navigation auf einer Seite einer bezahlten Kampagne.
• Lorem Ipsum oder generischer Fülltext, der im Build verbleibt. Der einzige erlaubte Platzhalter ist eine explizite [TODO: …]-Lücke, die der Bericht auflistet.
• Karussells und Autoplay-Videos im Hero.