Erstellen Sie eine HTML-Landing mit Claude oder ChatGPT

Schritt 1 — Marktrecherche und Buyer Persona

Bevor es an den Copy geht, lassen Sie die KI verstehen, mit wem Sie sprechen und warum diese Person kauft. Fügen Sie diesen Prompt ein (Produkt und Land ausfüllen):

Du bist ein Experte für Direct-Response-Marketing. Ich muss [PRODUKT] in [LAND] verkaufen, mit Nachnahme (COD).
Gib mir kompakt:
1. Buyer Persona: wer sie ist, Alter, Hauptproblem, was sie befürchtet, was sie sich wünscht
2. Die 3-5 stärksten "Pain Points", auf die man sich stützen kann
3. Den wirksamsten Verkaufswinkel für kalten Traffic von Facebook/TikTok
4. Den richtigen Tonfall für dieses Publikum
5. 5 Überschriften-Kandidaten

Bewahren Sie die Antwort auf: Sie geben sie Claude in Schritt 3.

Schritt 2 — Format wählen: Advertorial oder Sales Page

• Advertorial — wirkt wie ein Artikel oder eine Geschichte ("Ich habe X 30 Tage lang getestet und..."). Verkauft sanft: super für kalten Traffic, der Sie noch nicht kennt.
• Sales Page — eine direkte Verkaufsseite: Problem → Lösung → Produkt → Angebot → CTA. Gut für wärmeres Publikum oder einfache, spontane Angebote.

💡 Im Zweifel bei kaltem COD mit dem Advertorial starten: konvertiert bei Social-Traffic besser.

Schritt 3 — Claude das HTML schreiben lassen

Das ist der zentrale Prompt. Fügen Sie ihn zusammen mit der Recherche aus Schritt 1 in Claude ein:

Du bist ein Direct-Response-Copywriter und Frontend-Entwickler. Erstelle eine Landing Page in EINER EINZIGEN index.html-Datei, um [PRODUKT] in [LAND] per Nachnahme zu verkaufen.

Verwende diese Recherche:
[HIER DIE ANTWORT AUS SCHRITT 1 EINFÜGEN]

Anforderungen:
- Format: [Advertorial / Sales Page]
- Sprache: [Sprache des Landes]
- Mobile-first, gesamtes CSS in der Datei (keine externen Bibliotheken), schnelle und schlanke Seite.
- Struktur: Hook, Problem, Lösung, Vorteile und Belege, Bewertungen, klares Angebot, FAQ, und mehrere CTA-Punkte.
- Verwende für Bilder relative Pfade wie images/img_01_hero.jpg, images/img_02_produkt.jpg usw. Liste am Ende die benötigten Bilder mit einer kurzen Beschreibung jedes einzelnen auf (ich brauche das, um sie zu generieren).
- Füge an den CTA-/Bestellformular-Stellen EXAKT diesen Platzhalter ein (bei Bedarf mehrfach): <div class="lp-form-container"></div>  — baue KEIN Formular von Hand.
- Füge direkt vor </body> diesen Block ein, und lasse die Werte unverändert:
  <script>
    window.RoyLeadConfig = {
      captureUrl: "https://capture.roylead.com",
      apiKey: "IHR_API_KEY",
      landingPageId: "IHRE_LANDING_PAGE_ID",
      thankYouPage: "https://ihredomain.com/danke.html"
    };
  </script>
  <script src="https://capture.roylead.com/tracker.js"></script>
- Gib mir die vollständige index.html-Datei, speicherbereit.

💡 Claude gibt Ihnen die Datei und die Liste der Bilder zurück, die Sie erstellen sollen. Legen Sie einen neuen Ordner auf Ihrem PC an und speichern Sie die Datei darin als index.html.

Schritt 4 — Die Bilder mit ChatGPT erstellen

Nehmen Sie die Bilderliste, die Claude Ihnen gegeben hat, und lassen Sie ChatGPT sie eins nach dem anderen generieren:

Generiere ein Bild: [Beschreibung aus Claudes Liste]. Realistischer fotografischer Stil, passend für eine Verkaufs-Landing für [PRODUKT]. Vertikales Format, für Mobilgeräte gedacht.

• Laden Sie jedes Bild herunter und benennen Sie es exakt wie in der Datei um (z. B. img_01_hero.jpg).
• Legen Sie alle in einen Unterordner images/ innerhalb des Landing-Ordners.

⚠️ Verwenden Sie für das Produkt Ihre echten Fotos. ChatGPT eignet sich für Hero-Bilder, Hintergründe, Illustrationen. Keine gefälschten Erfahrungsberichte oder unwahren Behauptungen: das ist nicht nur falsch, es führt auch zur Sperrung von Kampagnen.

Schritt 5 — Den Ordner prüfen

Am Ende sollten Sie haben:

• index.html
• den Ordner images/ mit allen Bildern, mit den richtigen Namen
• das <div class="lp-form-container"></div> dort, wo Sie das Formular haben möchten
• den RoyLead-Tracker-Block direkt vor </body>

Öffnen Sie index.html per Doppelklick: die Seite sollte angezeigt werden, die Bilder sollten laden, und es sollte Platz für das Formular geben.

💡 Möchten Sie etwas ändern (einen Text, die Reihenfolge der Abschnitte, eine Farbe)? Sagen Sie Claude, was zu ändern ist, und lassen Sie sich die aktualisierte Datei zurückgeben.

Und jetzt? Die Landing veröffentlichen

Der Ordner ist fertig. Bringen Sie ihn auf Ihrer Domain online und verbinden Sie den Tracker (dort geben Sie IHR_API_KEY und IHRE_LANDING_PAGE_ID ein):

Eine HTML-Landing auf Cloudflare Workers veröffentlichen ↗