Communitygithub.com

Landing-Page

Schreibe und erstelle eine Landing-Page, die die Nachfrage nach einem Angebot testet: ein Besucher, ein Versprechen, echte Beweise, ein Call-to-Action, eine barrierefreie HTML-Datei und die Zahlen nach dem Start (Besucher, Anmeldungen, Konversion nach Quelle).

Was ist Landing-Page?

Diese Fähigkeit erstellt eine Landing-Page, die als erstes echtes Experiment für ein Startup dient: Wenn Fremde nicht einmal eine E-Mail-Adresse hinterlassen, werden sie wahrscheinlich nicht bezahlen. Die Seite wird als einzelne HTML-Datei gebaut, die barrierefrei, mobilfreundlich und auf einen einzigen Call-to-Action ausgerichtet ist. Sie unterstützt verschiedene Anwendungsfälle wie das Testen der Nachfrage vor der Entwicklung (Smoke-Test), das Sammeln einer Warteliste oder die Annahme von Vorbestellungen. Der Prozess umfasst die Erstellung eines klaren Kopfs mit einer ergebnisorientierten Überschrift, die Darstellung des Problems in den Worten der Kunden, die Beschreibung der Funktionsweise in drei Schritten, echte Beweise, die Beantwortung von Haupteinwänden und einen kurzen FAQ-Bereich. Die Fähigkeit erfordert vor dem Start einen Verkehrsplan und Erfolgskriterien, und die Ergebnisse werden nach Besuchern, Konversion nach Quelle und Benutzerfragen ausgewertet.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/teodstr/garage/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

A landing page is often the first real experiment of a startup: if strangers will not leave an email, they are unlikely to pay. This skill writes the page, builds it as a single HTML file, and sets the numbers that decide what happens next.

When to use

  • To test demand before building (a smoke test), to collect a waitlist, or to take pre-orders.
  • After brand-identity if a name and colors exist, but a plain page works too.
  • Not for a full website or a search engine strategy.

Inputs

  1. Target visitor, problem, promise and any real proof (quotes, numbers, logos with permission).
  2. The one action wanted: an email, a pre-order, a demo request.
  3. Brand elements if they exist, and where the form data should go.

Method

  1. One page, one visitor, one action. Choose the target visitor and the single call to action; remove links that lead away from it.
  2. Write the top of the page first: a headline that states the result for the visitor (not the technology), a line that says how, the call to action, and an image of the product or of the result. Test: a stranger understands what it is and who it is for in five seconds.
  3. Then the rest: the problem in the customers' own words (from customer-interviews), how it works in three steps, real proof, answers to the main objections (price, trust, time), a short FAQ, and the call to action again.
  4. Stay honest: if the product does not exist yet, say "join the waitlist" or "pre-order, delivery planned for…". Never invent testimonials, counters or scarcity. For pre-orders, state the delivery date and the refund terms.
  5. Build it as one HTML file: semantic headings, alternative text on images, readable contrast, works on a phone. The form posts to a service the founder chooses (a form tool, a newsletter tool or a spreadsheet), and a short privacy notice says how the emails will be used (GDPR in the European Union).
  6. Plan the test: where the visitors will come from (it matters as much as the page), how many, the target conversion decided in advance, and the duration. Test two headlines at most.
  7. Read the results: visitors and conversion by source, questions people asked, and the decision against the criteria set before launch.

Output

### Page plan
Visitor: … | Promise: … | Call to action: … | Success if …% of … visitors from … within … days

### Copy
Headline: … | Line under it: … | Button: …
Sections: problem, how it works, proof, objections, FAQ

### HTML
<one accessible file, form address to configure, privacy notice included>

Quality bar

  • The headline states a result for a specific visitor, and the page has one main call to action.
  • Every claim, testimonial and number on the page is real; nothing fakes scarcity or social proof.
  • The page is accessible, works on a phone, and explains how collected data is used.
  • The traffic plan and the success criterion are written before launch.
  • Written in the user's language, with the terms below.

Terminology

EnglishFrançaisEspañol
Landing pagePage d'atterrissage (landing page)Página de aterrizaje (landing page)
Call to action (CTA)Appel à l'actionLlamada a la acción
Above the foldHaut de page, partie visible sans défilerPrimera pantalla
Conversion rateTaux de conversionTasa de conversión
WaitlistListe d'attenteLista de espera
A/B testTest A/BPrueba A/B

Sources

  • Krug, S. (2014). Don't Make Me Think, Revisited (3rd ed.). New Riders.
  • Ries, E. (2011). The Lean Startup. Crown Business.
  • W3C. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/

Individual skills in this repo

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

Verwandte Skills