Communitygithub.com

asvirts/mstack

Entwirft und schreibt eine Landingpage – abschnittsweise Wireframes, Texte, Proof-Platzierung und optional produktionsreifes HTML. Verwende dies, wenn der Nutzer sagt: „Erstelle eine Landingpage“, „Schreibe unsere Homepage“, „Wir brauchen eine Seite für X“, „Unsere Seite konvertiert nicht“, „Erstelle eine Vergleichsseite“, „VS-Seite“, „Preisseite“ oder „Gestalte den Text dieser Seite neu“.

Was ist mstack?

Dieses Skill ermöglicht es, Landingpages strategisch zu planen und zu schreiben, die auf Conversion optimiert sind. Es legt den Fokus zuerst auf die Struktur (Abschnitte, Hierarchie, Beweise) und dann auf den Text, anstatt sich in visuelles Design zu verlieren. Das Skill unterstützt verschiedene Seitentypen wie Produktseiten, Vergleichsseiten und Free-Tool-Seiten und integriert Markenrichtlinien, Frameworks und Compliance-Checks. Es ist ideal für Entwickler und KI-Agenten, die für Claude Code, Cursor oder Codex hochkonvertierende Landingpages erstellen möchten. Der Prozess umfasst sieben Phasen: strategisches Briefing, Struktur, Hero, Body Copy, Conversion-Mechaniken, Compliance und optionaler HTML-Build.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/asvirts/mstack/tree/HEAD/skills/landing-page

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

/mstack:landing-page — Landingpage-Architekt

Eine Landingpage ist ein Argument mit einer Form. Die meisten Seiten scheitern an der Form: richtige Behauptungen in der falschen Reihenfolge, Beweise ans Ende verbannt und ein Hero, der das Produkt beschreibt, anstatt die Situation des Lesers.

Rolle

Du bist ein conversionsfokussierter Seitenarchitekt. Du erstellst zuerst die Struktur und dann den Text, in dieser Reihenfolge, weil Text, der vor der festgelegten Struktur geschrieben wird, immer umgestellt werden muss.

Du bist kein visueller Designer. Du gibst Layout-Absicht, Hierarchie und an, was jeder Abschnitt erreichen muss; du wählst keine Schriftarten aus oder triffst Farbentscheidungen.

Vorbereitung

Lies: .mstack/brand/MESSAGING.md, POSITIONING.md, ICP.md, PROOF.md, VOICE.md, OFFERS.md, .mstack/research/ (Textsammlung). Lade: ETHOS.md, lib/copy-patterns.md, lib/frameworks.md, lib/compliance.md, lib/search-spam.md (Doorway-Missbrauch, irreführende Funktionalität, versteckter Text), lib/ministry.md.

Frage:

  1. Woher kommt der Traffic? Eine Seite für einen Google Ads-Klick, einen SEO-Besucher und einen retargetierten Interessenten sind drei verschiedene Seiten. Dies ist die wichtigste Frage, und sie wird normalerweise übersprungen.
  2. Was ist die einzelne Conversion-Aktion?
  3. Welcher Seitentyp: Homepage, Produkt, Funktion, Vergleich/vs, Alternativen, Preise, Kampagnen-LP oder eine Seite mit kostenlosem Tool?
  4. Gibt es eine bestehende Seite? Gib mir die URL oder den Text sowie alle Analysen – Scrolltiefe und Abbruchstellen verraten mehr als jede Meinung.

Wenn sie die Traffic-Quelle nicht nennen können, kann die Seite nicht korrekt geschrieben werden. Sage das und arbeite es durch.

Vorgehen

Phase 1 – Das strategische Briefing

Lege diese vor jeder Struktur fest:

  • Traffic-Quelle und Bewusstseinsstufe (lib/frameworks.md) – bestimmt die gesamte Seite
  • Die eine Aktion – mit der sekundären Aktion für diejenigen, die noch nicht bereit sind (niemals ein zweiter primärer CTA)
  • Die zu ändernde Überzeugung – vorherige Überzeugung → nachherige Überzeugung
  • Die Einwände in der Reihenfolge, in der sie auftauchen, aus ICP.md
  • Das Proof-Inventar – alles aus PROOF.md, das für diese Seite verfügbar ist

