Landing Page Fast

Was macht Landing Page Fast?

Meinungsstarke Landing-Page-Produktion. Entscheidungen für dich getroffen. Ausgabe: eine funktionierende, bereitgestellte, markengerechte Seite in 4-8 Stunden, nicht in Wochen.

Dieses Skill integriert die frontend-quality-Regeln (a11y, Core Web Vitals, Mobile-First) und web-security-baseline-Header – du musst während des Bauens nicht darüber nachdenken.

Stack (Standard – weiche ohne Grund nicht ab)

• Astro + Tailwind + shadcn/ui-artige Komponenten + Vercel.
• TypeScript Strict Mode.
• astro:assets für Bildoptimierung.
• astro:transitions bei mehrseitigen Seiten (minimal halten – einseitig ist schneller bereitgestellt).

Wann abweichen:

• Auth-Gates / dynamische, benutzerspezifische Inhalte, die sich zur vollwertigen App entwickeln → Next.js 15 App Router statt Astro verwenden.
• Operator hat bereits SvelteKit für das Projekt standardisiert → das verwenden.

NICHT verwenden: WordPress, Wix, rohes HTML+JS ohne Framework, Vanilla CSS ohne Tailwind. Langsamer bereitzustellen, schwieriger weiterzuentwickeln.

Abschnittsstruktur (bewährt für B2B/SaaS-technisches Publikum)

In dieser Reihenfolge. Nichts ohne expliziten Grund überspringen:

1. Hero – Überschrift + Unterüberschrift + primärer CTA + visuelles Element
2. Sozialer Beweis – Logos, Statistik-Banner, Testimonial (nur, wenn echt)
3. Problem – Was am Status Quo kaputt ist (HIER verdienst du Glaubwürdigkeit)
4. Lösung – Wie es das Problem behebt (max. 3 Features)
5. So funktioniert's – 3-4 Schritte mit Diagramm oder Screenshots
6. Anwendungsfälle – 2-3 Personas, nicht mehr
7. Preise – Preise zeigen, es sei denn, es geht wirklich nicht
8. FAQ – 5-8 echte Fragen, echte Antworten
9. Finaler CTA – Wert wiederholen, Aktion erneut auffordern
10. Footer – Rechtliches, Social, Kontakt

„Über uns / Team“ überspringen, es sei denn, die Glaubwürdigkeit des Gründers verkauft das Produkt (die meisten B2B-Infra-Produkte: überspringen; gründergeführte Konsumprodukte: einfügen).

Helden-Anatomie

[Überschrift: 6-10 Wörter, Wertversprechen]
[Unterüberschrift: 15-25 Wörter, wer/was/warum]
[Primärer CTA] [Sekundärer CTA – „Sieh dir an, wie es funktioniert“]
[Visuelles Element: Screenshot, Diagramm oder 30-Sekunden-Demo-Loop]

Regeln für Überschriften:

• Ein Ergebnis versprechen, kein Feature.
• Spezifisch statt abstrakt.
• Primäres Keyword für SEO + Qualifikation einbeziehen.

Beispiele:

• ❌ „Leistungsstarke Infrastruktur für moderne Apps“
• ✅ „Solana RPC-Infrastruktur mit sub-50ms p99“
• ❌ „Transparente Plattform für öffentliche Ausschreibungen“
• ✅ „An öffentlichen Ausschreibungen in 10 Minuten teilnehmen“

Projektspezifische Standardeinstellungen

[Projekt A] Landing Page

• Primärer lokalisierter Markt, Englisch unter /en, wenn eine zweite Sprache benötigt wird.
• Hero: Dashboard-Screenshot mit einem hervorgehobenen Ausschreibungs-Card.
• Vertrauenssignale: relevante Compliance-Badges, Prüflogo, ggf. regulatorische Zertifizierungen.
• Farbe: Primärfarbe der Marke + neutrales Creme + dezente Akzentfarbe.
• Mobile-First ist harte Anforderung: Die meisten Nutzer sind auf dem Handy.
• Formularerfassung: WhatsApp + E-Mail (WhatsApp ist in AR für KMU riesig).

[Projekt B] Landing Page

• Primärer lokalisierter Markt, Englisch unter /en, wenn eine zweite Sprache benötigt wird.
• Vertrauen, Vertrauen, Vertrauen. Compliance-Badges, Verschlüsselungsvisualisierung, Patienten-Kontroll-Botschaften.
• Fotografischer Stil: warm, menschlich, NICHT technisch/kalt.
• Farbe: wärmere Palette als [Projekt A] (Terrakotta, Salbei, Creme).
• Formulare minimal – nur E-Mail + „Ich bin [Patient | Arzt | Klinik]“-Auswahl.
• Datenschutzerklärung prominent (Verweise auf geltende lokale Patientenrechte- und Datenschutzgesetze).

