Communitygithub.com

davidkarolyi/Landing-Page-Skill

Entwerfen und schreiben von Landingpages, Marketingseiten, Produkt-Homepages, Hero-Bereichen und Startseiten, die den Besucher verstanden fühlen lassen, statt ihm etwas zu verkaufen.

Was ist Landing-Page-Skill?

Diese Skill-Anleitung verwandelt das Erstellen von Landingpages von einer feature-getriebenen Aufgabenliste in eine Übung des Verstehens des Nutzers. Sie beschreibt detailliert, dass großartige Seiten nicht damit beginnen, das Produkt zu erklären, sondern die unausgesprochene Frustration des Besuchers zu erkennen. Der Fokus liegt auf einer klaren, einfachen Sprache, einer einzigen starken Emotion und einem visuell getragenen Storytelling, bei dem jeder Abschnitt nur eine einzige Idee transportiert. Die Skill umfasst die Arbeit an Hero-Texten, Taglines, Feature-Abschnitten, Preisseiten, Wartelistenseiten, App-Store-Beschreibungen und Onboarding-Bildschirmen und betont, dass der Besucher innerhalb von drei Sekunden verstehen muss, was das Produkt ist und warum es für ihn relevant ist.

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

In Ihrer bevorzugten KI fragen

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

Dokumentation

Landing Page

Du beschreibst kein Produkt. Du erkennst einen Menschen.

Die meisten Landingpages werden aus dem Unternehmen heraus geschrieben. Sie listen auf, was gebaut wurde, erklären, wie es funktioniert, vergleichen es mit Alternativen und hoffen, dass der Besucher den Knoten löst. Der Besucher löst den Knoten nicht. Er kam von einem Link, leicht neugierig, meist abgelenkt, mit einem Problem, das er noch nicht vollständig in Worte gefasst hat. Er gibt der Seite ein paar Sekunden. In diesen Sekunden bewertet er keine Funktionen. Er stellt eine Frage: Weiß dieses Ding, wie mein Leben aussieht?

Eine großartige Seite sagt ihm, was das Ding ist, in einem klaren Satz, und antwortet dann mit Ja. Der Besucher weiß, was er sieht, liest die nächste Zeile und denkt „genau das ist es“, dann noch eine, und am Ende beugt er sich vor, weil endlich jemand die Sache ausgesprochen hat. Das ist die ganze Aufgabe: Sie sofort zu orientieren und dann durch eine Geschichte zu führen, die sie wiedererkennen.

Setz dich auf den Stuhl des Besuchers

Bevor du ein Wort schreibst, werde zu ihm. Keine Zielgruppe, ein Mensch in einem Moment.

  • Wer ist das, und was hat er vor dreißig Sekunden gemacht? Im Feed gescrollt. Ein Support-Ticket geschlossen. Um 23 Uhr mit einer Tabelle gestritten.
  • Was ist die Frustration, die er mit sich herumträgt, deren Lösung er schon halb aufgegeben hat?
  • Was hat er bereits versucht, und was haben diese Dinge falsch gemacht?
  • Was wünscht er sich insgeheim, dass es ihm jemand einfach sagt?
  • Was würde ihn Erleichterung spüren lassen, und was würde ihn sich verkauft fühlen lassen?

Schreib die Antworten so auf, wie er sie sagen würde, in seinen Worten, mit seinem Ton. Wenn deine Antworten nach einem Marketing-Briefing klingen, sitzt du noch im Sessel des Unternehmens. Mach weiter, bis sie sich wie eine Nachricht anfühlen, die ein Freund schicken würde.

Die Seite wird aus diesen Antworten gebaut. Das Produkt darf nur auf der Seite erscheinen, wo es in seine Geschichte passt.

Eine Emotion, ein Hebel

Jedes Produkt, das Menschen lieben, hat eine Persönlichkeit, und diese Persönlichkeit ist fast immer eine einzige einfache Botschaft, die auf einer einzigen Emotion aufbaut. Kein Positionierungsstatement. Ein Gefühl. Erleichterung. Ruhe. Kontrolle. Endlich. Befreiung von einem bestimmten kleinen Übel.

Finde diese Emotion. Dann finde den einfachsten Hebel, der sie ausdrückt: die eine klare Beobachtung, die fast peinlich offensichtlich ist, sobald sie ausgesprochen wird. Großartige Seiten sagen das Offensichtliche, das noch niemand laut gesagt hat. Sie greifen nicht nach Cleverness. Cleverness lässt den Leser arbeiten; Offensichtlichkeit lässt ihn nicken.

Sobald du die Emotion und den Hebel hast, dienen jede Überschrift, jeder Abschnitt, jedes Bild diesem Zweck. Wenn eine Zeile nicht auf die Emotion zeigt, gehört sie nicht auf diese Seite.

Widerstehe der Versuchung, den Mechanismus zu erklären. „Jeder Lauf ist eine Quittung“ beschreibt, wie das System funktioniert. Es steckt kein Gefühl darin, und der Leser muss es entschlüsseln. Mechanismus gehört in die Dokumentation. Die Seite trägt nur das, was der Leser bereits fühlt, und das Versprechen, dass es verschwindet.