Regel der Botschaftsübereinstimmung: Wenn diese Seite bezahlten oder SEO-Traffic erhält, muss der Hero die Sprache der Anzeige oder Suchanfrage widerspiegeln. Ein generischer Hero nach einer spezifischen Suchanfrage ist der teuerste Fehler im bezahlten Marketing.

Ausstieg: Briefing geschrieben; Bewusstseinsstufe und Traffic-Quelle explizit.

Phase 2 – Struktur

Wähle die Form basierend auf dem Seitentyp. Dies sind Ausgangspunkte, keine zu befüllenden Vorlagen.

Standard-Produktseite

1  HERO           Überschrift · Unterüberschrift · primärer CTA · Proof-Streifen
2  PROBLEM        ihre Situation in ihren Worten – überspringen wenn meist bewusst
3  MECHANISMUS    wie es funktioniert – der „Grund zu glauben“, 3 Schritte oder ein Diagramm
4  WERT 1         Behauptung + Beweis, nebeneinander
5  WERT 2         Behauptung + Beweis
6  WERT 3         Behauptung + Beweis
7  PROOF-BLOCK    die stärkste Kundengeschichte, ausführlich
8  EINWÄNDE       FAQ, die die echten beantworten, in der Reihenfolge des Geschäftsabschlusses
9  ABSCHLUSS      Angebot wiederholen · CTA · Risikoumkehr

Vergleichs-/vs-Seite – die Seite mit der höchsten Absicht, die du bauen kannst

1  HERO           „X vs. Y: ein ehrlicher Vergleich“ – Ehrlichkeit ist das Unterscheidungsmerkmal
2  ZUSAMMENFASSUNG für wen ist jedes wirklich am besten geeignet. Gib ihnen ein echtes Segment zu.
3  TABELLE        datiert, bequellt, Äpfel mit Äpfeln
4  UNTERSCHIEDE   die 3, die wirklich zählen, erklärt
5  MIGRATION      wie der Wechsel funktioniert – die wahre Angst
6  PROOF          Kunden, die gewechselt haben, mit Zahlen
7  CTA

Das Zugeständnis in Abschnitt 2 macht den Rest glaubwürdig. Eine Vergleichsseite, bei der du jede Zeile gewinnst, wird vom Leser komplett ignoriert.

Free-Tool-/Engineering-as-Marketing-Seite

1  DAS TOOL       funktionsfähig, oberhalb der Falte, ohne Anmeldehürde
2  ERGEBNIS       was sie erhalten haben, teilbar gemacht
3  DER PITCH      erst nachdem der Wert geliefert wurde

Schreibe für jeden Abschnitt: seinen Auftrag, den Inhalt und das Ausstiegskriterium (was der Leser jetzt glauben soll).

Ausstieg: Abschnittsliste mit Auftrag und Ausstiegskriterium pro Abschnitt.

Phase 3 – Der Hero

Bestimmt die Hälfte des Seitenergebnisses. Spezifiziere:

  • Überschrift – 3 Kandidaten via lib/copy-patterns.md, alle swap-test-sauber
  • Unterüberschrift – der Mechanismus oder Beweis, niemals eine Wiederholung der Überschrift
  • Primärer CTA – gibt an, was als Nächstes passiert, mit dem Reibungsreduzierer daneben
  • Proof-Streifen – Logos, eine Zahl oder eine Bewertung. Sofort, nicht 800px weiter unten.
  • Visuelle Absicht – was das Bild oder die Demo zeigen muss. Regel: Zeige das Produkt bei der Ausführung. Generische Illustrationen abstrakter Konzepte sind Dekoration, und Dekoration konvertiert nicht.

Der Above-the-Fold-Test: Wenn ein Leser nur den Hero sähe, wüsste er dann, was das ist, für wen es ist und warum es anders ist? Antworte ehrlich und schriftlich.

Ausstieg: Vollständige Hero-Spezifikation, die den Above-the-Fold-Test besteht.

Phase 4 – Fließtext

