Communitygithub.com

n2g7/agent-skills

Erzeugt hochkonvertierende Next.js/React-Landingpages mit Tailwind CSS. Nutzt PAS-, AIDA- und BAB-Frameworks für optimierte Texte und Komponenten (Hero, Features, Pricing). Fokussiert auf Core Web Vitals/SEO.

Was ist agent-skills?

Dieser Skill generiert aus einer Produktbeschreibung vollständige, konvertierungsoptimierte Next.js/React-Landingpages mit Tailwind CSS. Er kombiniert bewährte Copy-Frameworks (PAS, AIDA, BAB) mit leistungsstarken Designvorlagen und SEO-Best-Practices. Der Skill unterstützt vier Designstile (Dark SaaS, Clean Minimal, Bold Startup, Enterprise) und liefert sofort einsetzbare TSX-Komponenten für Hero-Bereiche, Features, Pricing-Tabellen, FAQ-Akkordeons, Testimonials, CTAs und Footer. Jede generierte Seite wird automatisch gegen eine SEO-Checkliste validiert und auf Core Web Vitals optimiert (LCP < 1s, CLS < 0.1). Das Tool eignet sich ideal für Developer und Agenten, die schnell professionelle Marketing-Seiten ohne manuelles Feintuning benötigen.

Funktioniert mit✓Claude Code~Codex CLI✓Cursor✓Gemini CLI
Part ofDesign & UI
npx skills add https://github.com/n2g7/agent-skills/tree/HEAD/landing-page-generator
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Landingpage-Generator

Generieren Sie hochkonvertierende Landingpages aus einer Produktbeschreibung. Ausgabe vollständiger Next.js/React-Komponenten mit mehreren Abschnittsvarianten, bewährten Copy-Frameworks, SEO-Optimierung und leistungsorientierten Mustern. Kein Lorem Ipsum – echter Text, der konvertiert.

Ziel: LCP < 1s · CLS < 0.1 · FID < 100ms
Ausgabe: TSX-Komponenten + Tailwind-Styles + SEO-Meta + Textvarianten

Wann verwenden

  • Sie müssen eine Marketing-Landingpage in Next.js oder React generieren.
  • Die Aufgabe umfasst konvertierungsorientierte Seitenstruktur, Abschnittsvarianten, Tailwind-Styling oder SEO-bewussten Text.
  • Sie möchten aus einer Produktbeschreibung eine vollständige Landingpage erhalten, statt isolierter UI-Fragmente.

Kernfunktionen

  • 5 Hero-Abschnittsvarianten (zentriert, geteilt, Verlaufs-Hintergrund, Video-Hintergrund, minimal)
  • Feature-Abschnitte (Raster, abwechselnd, Karten mit Symbolen)
  • Preistabellen (2–4 Stufen mit Feature-Listen und Umschalter)
  • FAQ-Akkordeon mit Schema-Markup
  • Testimonials (Raster, Karussell, Einzelzitat)
  • CTA-Abschnitte (Banner, Vollseite, inline)
  • Footer (einfach, Mega, minimal)
  • 4 Designstile mit Tailwind-Klassensätzen

Generierungs-Workflow

Befolgen Sie diese Schritte in der angegebenen Reihenfolge für jede Landingpage-Anfrage:

  1. Eingaben sammeln — Produktname, Slogan, Zielgruppe, Schmerzpunkt, Hauptnutzen, Preisebenen, Designstil und Copy-Framework mit dem untenstehenden Trigger-Format erfragen. Fehlende Felder nachfragen.
  2. Markenstimme analysieren (empfohlen) — Falls vorhandene Markeninhalte (Website-Texte, Blogbeiträge, Marketingmaterial) vorliegen, über marketing-skill/content-production/scripts/brand_voice_analyzer.py ein Stimmprofil (Formalitätsgrad, Ton, Perspektive) erstellen. Dieses Profil zur Auswahl von Designstil und Copy-Framework nutzen:
    • formell + professionell → Enterprise-Stil, AIDA-Framework
    • lässig + freundlich → Bold-Startup-Stil, BAB-Framework
    • professionell + autoritär → Dark-SaaS-Stil, PAS-Framework
    • lässig + gesprächig → Clean-Minimal-Stil, BAB-Framework
  3. Designstil auswählen — Die Wahl des Nutzers (oder aus der Markenstimmenanalyse abgeleitet) einem der vier Tailwind-Klassensätze aus der Designstil-Referenz zuordnen.
  4. Copy-Framework anwenden — Alle Überschriften- und Fließtexte mit dem gewählten Framework (PAS / AIDA / BAB) schreiben, bevor Komponenten generiert werden. Stimmprofil in Formalität und Ton durchgängig beachten.
  5. Abschnitte in Reihenfolge generieren — Hero → Features → Pricing → FAQ → Testimonials → CTA → Footer. Nicht relevante Abschnitte überspringen.
  6. Gegen SEO-Checkliste validieren — Vor der endgültigen Code-Ausgabe jeden Punkt der SEO-Checkliste durchgehen. Lücken inline beheben.
  7. Endgültige Komponenten ausgeben — Vollständige, kopierfertige TSX-Dateien mit allen Tailwind-Klassen, SEO-Meta und strukturierten Daten liefern.

Skill auslösen

Produkt: [Name]
Slogan: [Ein-Satz-Wertversprechen]
Zielgruppe: [wer sie sind]
Hauptschmerzpunkt: [welches Problem Sie lösen]
Hauptnutzen: [primäres Ergebnis]
Preisebenen: [kostenlos/pro/enterprise oder Beschreibung]
Designstil: dark-saas | clean-minimal | bold-startup | enterprise
Copy-Framework: PAS | AIDA | BAB

Designstil-Referenz

StilHintergrundAkzentKartenCTA-Button
Dark SaaSbg-gray-950 text-whiteviolet-500/400bg-gray-900 border border-gray-800bg-violet-600 hover:bg-violet-500
Clean Minimalbg-white text-gray-900blue-600bg-gray-50 border border-gray-200 rounded-2xlbg-blue-600 hover:bg-blue-700
Bold Startupbg-white text-gray-900orange-500shadow-xl rounded-3xlbg-orange-500 hover:bg-orange-600 text-white
Enterprisebg-slate-50 text-slate-900slate-700bg-white border border-slate-200 shadow-smbg-slate-900 hover:bg-slate-800 text-white

Bold Startup-Überschriften: Allen <h1>/<h2>-Elementen font-black tracking-tight hinzufügen.

Copy-Frameworks

PAS (Problem → Agitieren → Lösung)

  • H1: Schmerzhafter Zustand, in dem sie sich befinden
  • Untertitel: Was passiert, wenn sie es nicht beheben
  • CTA: Was Sie anbieten
  • Beispiel — H1: „Ihr Team verschwendet 3 Stunden pro Tag mit manuellen Berichten

Individual skills in this repo

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

n2g7/agent-skills

Expert in launching small, focused SaaS products fast - the indie hacker approach to building profitable software. Covers idea validation, MVP development, pricing, launch strategies, and growing to sustainable revenue. Ship in weeks, not months.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community