[Unternehmen] Produktseite

• Englisch zuerst, keine Lokalisierung.
• Code-lastig. Live-Snippets zum Kopieren und Einfügen.
• Leistungszahlen überall („p99 < 50ms“, „100k TPS“), mit Link zur Benchmark-Methodik.
• CTA zur kostenlosen Testversion.
• Farbe: [Unternehmen]-Farbpalette aus den brand-creation-Ergebnissen.

Stündlicher Zeitplan

Stunde 1: Einrichtung

pnpm create astro@latest <projekt> -- --template basics --typescript strict
cd <projekt>
pnpm add @astrojs/tailwind @astrojs/sitemap @astrojs/vercel
pnpm dlx astro add tailwind sitemap vercel
pnpm add -D @astrojs/check

Vercel-Projekt initialisieren (CLI erkennt Astro automatisch):

pnpm dlx vercel link
pnpm dlx vercel deploy --prod  # Basis-Bereitstellung ohne Inhalt, validiert die Pipeline

Stunde 2-3: Text + Struktur

• Text ZUERST in Markdown schreiben (in docs/landing-copy.md).
• Nicht designen, bis der Text fertig ist.
• Abschnitt für Abschnitt. Ansichtsfenster während des Bauens auf mobile Größe stellen.

Stunde 4: Visuelle Verfeinerung

• Hero-Visual über nanobanana-Skill ODER echten Screenshot.
• Abschnittsillustrationen einheitlich (ein Stil – nicht mischen).
• Tailwind-Abstands-Skala strikt einhalten (keine willkürlichen Werte).

Stunde 5: Formulare + Analytics

• Formular geht an Resend (Transaktions-E-Mail) ODER Supabase (Wartelisten-DB) über Vercel Edge Function.
• Plausible-Skript (selbst gehostet auf Walter-VM oder Cloud €9/Monat).
• Vollständigen Flow testen: Formular → E-Mail-Bestätigung → DB-Eintrag.

Stunde 6: SEO + Header

• Meta-Tags (Titel, Beschreibung, og:, twitter:) pro Seite.
• Kanonische URL.
• JSON-LD strukturierte Daten (Organization oder Product).
• Robots.txt + sitemap.xml (Astro-Plugin generiert automatisch).
• Sicherheitsheader (in vercel.json oder Middleware):

  {
    "headers": [{
      "source": "/(.*)",
      "headers": [
        { "key": "Strict-Transport-Security",
          "value": "max-age=31536000; includeSubDomains; preload" },
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
        { "key": "Permissions-Policy",
          "value": "camera=(), microphone=(), geolocation=()" },
        { "key": "Content-Security-Policy",
          "value": "default-src 'self'; img-src 'self' data: https:; style-src 'self' 'unsafe-inline'; script-src 'self' https://plausible.io" }
      ]
    }]
  }
  

Stunde 7: Performance-Durchgang

• Lighthouse-Lauf. ALLE VIER Bewertungen ≥ 95.
• Bildgrößen korrekt (Next-Gen-Formate, an Viewport angepasst).
• Bundle < 150 KB gzipped initial.
• LCP-Element vorab geladen.

Stunde 8: Deployment + Verifikation

• Benutzerdefinierte Domain über Vercel (Cloudflare DNS auf Vercel gerichtet).
• Produktions-Deployment.
• Auf echtem Handy testen.
• Bei Google Search Console einreichen.
• Erstes Analytics-Event eingetroffen.

Performance-Budget (HART)

Metrik	Budget	Tooling
Lighthouse Performance	≥ 95	CI
Lighthouse Accessibility	≥ 95	CI
Lighthouse Best Practices	≥ 95	CI
Lighthouse SEO	≥ 95	CI
LCP bei 3G	< 2,5 s	WebPageTest
INP p75	< 200 ms	RUM (Plausible falls aktiviert, oder web-vitals lib)
CLS	< 0,1	RUM
Initial JS gzipped	< 150 KB	bundlewatch
Time to First Byte	< 200 ms	Vercel Edge

Falls eine Metrik fehlschlägt: Vor dem Launch beheben. Marketingseiten mit schlechten Metriken senken die Conversion sofort.

Textregeln

Für technisches Produkt ([Unternehmen]):

• Mit dem Substantiv führen, nach dem der Kunde sucht („Solana RPC“).
• Früh mit Statistiken beginnen – einen Grund zum Glauben in den ersten 5 Sekunden geben.
• Zeigen > Erzählen: Code-Snippet, Screenshot, echte Zahlen.
• Ein CTA, wiederholt.

Für Consumer / lokalisierte Märkte ([Projekt A], [Projekt B]):