Sag zuerst, was es ist

Der häufigste Fehler ist eine Seite, die ganz Konzept und kein Objekt ist. „KI halluziniert zu viel.“ „Arbeit sollte sich leichter anfühlen.“ „Forschung neu denken.“ Der Leser beendet den Hero und weiß immer noch nicht, was er sieht. Abstrakt ist nicht dasselbe wie emotional. Abstrakt ist einfach nur vage.

Die erste Zeile benennt das Ding. Klar. Welcher Kategorie es angehört und der eine Grund, warum es anders ist, oder der eine Grund, sich dafür zu interessieren. Beides, in ein paar Wörtern, im selben Atemzug. „Das KI-Webrecherche-Tool, das keinen Mist erfindet.“ Kategorie, Unterscheidungsmerkmal, fertig. Es kann direkt oder provokativ sein, das ist in Ordnung und oft gut. Was es nicht sein darf, ist unklar.

Der Leser sollte in drei Sekunden auf den Hero schauen und zwei Fragen beantworten können: Was ist das, und warum sollte es mich interessieren? Wenn er das nicht kann, wird nichts unterhalb des Fold gelesen, weil er bereits gegangen ist.

Jeder Abschnitt ist ein Bild und eine kurze Zeile

Das ist die Regel für die gesamte Seite, und der Hero ist nur der erste Ort, an dem sie gilt.

Ein Abschnitt ist ein Bild mit einer Zeile darauf. Die Zeile hat vier bis acht Wörter. Das Bild trägt das Gefühl; die Zeile trägt die Tatsache. Nichts sonst im Abschnitt konkurriert mit einem von beiden. Wenn es eine zweite Zeile gibt, ist sie klein, leise und optional, und die meisten Leser werden sie nie sehen.

Der Hero ist genauso: ein Bild, der Tagline, ein Button. Der Tagline hat vier bis acht Wörter, die sagen, was das Produkt ist und warum es wichtig ist. Kein unterstützender Absatz. Keine drei Value Props. Kein Feature-Karussell. Der Leser, der nicht weiter scrollt, sollte trotzdem wissen, was das Ding ist, und ein Gefühl dazu haben.

Erkennen statt Überzeugen

Verkaufe nicht. Erkenne.

Sobald der Leser weiß, was das Ding ist, hört die Seite auf, das Produkt zu beschreiben, und beginnt, ihn zu beschreiben. Seine Situation, in seinen Worten. Ein kleiner spezifischer Moment, den er erlebt hat. Das Gefühl, das er in diesem Moment hat. Dann, ganz leicht, die Befreiung davon.

Die Seite versucht nicht, jemanden zu überzeugen, dass das Produkt besser ist. Sie sagt nicht „anders als andere Tools“. Sie sagt die Sache, die der Leser bereits denkt, so genau, dass er sich gesehen fühlt. Die Überzeugung geschieht von selbst, weil Menschen demjenigen vertrauen, der sie versteht.

Jede Zeile sollte einen Test bestehen: Würde der Leser sagen „ja, das stimmt so sehr“? Wenn eine Zeile ihn nur sagen lässt „okay, verstehe“, ist sie informativ und gehört an einen ruhigeren Ort. Wenn sie ihn sagen lässt „klar, das musst du ja sagen“, ist sie verkäuferisch und fliegt raus.

Die Seite ist eine Geschichte

Eine Landingpage ist kein Stapel von Abschnitten. Es ist eine einzelne Handlung, die von oben nach unten gelesen wird und den Leser durch eine Abfolge von Gefühlen führt. Jeder Beat trifft eine Sache. Die Beats ergeben einen Bogen.

Der Bogen beginnt damit, was das Produkt ist und warum es anders ist, damit der Leser orientiert ist. Dann führt er ihn durch das Problem, gefühlt und nicht erklärt, und durch die Erleichterung, gezeigt und nicht behauptet. Je spezifischer das Problem wird, desto spezifischer wird das Produkt, immer im selben klaren Register. Am Ende hat der Leser das Ganze gefühlt, und die Handlung am unteren Ende ist offensichtlich.

Ein typischer Bogen für ein Recherche-Tool:

  1. „Das KI-Webrecherche-Tool, das keinen Mist erfindet.“ Orientierung. Was es ist, warum wichtig.
  2. „KI-Suche ist genauso selbstbewusst, wenn sie falsch liegt.“ Das Problem, in einer klaren Zeile benannt. Wiedererkennung.
  3. Eine kurze Animation einer selbstbewussten Antwort, die eine nicht existierende Seite zitiert. Das Problem, gefühlt. Keine Worte nötig außer einer Bildunterschrift.
  4. „Nur live-Seiten. Nichts aus dem Gedächtnis.“ Was das Tool tut, so klar benannt wie das Problem.
  5. Ein Bild eines echten Zitats, das zu einer echten Seite führt. Die Erleichterung, gezeigt.
  6. Ein Button, formuliert als das, was sie bekommen.

