fabriciopmkt/lp-erstellen

Eine LP mit Claude Code und Cloudflare Pages erstellen

Leitfaden, um von "Ich brauche eine Seite" bis zur laufenden LP zu gelangen, die Leads empfängt. Das Hosting ist Cloudflare Pages: kostenlos, schnell, mit automatischem HTTPS und Serverfunktionen (Pages Functions), um das Formular ohne eigenen Server zu empfangen.

Die Skill richtet sich an Nicht-Entwickler. Sie (Claude) übernehmen die Arbeit im Terminal und erklären jeden Schritt in einfacher Sprache. Wenn ein Schritt die Person erfordert (Login, Dashboard, DNS), liefern Sie jeweils einen Befehl, bereit zum Einfügen.

Anzeigen-Tracking (Pixel, Conversions API, GA4, Google Ads-Tags) bleibt außerhalb dieser Skill. Wenn es gewünscht wird, richten Sie es separat ein, nachdem die LP live ist.

So arbeiten Sie mit der Person

• Planen Sie vor dem Schreiben. Zeigen Sie die Abschnitte der LP mit dem Text jedes Abschnitts und der Herkunft des Textes an. Bauen Sie die LP erst nach einem "ok" auf.
• Text nur aus der Quelle. Preis, Datum, Arbeitsumfang, Name des Lehrers, Garantie, Boni: Alles stammt aus dem Material, das die Person bereitgestellt hat (Briefing, Website, PDF, Gespräch). Erfinden Sie niemals Zahlen oder Versprechen. Fehlen Daten, fragen Sie nach.
• Empfehlen, nicht auflisten. Wenn eine Wahlmöglichkeit besteht (Pfad, Layout, Domain), sagen Sie, welche Sie wählen würden und warum.
• Nichts geht ohne Aufforderung in die Produktion. Vorschau ist in Ordnung. Veröffentlichung unter der offiziellen Adresse oder DNS-Änderung nur mit dem "kann veröffentlicht werden" der Person.
• Windows: Verwenden Sie in PowerShell npx.cmd anstelle von npx und beginnen Sie jeden Befehl mit cd im absoluten Pfad des Projektordners.

0. Den Pfad ermitteln

Fragen Sie (oder leiten Sie aus der Anfrage ab), was die LP benötigt. Jeder Pfad baut auf dem vorherigen auf:

Pfad	Lieferung	Lesen Sie
1. Einfache LP	Seite live unter <Projekt>.pages.dev, Schaltfläche führt zu Checkout, WhatsApp oder einer anderen Website	diese Datei
2. Eigene Domain	lp.ihremarke.com/<slug>/	references/dominio.md
3. Formular mit Lead	Formular, das den Lead speichert (D1) und per Webhook an CRM liefert, plus Dankesseite	references/formulario.md

Sammeln Sie außerdem:

