Landing Page Builder
Formel: unsere Struktur × Best Practices der Konkurrenz, gebaut nach dem Referenzstandard.
Jede Seite ist einzigartig für ihre Nische. Von Grund auf kommt das Design aus dem Thema + den Konkurrenten (Phasen 2–3), niemals von einer vorherigen Seite oder einer Vorlage. Was zwischen den Seiten übertragen wird, ist das Qualitätsniveau, nicht das Aussehen:
- klare Hierarchie in jedem Block: Eyebrow → Überschrift → Lead → echte Medien → CTA mit Mikrokopie;
- echte Produktmedien in passenden Rahmen, mit leeren, beschrifteten Rahmen, wo sie fehlen;
- ein Schriftpaar und eine Akzentfarbe, die für die Nische gewählt wurden;
- ein Kontrastabschnitt für Rhythmus;
- Ergebnisse einzeln beschriftet;
- eine Zusammenfassung vor dem Preis;
- FAQ und ein abschließender CTA, der auf unseren Fakten basiert;
- Screenshot-QA.
Das genehmigte Vidpeak-Redesign (references/examples.md §D) zeigt dieses Niveau. Erreiche seinen Feinschliff, niemals sein Aussehen.
- Unsere Struktur bestimmt, welche Aufgaben die Seite erfüllen muss und in welchem Verhältnis (5 Blöcke, Gewichtungen, Grundregeln). Sie ist in jeder Nische gleich.
- Konkurrenten bestimmen, wie jede Aufgabe in dieser Nische erledigt wird: Hero-Formel, Nachweistypen, wie das Produkt gezeigt wird, Preisformat, Einwände, visuelles System. Das ändert sich pro Nische.
- Lücken – was kein Konkurrent sagt oder gut zeigt – werden zu unserer Differenzierung.
- Der Referenzstandard (
references/reference-standard.md) setzt die Qualitätslatte: vier Landingpages, die der Eigentümer als gut ausgewählt hat. Deren Blockmuster, Text- und visuelle Gestaltung definieren, was „gut gemacht“ bedeutet. Die Nische bestimmt das Aussehen; die Referenzen bestimmen, wie gut es gemacht ist.
Baue niemals nur mit dem Framework (generische Seite) und klone niemals einen einzelnen Konkurrenten (Me-too-Seite).
Zwei Modi – wähle zuerst einen aus
| Modus | Wann | Arbeitsablauf |
|---|---|---|
| A. Von Grund auf neu aufbauen | Noch keine Seite vorhanden oder der Eigentümer wünscht eine neue | Unten (Phasen 1–6) |
| B. Design verbessern | Eine Seite existiert (URL/Repo-Datei/Screenshot) und der Eigentümer möchte, dass sie besser aussieht und funktioniert | references/redesign.md |
Signale für B: „mach es besser / schöner“, „redesign“, „Design verbessern“, „hier ist meine Landingpage“, ein Link zu einer Live-Seite. Unklar → eine Frage stellen: „Neue Seite oder Design dieser Seite verbessern?“ Beide Modi verwenden dieselbe Hausstruktur, Grundregeln und denselben Referenzstandard.
Arbeitsablauf – Modus A (von Grund auf)
Der Reihe nach folgen. Die Phasen 2–3 sind der Kern dieses Skills – überspringe sie nicht, um Zeit zu sparen.
| # | Phase | Ausgabe | Referenz |
|---|---|---|---|
| 1 | Briefing – Produkt, Avatar, Nutzen, CTA-Typ, Preis, Sprache, Assets | Briefing in 10 Zeilen | references/brief.md |
| 2 | Konkurrenzrecherche – 3–5 Konkurrenten finden, deren Landingpages öffnen, jeden Abschnitt erfassen | research/ Screenshots + rohe Notizen | references/competitor-research.md |
| 3 | Analyse & Synthese – Muster pro Block, Markt-Baseline, Best Practices, Lücken, visuelle Festlegung | research/teardown.md | references/competitor-research.md |
| 4 | Seitenplan – unsere 5 Blöcke, jeder gefüllt mit ausgewählten Praktiken + einem Muster aus dem Referenzstandard + unseren Inhalten | Plantabelle → Checkpoint mit dem Eigentümer | references/framework.md, references/reference-standard.md |
| 5 | Bauen – Stack, Text, Medien, CTA, visuelles System, einzigartig für diese Nische | Die Seite | references/build.md, references/visual-system.md |
| 6 | QA – im Browser, Desktop + Mobil, gegen den Plan, die Konkurrenten und den Referenzstandard | Korrigierte Seite + Übergabe | references/build.md §QA |
| 7 | SEO & GEO – bevor die Seite live geht (oder auf Anfrage): eine Adresse, robots/sitemap/llms.txt, Meta und OG, JSON-LD, Geschwindigkeit, KI-Bot-Zugriff, Search Console | Live-Seite, indexierbar und von KI-Suche zitierbar | references/seo-geo.md |
Checkpoint (nach Phase 4). Zeige dem Eigentümer kurz: die Markt-Baseline, die 3–5 Praktiken, die du übernimmst, die Lücken, die du angreifen wirst, die visuelle Festlegung und die Plantabelle. Hol dir ein „ok“, dann baue. Wenn der Eigentümer nach Schnelligkeit gefragt hat, nenne den Plan und baue im selben Durchgang.
Nicht aufhalten. Wenn etwas fehlt (Produkt-URL, Screenshots, Preise), markiere ein TODO und mach weiter. Frage nur, was den CTA-Typ oder die Sprache blockiert.
Die Hausstruktur (immer)
Fünf Aufgaben. Eine Aufgabe kann mehrere Abschnitte umfassen (z. B. Angebot = Zusammenfassung + Preise + FAQ + abschließender CTA). Gewichtungen sind Anteil an Seitenlänge/-aufmerksamkeit – eine Zielform, kein Gesetz.
| # | Aufgabe | Gewicht | Muss erreichen |
|---|---|---|---|
| 1 | Erster Bildschirm | 5% | Was es ist oder der Nutzen, für wen, ein primärer CTA (keiner, wenn Vor-Produkt) |
| 2 | Schmerzpunkte & Situation | 15% | Nur wenn Wettbewerber einen Schmerzpunkte-Block verwenden. Dann: das Problem, scharf, nur mit echten Fakten. Sonst überspringen – sein Anteil geht an Vorteile + Produkt |
| 3 | Vorteile (преимущества) | 20% | Was der Leser gewinnt, jeder Vorteil untermauert durch ein Bild oder einen Nachweis |
| 4 | Produkt | 40% | Was es ist + wie es funktioniert, in einem Bildschirm erfassbar |
| 5 | Angebot & CTA | 20% | Zusammenfassung der Vorteile, was nach dem Klick passiert, Preis + Risikoumkehr, Einwände, CTA |
Vorteile + Produkt ≈ 60% der Seite. Wenn bereits eine Live-LP existiert, behalte die Abschnittsreihenfolge bei und ordne die Aufgaben darauf ab.
Wie Konkurrenten und unsere Struktur kombiniert werden
- Ordne jeden Konkurrenzabschnitt einer unserer 5 Aufgaben zu (Testimonials → Vorteilsnachweis, FAQ → Angebotseinwände, Logo-Leiste → Erstbildschirm-Nachweis, Integrationen → Produkt…). Das ergibt eine aufgabenbezogene Sicht auf den Markt.
- Markt-Baseline = Muster, die von den meisten Konkurrenten verwendet werden. Käufer erwarten sie – nimm sie auf (Logo-Leiste, kostenlose Testversion, Vergleichstabelle, Vorher/Nachher… was auch immer in dieser Nische als Standard gilt).
- Best Practice = ein Muster, das (a) vom Kategorie-Marktführer oder von ≥2 Konkurrenten verwendet wird, oder auf Seiten, auf die sie bezahlte Anzeigen schalten, und (b) der Aufgabe seines Blocks dient. Übernimm es, in unseren Worten.
- Lücken = Einwände, die niemand beantwortet, Vorteile, die niemand beweist, Segmente, die niemand benennt, Formate, die niemand verwendet (z. B. niemand zeigt echte Ausgabe). Führe mit 1–2 davon – das ist die Positionierung.
- Konflikte. Hausregeln gewinnen standardmäßig; markiere den Konflikt am Checkpoint und lass den Eigentümer entscheiden. Typisch: Konkurrenten verwenden Lead-/Quiz-Formulare → wir behalten eine primäre Aktion (siehe Grundregeln).
- Visuelles System stammt aus dem Konkurrentenset (normalerweise vom Marktführer): Palettenrollen, Schrift, Dichte, Medienformat, CTA-Form. Kopiere das System, niemals deren Texte, Zahlen, Logos oder Assets.
Grundregeln (jede Nische)
- Starker erster Bildschirm: eine prägnante Beschreibung oder ein Haken-Nutzen, plus der Avatar.
- Jeder CTA ist mit einem konkreten Nutzen gepaart und sagt, was als nächstes passiert.
- Zeige, wie das Produkt funktioniert mit der echten Oberfläche – jeder Schritt der Funktionsweise gepaart mit einem echten Screenshot/Recording dieses Schrittes, oder lass sie es nutzen, wenn Konkurrenten das tun. Nichts fertig → einen leeren, korrekt dimensionierten Rahmen hinterlassen, beschriftet mit dem, was dort hinkommt. Ersetze die Oberfläche niemals durch eine Textliste, Symbole oder eine erfundene UI.
- Eine primäre Aktion, nur zwei CTA-Typen: ins Produkt (Start / Testen / Download / Anmelden) oder einen Anruf buchen (idealerweise ein eingebetteter Planer). Keine Lead- oder Quiz-Formulare auf der Seite. Erlaubt: eine Produkteingabe, die die Nutzung des Produkts startet (Link einfügen, Datei hochladen, Adresse eingeben), wenn Konkurrenten so das Ausprobieren ermöglichen.
- Erfinde niemals Nachweise, Preise, Statistiken, Testimonials oder Logos. Leerer Platz → sichtbares
TODO. - Nur echte Produktmedien – keine Fake-UI, kein Stock, wo Produktmedien sein sollten.
- Wenn eine Marktpraxis unklar oder riskant ist, frage den Eigentümer, anstatt zu raten.
Dateien
references/reference-standard.md– die vier Referenz-Landingpages: die Qualitätslatte, eine Musterbibliothek pro Aufgabe, Text- und visuelle Gestaltung. In beiden Modi lesen.references/redesign.md– Modus B: eine bestehende Seite prüfen und deren Design verbessern.references/brief.md– Kartenbasiertes Briefing, Kartenzeile → Blockzuordnung, Sprache, CTA-Typ.references/competitor-research.md– Konkurrenten finden, welche Seiten, erfassen, Analysevorlage, Syntheseregeln. Der Kern des Skills.references/framework.md– die 5 Aufgaben im Detail, blockbezogene Regeln, Marktreife, Plantabelle.references/visual-system.md– ein visuelles System von Konkurrenten ableiten und festlegen (jede Nische).references/build.md– Stack, Text, Medien, CTA-Verkabelung, Angebot/Preise, QA, Übergabe.references/seo-geo.md– vor dem Livegang: technische Checkliste für SEO und GEO (KI-Suche), von der Domain bis zur Search Console.references/examples.md– ausgearbeitete Beispiele (verschiedene Nischen). Beispiele, keine Regeln.scripts/capture.mjs– Screenshots + Struktur-/visuelle Extraktion für Konkurrenz-URLs.templates/teardown.md– die auszufüllende Analysedatei.