Beachte, dass jeder Beat genau eine Sage sagt. Kein Beat trägt zwei Ideen. Kein Beat erklärt den Mechanismus. Die Wörter pro Beat sind an einer Hand abzählbar, und das Bild erledigt den Rest.

Eine Sache pro Abschnitt

Nichts auf der Seite wird gelesen, außer den wenigen Wörtern, die du in den Fokus zwingst. Also zwinge sie.

Wenn du in einem Abschnitt zwei Dinge zu sagen hast, hast du zwei Abschnitte. Wenn ein Satz drei Konzepte enthält, hast du den Satz noch nicht gefunden. Sage eine Sache, klar, und lass das Bild die Emotion darum tragen.

Halte den Kommunikationskanal absichtlich schmal. Je schmaler er ist, desto sicherer kannst du sein, dass das, was durchkommt, das ist, was du ausgewählt hast.

Wenige Wörter, leichte Sätze

Schreibe kurz. Dann kürzer. Der Leser wird keine Absätze lesen, und jedes zusätzliche Wort verwässert das Nicken.

Der Ton ist mühelos, nie erzwungen. Keine Ausrufezeichen, die die Arbeit machen, die die Wörter machen sollten. Keine gestapelten Adjektive. Kein Jargon, keine internen Namen, keine Kategoriewörter, die der Leser nachschlagen müsste. Sage es so, wie der Leser es einem Freund sagen würde, und entferne dann die Hälfte der Wörter.

Nichts davon sollte sich nach Marketing anfühlen. Wenn eine Zeile in einer Pressemitteilung stehen könnte, schreibe sie um, bis sie nur noch in einer Textnachricht stehen könnte.

Alles visuell, alles animiert

Der Leser sieht die Seite, bevor er sie liest. Layout, Bewegung und Bilder tragen das Gefühl; die Wörter tragen die Tatsache. Jeder Abschnitt ist ein Bild mit einer Zeile darauf, nicht eine Zeile mit einer Illustration daneben.

Zeige, wie das Problem passiert. Zeige, wie die Erleichterung passiert. Eine kurze Animation, wie die Sache schiefgeht, dann wie sie richtiggeht, macht mehr als jeder Text. Bewegung sollte dem Temperament des Produkts entsprechen: ruhige Produkte setzen sich, verspielte Produkte hüpfen, präzise Produkte schnappen. Animation zieht das Auge auf die Zeile, dekoriert sie nie.

Jeder Abschnitt hat genau ein lautestes Element. Der Raum ist großzügig. Die Seite atmet.

Was gestrichen wird

Diese Dinge kommen aus dem Sessel des Unternehmens. Lösche sie auf Sicht:

  • Abstrakte Hero-Bereiche, die ein Thema nennen, aber nicht das Produkt.
  • Feature-Raster und Icon-plus-Text-Kacheln. Sie beschreiben das System, nicht die Person.
  • „Wir sind besser, weil“ und Vergleichstabellen. Der Leser hat nicht um eine Debatte gebeten.
  • Erklärungen, wie es funktioniert, Architektur, Pipelines oder clevere Interna.
  • Buzzwords, Kategoriejargon und alles, was entschlüsselt werden muss.
  • Testimonial-Wände, Logo-Streifen und Badges, die um Vertrauen bitten, statt es zu verdienen.
  • Gestapelte Value Props, die versuchen, jeden möglichen Leser abzudecken. Wähle die eine Person aus.
  • Jeder Abschnitt, der zwei Dinge sagt. Teile ihn oder streiche ihn.
  • Jede Zeile, die existiert, weil das Team stolz darauf ist, und nicht, weil der Leser sie braucht.

Bevor du es für fertig erklärst

Lies die Seite kalt, als die Person auf dem Stuhl, auf einem Telefon, mit etwas anderem im Kopf.

  • Kannst du nach drei Sekunden auf dem Hero sagen, was das Produkt ist und warum du dich dafür interessieren würdest?
  • Trägt der Tagline sowohl die Kategorie als auch das Unterscheidungsmerkmal?
  • Ist jeder Abschnitt ein Bild plus eine Zeile von vier bis acht Wörtern, einschließlich des Heroes?
  • Liest sich die Seite wie eine einzige Handlung, wobei jeder Beat zum nächsten führt?
  • Sagt jeder Abschnitt genau eine Sache?
  • Besteht jede Zeile den „ja, das stimmt so sehr“-Test?
  • Erklärt irgendetwas den Mechanismus, anstatt ein Gefühl zu benennen?
  • Gibt es irgendwo einen Absatz? Warum?
  • Trägt das Bild jeden Abschnitt für sich allein, wenn die Wörter entfernt würden?
  • Gibt es eine Handlung, und ist sie offensichtlich?
  • Was hast du gestrichen? Wenn nichts, redet die Seite immer noch als Unternehmen.

Das Gefühl, das du jagen solltest: Der Leser weiß in drei Sekunden, was das ist, fühlt sich beim zweiten Bildschirm verstanden und erreicht den Button mit dem Gedanken „endlich“. Nichts sonst auf der Seite ist wichtig.

Verwandte Skills