• Textquelle: Briefing, Website, PDF, Lehrplan, alte LP.
• Identität: Farben, Schriftart, Logo (Datei), Fotos (Dateien, mit Nutzungsrechten).
• Ziel der Schaltfläche: Checkout, WhatsApp (https://wa.me/55DDDNUMBER?text=...) oder Formular.
• Slug: kurz, klein, mit Bindestrich (kurs-x, masterclass-y). Wird zum URL-Pfad.

1. Maschine vorbereiten (einmalig)

Befolgen Sie references/cloudflare-setup.md: Node installiert, Cloudflare-Konto, wrangler login (die Person macht es im Browser) und Erstellung des Pages-Projekts. Überprüfen Sie mit npx wrangler whoami, bevor Sie fortfahren.

2. Projekt aufsetzen

Ein Projektordner enthält alle LPs einer Marke, eine Unterordner pro LP. Ein Deployment veröffentlicht alles auf einmal.

meine-lps/
  _redirects        (Sperren und stillgelegte LPs)
  _headers          (Sicherheitsheader)
  wrangler.toml     (Projektname und Datenbank)
  schema.sql        (Lead-Tabelle, Pfad 3)
  CLAUDE.md         (Projektgedächtnis: Entscheidungen, was live ist)
  functions/
    lead.js         (empfängt das Formular, Pfad 3)
  danke/
    index.html      (Seite nach dem Formular, Pfad 3)
  <slug>/
    index.html      (die LP)
    img/            (optimierte Fotos und Logos)

Beginnen Sie, indem Sie den Ordner modell/projekt/ dieser Skill an den Ort kopieren, an dem die Person das Projekt haben möchte, und benennen Sie meine-lp/ in den Slug um. Das Modell enthält bereits Formular, Vorschausperre und Sperren. Wenn das Projekt bereits existiert, erstellen Sie nur den neuen Unterordner, indem Sie modell/projekt/meine-lp/ kopieren. LP ohne Formular (Pfad 1): Ersetzen Sie den Formularblock durch Schaltflächen mit dem Ziellink und löschen Sie functions/, danke/ und schema.sql.

Goldene Regel: Das Deployment veröffentlicht den gesamten Ordner. Jede Datei darin ist im Internet zugänglich (.claude/, CLAUDE.md, Tabellen, Notizen). Deshalb:

• legen Sie niemals Passwörter, Token oder Webhook-URLs in Dateien des Ordners (Geheimnisse kommen in wrangler pages secret put, siehe references/formulario.md);
• das _redirects des Modells sperrt bereits CLAUDE.md, .claude/*, wrangler.toml, schema.sql und package*.json. Neue Datei im Stammverzeichnis: entweder sie kann öffentlich sein, oder sie erhält vor dem Deployment eine Sperrzeile.

3. Die LP schreiben

1. Abschnittsplan mit dem Text jedes Abschnitts. Reihenfolge, die meist konvertiert:
   1. Oben: klares Versprechen, für wen, Datum und Format, Schaltfläche.
   2. Nachweis: wer lehrt oder wer es bereits genutzt hat (echtes Foto, Qualifikation, überprüfbare Zahl).
   3. Was die Person bekommt: 3 bis 6 konkrete Vorteile.
   4. Für wen es ist (und für wen nicht).
   5. Inhalt oder Programm: Zusammenfassung auf einen Blick, Details in <details> (öffnet sich bei Klick).
   6. Angebot: Preis, Kondition, was enthalten ist, Garantie (nur falls vorhanden).
   7. Häufig gestellte Fragen (in <details>).
   8. Letzte Schaltfläche und Fußzeile (Marke, Kontakt, Datenschutzerklärung, wenn Daten erhoben werden).
2. Mobil zuerst. Der Großteil des Traffics kommt vom Handy. Schreiben Sie das CSS für 375 px und erweitern Sie es für größere Bildschirme. Scanbarer Text: kurze Sätze, Überschrift pro Block, keine Textwände.
3. Schaltfläche immer sichtbar oben und wiederholt nach jedem Entscheidungsblock.
4. Leichte Bilder: JPG oder WebP, bis ~200 KB pro Stück, width und height im <img>, loading="lazy" bei allem, was nicht der obere Bereich ist. Foto oben mit fetchpriority="high".
5. Metadaten: <title>, description, og:image (1200×630) und Favicon. Das ist, was erscheint, wenn jemand den Link in WhatsApp teilt.
6. Keine schweren Abhängigkeiten. Reines HTML, CSS und JS reichen für eine LP. Google-Schriftart mit display=swap maximal.

Die Farben und Schriftarten des Modells befinden sich in Variablen oben im <style> (:root). Ändern Sie sie dort, um die Markenidentität auf einmal anzuwenden.

4. Lokale Vorschau

npx wrangler pages dev .

Öffnet unter http://localhost:8788/<slug>/ mit funktionierenden Functions. Überprüfen Sie im Browser bei 375 px und 1280 px: Texte, Bilder, Schaltflächen, Formular und Console ohne Fehler. Wenn der App einen eingebauten Browser hat, verwenden Sie ihn und senden Sie einen Screenshot an die Person.

5. Online-Vorschau (zur Freigabe)

npx wrangler pages deploy . --project-name=<Projekt> --branch=vorschau --commit-dirty=true

Erscheint unter vorschau.<Projekt>.pages.dev, getrennt von der Produktion. Senden Sie den Link zur Freigabe auf dem Handy an die Person. Das Modell sperrt das Formular auf dieser Adresse (erzeugt keine falschen Leads im CRM).

6. Veröffentlichen

Nur mit "Kann veröffentlicht werden":

npx wrangler pages deploy . --project-name=<Projekt> --branch=main --commit-dirty=true

Überprüfen Sie danach:

• die LP antwortet mit 200 unter der offiziellen Adresse (curl -sI https://<Adresse>/<slug>/);
• die gesperrten Dateien antworten mit 301 (/CLAUDE.md, /wrangler.toml);
• falls ein Formular vorhanden ist, kommt ein Test-Lead am Ziel an (Pfad 3).

Die vollständige Checkliste finden Sie in references/checklist.md.

7. Protokollieren

Aktualisieren Sie die CLAUDE.md des Projekts mit: neue LP (Slug, Produkt, Datum), Ziel der Schaltfläche, registrierte Secrets (nur der NAME, niemals der Wert) und die Deploy-ID. Das ist es, was das nächste Gespräch liest, um nichts zu beschädigen. Wenn das Projekt git verwendet, committen Sie nur die LP-Dateien.

Änderungen danach

• Text oder Preis: bearbeiten, Vorschau, veröffentlichen. Ändern Sie dieselbe Information an allen Stellen (oben, Angebot, FAQ, Danke, Metadaten).
• Zwei LPs desselben Produkts (z. B. eine pro Traffic-Quelle): halten Sie den Inhalt identisch und ändern Sie beide im selben Deployment. Notieren Sie in CLAUDE.md, was zwischen ihnen abweichen darf.
• Eine LP außer Dienst stellen: Löschen Sie den Ordner nicht überstürzt. Fügen Sie in _redirects eine 301-Zeile für den Ersatz hinzu (/alter-slug /neuer-slug/ 301 und /alter-slug/* /neuer-slug/ 301). Alte Anzeigen, Bio-Links und E-Mails funktionieren weiterhin.
• Neues oder geändertes Secret: gilt erst nach einem neuen Deployment.

Bekannte Fallstricke

• Vergessene Datei im Ordner wird öffentlich. Es ist schon vorgekommen, dass eine Konfigurationsdatei mit Zugriffsschlüssel offen im Internet lag. .assetsignore wird von wrangler pages deploy nicht beachtet: Verwenden Sie die Sperre in _redirects.
• Secret registriert und nichts hat sich geändert: Nach dem secret put fehlt das Deployment.
• Secret mit nur einem Teil des Werts: Webhook ohne https:// oder nur mit dem Schlüssel registriert ergibt Invalid URL. Registrieren Sie die vollständige URL.
• Name mit Akzent kommt als %C3%A9 an: Dekodieren Sie die Parameter auf der Dankesseite (decodeURIComponent). Das Modell macht dies bereits.
• Formular, das in der Online-Vorschau "nichts tut" : Die Vorschausperre wirkt. Testen Sie in localhost oder in der Produktion.