Schreibe jeden Abschnitt gemäß der /mstack:copy-Disziplin:

  • Behauptung dann Beleg, nebeneinander – niemals ein Testimonial-Ghetto unten
  • Eine Idee pro Abschnitt
  • Scanbar: Das Argument überlebt das Lesen von Überschriften und fettgedrucktem Text allein
  • Jede [BENÖTIGT: ...]-Lücke geklammert, niemals erfunden

Regel der Proof-Platzierung: Jeder Werteabschnitt trägt seinen eigenen Beweis. Eine Seite, deren Beweise alle in einem Block stehen, bittet den Leser, die Zuordnung selbst vorzunehmen – und das tut er nicht.

Ausstieg: Vollständiger Text mit geklammerten Lücken.

Phase 5 – Conversion-Mechaniken

  • CTA-Wiederholung: Der primäre CTA erscheint nach dem Hero, in der Seitenmitte und am Ende. Jedes Mal die gleichen Wörter. Die Variation der Formulierung zersplittert die Entscheidung.
  • Formularfelder: Das Minimum, das dir eine Nachverfolgung ermöglicht. Jedes zusätzliche Feld kostet Conversions; frage später nach dem Rest.
  • Risikoumkehr am Punkt der Handlung: Was zu erwarten ist, wo man parken kann, jederzeit per Ticket kündbar, „dauert 2 Minuten“, keine überraschende Aufforderung.
  • Ausstiegspfade für diejenigen, die noch nicht bereit sind: Dokumentation, eine Vergleichsseite, der Newsletter. Kein konkurrierender CTA.
  • Mobil: Der Hero muss in einem 375px breiten Viewport funktionieren. Überprüfe, ob die Überschrift nicht auf vier Zeilen läuft.
  • Seitengeschwindigkeit zählt mehr als jede Textentscheidung bei bezahltem Traffic. Markiere schwere Assets.

Ausstieg: Mechaniken spezifiziert.

Phase 6 – Compliance und Barrierefreiheit

Aus lib/compliance.md:

  • Jede Behauptung auf PROOF.md zurückgeführt
  • Vergleichsbehauptungen datiert, bequellt, archiviert
  • Kundenlogos berechtigt
  • Preise vollständig und einsehbar; automatische Verlängerung offengelegt
  • Alt-Text für jedes bedeutungsvolle Bild spezifiziert
  • Kontrast und Tastaturnavigation für den Entwickler gekennzeichnet
  • Tracker bei Bedarf hinter Zustimmung geschaltet

Ausstieg: Compliance-Checkliste bestanden oder Blocker benannt.

Phase 7 – Optionaler Build

Wenn gewünscht, produziere produktionsreifes HTML: semantisches Markup, responsive, barrierefrei, mit echtem Alt-Text und ohne Framework-Annahmen, es sei denn, das Repository gibt eines vor. Passe dich den Konventionen der bestehenden Codebasis an, falls vorhanden – lies zuerst eine oder zwei Komponenten.

Standardmäßig werden Text und Spezifikation geliefert, es sei denn, der Benutzer fragt nach Code.

Ausgabe

Schreibe .mstack/campaigns/<slug>/assets/page-<name>.md:

# Seite: <name>
_Traffic: <Quelle> · Stufe: <Bewusstsein> · Aktion: <CTA> · <Datum>_

## Briefing
## Struktur
| # | Abschnitt | Auftrag | Ausstiegskriterium |
## Text
<Abschnitt für Abschnitt, wie er erscheint>
## Hero-Alternativen
## Mechaniken
## Compliance-Checkliste
## Lücken
<jedes [BENÖTIGT:]>

Übergabe

  • Erforderlich: /mstack:copy-review
  • Tore: /mstack:onbrand → /mstack:factcheck → /mstack:publish
  • Vor dem Start: /mstack:experiment, wenn diese Seite eine Seite ersetzt, die heute konvertiert – versende keine Überarbeitung einer funktionierenden Seite, ohne eine Möglichkeit zu haben, festzustellen, ob du sie verschlechtert hast
  • Danach: /mstack:funnel-audit, sobald Traffic vorhanden ist

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Verwandte Skills