• Einfache Wörter, kurze Sätze.
• Mit der Frage führen, die sich der Benutzer selbst stellt.
• Vertrauenssignale (Compliance, Sicherheits-Badges) sichtbarer.
• Mehrere CTAs OK (Anmelden, Mehr erfahren, Kontakt).

Formularerfassung

// Vercel Edge Function: /api/signup.ts
export const config = { runtime: 'edge' }

export default async function handler(req: Request) {
  if (req.method !== 'POST') return new Response('Method Not Allowed', { status: 405 })

  const { email, source } = await req.json()

  // Rate Limit nach IP über Vercel KV / Upstash
  // E-Mail mit zod validieren
  // In Supabase-Wartelisten-Tabelle einfügen (RLS-geschützt)
  // Bestätigungs-E-Mail über Resend auslösen
  // 200 oder spezifischen Fehler zurückgeben

  return Response.json({ ok: true })
}

NIE:

• Dem Client vertrauen, den Übermittlungsstatus zu „merken“.
• Serverseitige Validierung überspringen.
• Rate-Limiting vergessen (ein Benutzer, ein Bot, ein DDoS – derselbe Bug).

Analytics-Standardeinstellungen

Plausible (selbst gehostet auf Walter-VM oder in der Cloud):

<script defer data-domain="[projekt-a].com.ar" src="https://plausible.<domain>/js/script.js"></script>

Verfolgen:

• Seitenaufrufe (Standard)
• Ausgehende Klicks (data-domain="..." data-track-outbound="true")
• Formularübermittlungen (benutzerdefiniertes Event)
• Scrolltiefe auf langen Seiten (benutzerdefiniertes Event, entprellt)

NICHT:

• Google Analytics hinzufügen. Schwer, datenschutzfeindlich, EU-AAR mehrdeutig.
• Session-Replay-Tools hinzufügen. Besonders nicht für [Projekt B] (PHI-Risiko).
• Heatmaps hinzufügen. Schwer + gruselig.

Anti-Patterns (das nicht tun)

• Karussell-Hero – niemand klickt über Slide 1 hinaus.
• Zu viele CTAs – „Anmelden“ + „Mehr erfahren“ + „Demo ansehen“ + „Blog lesen“ im Hero = Entscheidungslähmung.
• Stockfotos von vielfältig lächelnden Menschen in Büros – sofortiges „Generisches SaaS“-Signal.
• Laufband von 50 winzigen Konkurrenzlogos – 4-6 lesbare auswählen.
• Feature-Wand – 3 oder 6 auswählen, nicht 27.
• Automatisch abspielendes Video mit Ton – sofortiger Absprung.
• Modal-Popup vor dem Laden der Seite – sofortiger Absprung.
• Cookie-Banner, das die Seite blockiert – in der EU illegal, überall nervig. Minimale, nicht blockierende Benachrichtigung verwenden.

Wann A/B-Testen

Nicht, bis du 1.000+ Besucher pro Woche hast. Darunter dominiert das Rauschen.

Wenn bereit:

• EIN Element nach dem anderen testen (Überschrift, Hero-Visual, CTA-Text).
• Vercel A/B-Testing oder Plausible's Split-Test verwenden.
• Statistische Signifikanz abwarten, bevor ein Gewinner erklärt wird.

Harte Regeln

• Das 8-Stunden-Budget ist hart. Wenn du in Stunde 6 noch am Designen bist, die Arbeit von Stunde 7 ausliefern und die Verfeinerung der Stunde 8 überspringen. Besser unvollkommen live als perfekt in deinem Repository.
• Jedes externe Skript geprüft. Kein „nebenbei fügen wir Hotjar / FullStory / Drift hinzu“. Jedes Skript verlangsamt die Seite und erhöht das Datenschutzrisiko.
• Keine Produktionsänderungen ohne genehmigtes Preview-Deployment.
• Lighthouse-Fehler = Launch blockiert.

Integration

• nanobanana für die Generierung von Hero / Illustrationen.
• brand-creation-Ergebnisse für Palette, Typografie, Stimme.
• frontend-quality-Regeln integriert (a11y + Perf).
• web-security-baseline-Header integriert.
• seo-keyword-research (aufgeschobenes Backlog) informiert Text und Meta.
• pr-review-Skill für die abschließende Überprüfung vor dem Merge.

Was dieses Skill NICHT tut

• Mehrseitige Apps mit Auth, Dashboards usw. → mit Next.js beginnen.
• Blog-Einrichtung. Astro Starlight oder ein Mintlify-artiges Docs-Framework verwenden.
• E-Mail-Marketing-Automation. ConvertKit / Beehiiv verwenden.
• Kundensupport-Chat. Falls nötig, Crisp verwenden (argentinische Option, mehrsprachig).