Landing Scroll Story

Landing Scroll Story erstellt aus einer Service-URL, einer README oder einem Pitch-Text eine vollständige, lauffähige Next.js-Landingpage. Du beantwortest höchstens drei Fragen und erhältst ein Projekt-ZIP, das du starten und veröffentlichen kannst.

Zwei Vorlagen

Light (SEO zuerst)

• Dunkler Hero mit beweglichen Balken, schwebende Pill-Navigation, Bento-Karten, an den Scroll gepinnte Vitrine, Schritte zur Nutzung und FAQ
• Detail-Guide-Seiten sowie FAQPage- und WebSite-JSON-LD
• Sitemap und robots bleiben geschlossen, bis du deine Produktions-URL setzt (Preview-Deployments werden nie indexiert)

Cinematic (Optik zuerst)

• Choreografie mit GSAP + ScrollTrigger + Lenis
• Der Hero schrumpft zu einem Bento-Raster, Lottie-Intro per Scroll gesteuert, Wert-Karten, Marquee-Vitrine und Vorhang-Footer
• Responsives Layout für Mobilgeräte inklusive

So funktioniert es

1. Gib eine URL, eine README oder eine kurze Beschreibung an.
2. Wähle light oder cinematic. Die Skill empfiehlt eine Variante und erklärt warum.
3. Sie füllt die Texte, setzt deine Markenfarbe per Befehl, baut das Projekt, prüft die Typen und kontrolliert Desktop- und Mobilbreiten.
4. Du erhältst das Projekt-ZIP mit kurzen Hinweisen zum Starten, Ändern der Texte und Veröffentlichen (Vercel, Cloudflare, Search Console).

Beispielergebnis

Die Screenshots unten stammen von einem fiktiven Beispieldienst („Brewly“), der mit dieser Skill erstellt wurde.

Gut zu wissen

• Die Grafiken der Cinematic-Vorlage sind einfache, per Code erzeugte Geometrie. Für ein hochwertiges Ergebnis ersetze die Dateien in public/landing/ durch eigene Grafiken.
• Die Cinematic-Vorlage rendert mehrere Abschnitte erst nach der Hydration, daher fehlt ein Großteil ihres Textes im Server-HTML. Wähle light, wenn das Suchmaschinen-Ranking zählt.
• Geprüft auf dem Desktop und bei 390 px Breite in einer Entwicklungsumgebung. Tests auf echten Geräten und in Safari sind nicht enthalten.
• Die Textqualität hängt von deinem Ausgangsmaterial ab. Die Skill erfindet keine Zahlen, Kunden oder Auszeichnungen.

Lizenzen und Quellenangabe

• Die Cinematic-Vorlage leitet sich vom Landingpage-Code des SEED Design System (github.com/daangn/seed-design) ab, Apache-2.0, Copyright 2025 Danggeun Market Inc. Lizenztext und Hinweise liegen dem gelieferten Projekt bei. Logos, Namen und Medien von SEED oder Daangn sind NICHT enthalten. Dieses Produkt steht in keiner Verbindung zu Daangn und wird weder gesponsert noch empfohlen.
• GSAP wird unter seiner kostenlosen Standardlizenz verwendet. Die Schrift Pretendard steht unter SIL OFL 1.1.