Was macht Referenzgestützter Premium-Landing-Page-Builder?
Koreanischer Ausgabestil: für koreanischen, benutzerorientierten Text (HITL-Fragen, Statusberichte, Antworten) gilt
$CLAUDE_PLUGIN_ROOT/docs/development/korean-style.md— §"HITL 질문 작성 규칙" und §"답변·보고 원칙". Koreanische Dateien, die auf die Festplatte geschrieben werden, werden automatisch vom korean-style PostToolUse-Hook auf Stil geprüft.
Erzeugt eine produktionsreife, eigenständige Landing Page, indem drei Praktiken kombiniert werden, die professionelle Arbeit von generischem KI-Output unterscheiden:
- Visuelle Referenzen zuerst – echte Animations-/Layout-Referenzen werden mit einem echten Browser von Pinterest (und verwandten Gallerien) gesammelt, bevor Designentscheidungen getroffen werden, und dann in ein referenzverankertes Design-Briefing destilliert (niemals kopiert).
- KI-Video als Designmaterial – der Hero-Hintergrund ist ein nahtloses Schleifenvideo, generiert mit Google Veo 3.1, das mit den Design-Tokens art-direktiert, für das Web nachbearbeitet und über ein Endlosschleifen-Skript abgespielt wird, das die Schleifennaht verbirgt.
- Konvergenz, nicht One-Shot – die fertige Seite durchläuft den adversen
screen-quality-loop, bevor sie als abgeschlossen gemeldet wird.
Kernprinzipien:
- Referenzverankert, niemals referenzkopiert – Referenzen liefern Muster (Layout-Archetyp, Bewegungsvokabular, Palettenrichtung); kein spezifisches Design wird reproduziert und kein Drittanbieter-Asset wird im Deliverable ausgeliefert.
- DESIGN.md ist Gesetz – wenn
docs/design-system/DESIGN.mdexistiert, überschreiben seine Tokens undaesthetic_rulesdie in Schritt 0 abgeleiteten Ton-Standardwerte. - Graceful Degradation bei jeder externen Abhängigkeit – kein Pinterest-Zugriff, keine Veo-Tools, kein ffmpeg und kein Browser sind überlebbar; jeder Fallback wird im Abschlussbericht genannt, niemals stillschweigend ersetzt.
- Kostendisziplin – das Standard-Generierungsbudget beträgt genau 1 Standbild + 1 Veo-Clip (8 s,
veo-3.1-lite); alles weitere erfordert eine explizite Benutzeranfrage (die begrenzte einmalige Seam-QA-Neugenerierung inreferences/veo-loop-video.md§6 ist Teil des Standardbudgets, keine Überschreitung). - Bewegungszugänglichkeit ist nicht verhandelbar –
prefers-reduced-motion-Fallback, eine sichtbare Pause-Steuerung (WCAG 2.2.2) und eine Poster-first-LCP-Strategie sind Pflicht, keine Option.
Ausgabeverzeichnis: landing/{slug}/ (Deliverable) + landing/{slug}/.work/ (Rohclips, Standbilder, QA-Nachweise – niemals von der Seite referenziert).
🌐 SPRACHREGEL: Bevor Sie dieses Skill ausführen, lesen Sie die
CLAUDE.mddes Projekts und prüfen Sie den Abschnitt## Language, um die Projektsprache zu erkennen. Wenn die Projektsprache NICHT Koreanisch (ko) ist, übersetzen Sie ALLE benutzerorientierten Seitenkopien und Berichtsausgaben in die Projektsprache. Technische Bezeichner (Dateipfade, CSS-Variablen, Klassennamen) bleiben unübersetzt. Wenn keineCLAUDE.mdoder kein Abschnitt## Languageexistiert, wird standardmäßig Koreanisch verwendet.
Ausführungsprozedur
Schritt 0: Aufnahme & Design-Ton
A. Argument-Parsing
| Argument | Aktion |
|---|---|
Text-Briefing (z.B. KI-Buchhaltungs-SaaS für Freelancer) | Als Produkt-/Marken-Briefing verwenden |
| URL | WebFetch der Seite – Produkt, Zielgruppe, vorhandene Marken-Hinweise extrahieren |
docs/planner/{NNN}-*/-Pfad | Planner-Deliverables (Personas, KPIs, Screendesigns) als Briefing lesen |
--refs=<verzeichnis> | Die eigenen Referenzbilder des Benutzers aus <verzeichnis> verwenden; Schritt 1-Erfassung überspringen (Analyse läuft trotzdem) |
--slug=<name> | Deliverable-Verzeichnisname; andernfalls Kebab-Case aus Marke/Funktion ableiten |
--no-video | Veo vollständig überspringen – Hero verwendet den CSS-animierten Fallback (Pfad C) |
--auto | Null HITL – mit angegebenen Annahmen fortfahren (für Pipeline-Nutzung) |
| (leer) | docs/planner/ nach dem neuesten Paket durchsuchen; wenn keins vorhanden, nach einem einzeiligen Briefing fragen |
B. Mehrdeutigkeitsprüfung (Think Before Coding – max. 1 HITL)
Wenn das Briefing nicht (1) Zielgruppe und (2) die einzelne primäre Conversion-Aktion (Anmeldung / Kauf / Kontakt / Download) festlegt, einmal mit Interpretationsoptionen fragen. Unter --auto die wahrscheinlichste Interpretation wählen und unter „Annahmen" im Abschlussbericht festhalten. Niemals mehr als eine Aufnahmefrage stellen.
C. Design-SSoT-Laden
docs/design-system/DESIGN.mdexistiert → Tokens +aesthetic_rulesladen; die folgende Tabelle füllt nur Lücken.- Andernfalls → den Design-Ton aus dem Briefing ableiten:
| Marken-/Produktsignal | Design-Ton | Hero-Bewegungsrichtung |
|---|---|---|
| SaaS / Entwickler-Tools / KI-Produkt | Dark Gradient Tech | langsame Aurora-/Gradienten-Drift, spärliches Partikelfeld |
| Luxus / Premium-Güter | Editorial Luxury | Makro-Material-Drift (Seide, flüssiges Metall), geringe Schärfentiefe |
| Consumer App / Lifestyle / Wellness | Soft Ambient | weichgezeichnete Szene, driftende Lichtlecks, sanfte Parallaxe |
| Finanzen / B2B / Unternehmen | Confident Minimal | abstrakte Geometrie, langsame Linien- & Netz-Bewegung, zurückhaltende Palette |
| Kreativstudio / Veranstaltung / Portfolio | Bold Kinetic | kontrastreiche Formen, ausladende Farbfelder |
- Die beiden UX-Leitfäden laden – sie regieren alle ästhetischen und Bewegungsentscheidungen in den Schritten 2–4:
$CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-design-guide.md(§4 Prompting-Techniken, §4.1 Anti-KI-Ästhetik, §4.2 referenzverankerte Prompts)$CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-animation-guide.md(§15 Bewegungszugänglichkeit, §18 KI-generierte Video-Hintergründe)
D. Main-Worktree-Guard & dev-Sync
Landing Pages sind Deliverables der Planungsphase – im Haupt-Worktree auf dev ausführen, wie die anderen dev-sync-Skills:
PLUGIN_ROOT="${CLAUDE_PLUGIN_ROOT:-$(find ~/.claude/plugins/cache -maxdepth 3 -type d -path '*/astra-methodology/*' 2>/dev/null | sort -V | tail -1)}"
if [ -z "$PLUGIN_ROOT" ] || [ ! -f "$PLUGIN_ROOT/scripts/worktree-helpers.sh" ]; then
echo "ERROR: CLAUDE_PLUGIN_ROOT nicht gefunden. Überprüfen Sie den Plugin-Cache-Pfad." >&2; exit 1
fi
source "$PLUGIN_ROOT/scripts/worktree-helpers.sh"
astra_ensure_main_worktree || exit 1
Dann dev genau wie im /catalog-generator Schritt 0.G synchronisieren (Branch prüfen → bei Änderungen stashen → git fetch origin dev && git checkout dev && git pull origin dev → Stash holen; auf main/master zurückfallen, wenn dev nicht vorhanden ist).
Schritt 1: Referenzerfassung (Pinterest)
6–12 Animations-/Layout-Referenzen sammeln, bevor etwas gestaltet wird. Vollständige Prozedur, Query-Rezepte, Popup-Handhabung und die Board-Vorlage: $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/reference-collection.md LESEN, BEVOR Sie mit diesem Schritt beginnen.
A. Browser-Backend auflösen
Gemäß der Plugin-weiten Reihenfolge (ego default → Chrome MCP Fallback; SSoT: $CLAUDE_PLUGIN_ROOT/docs/development/browser-backend-policy.md):
command -v ego-browser >/dev/null 2>&1 && echo ego || echo ""
Leere Ausgabe → chrome-mcp, wenn mcp__chrome-devtools__*-Tools vorhanden sind. Keines verfügbar → Erfassungs-Fallback: WebSearch nach aktuellen Landing-Page-/Animations-Showcase-Beschreibungen (Award-Gallerien, Motion-Showcases) und ein reines Text-Referenzboard erstellen; „Referenzboard: suchbasiert (kein Browser)" im Abschlussbericht angeben.
B. Suche & Erfassung
- 4–5 Pinterest-Suchanfragen aus
{Ton} + {Branche} + Mediumerstellen (Rezepte in der Referenzdatei). - Pro Anfrage:
https://www.pinterest.com/search/pins/?q={query}öffnen, Overlay-Modals schließen,window.scrollTo(0, 0)(Ego-Blank-Frame-Guard), das Ergebnisraster erfassen, dann die Top 1–2 Pins öffnen und ihre Detailansichten erfassen. - Ego-Modus: ein Heredoc = eine Runde, und eine Erfassung benötigt drei oder mehr Runden (navigieren → Bereitschaftsprüfung → sweep+capture; niemals in eine zusammendrängen, sonst wird die Erfassung leer – siehe die Referenzdatei); Task Space
astra landing {slug};captureScreenshotmit absoluten Pfaden; mitcompleteTaskSpace('astra landing {slug}', { keep: false })schließen, wenn fertig. - Erfassungen in
landing/{slug}/design/references/ref-{NN}.pngspeichern. Pinterest nicht erreichbar (Login-Wand bleibt bestehen / Netzwerkblock) → dieselben Anfragen auf den in der Referenzdatei aufgeführten verwandten Gallerien wiederholen; immer noch nichts → Erfassungs-Fallback aus Schritt 1.A.
C. Vision-Analyse → Referenzboard
Für jede Erfassung einen strukturierten Datensatz extrahieren (Analyse-Prompt in der Referenzdatei): Layout-Archetyp, Hero-Behandlung, Bewegungsvokabular (was bewegt sich, wie langsam, welches Easing), Palettenrichtung, Typografie-Charakter, Dichte, ein markantes Detail, das adaptiert werden sollte. mcp__fect-mcp__vision_analyze verwenden, wenn verfügbar; andernfalls jedes PNG direkt lesen (multimodales Lesen).
landing/{slug}/design/reference-board.md schreiben – bildbezogene Datensätze + ein Syntheseabschnitt („worin diese Referenzen übereinstimmen"). Mit [ -f ] überprüfen, bevor das Board als existierend behauptet wird.
Originalitäts-Guard: Das Board hält Muster fest, niemals Anweisungen, einen bestimmten Pin zu reproduzieren. Referenzerfassungen bleiben in design/references/ als internes Arbeitsmaterial – sie werden nie von index.html verlinkt und nie als Seiten-Assets ausgeliefert.
Schritt 2: Design-Richtungs-Synthese
Das Referenzboard + Design-Ton + DESIGN.md in ein verbindliches Design-Briefing unter landing/{slug}/design/direction.md destillieren, das genau diese Entscheidungen enthält:
- Layout-Archetyp – z.B. Vollbild-Video-Hero + wechselnde Feature-Bänder + abschließender CTA.
- Bewegungsvokabular – die seitenweiten Bewegungsregeln (Dauern, Easings, Scroll-Reveal-Stil) aus dem Referenzboard abgeleitet und auf Techniken aus
vibe-coding-animation-guide.mdabgebildet. - Hero-Medienplan – Entscheidung für Pfad A/B/C (Tabelle Schritt 3), plus das Subjekt, die Stimmung und das Kameraverhalten des Videos.
- Palette + Typografie – aus DESIGN.md-Tokens, wenn vorhanden; andernfalls aus Ton + Referenzen abgeleitet (OKLCH-Werte, eine Display- + eine Body-Schriftfamilie).
- Anti-KI distinctive Elemente – mindestens 2 konkrete, unverwechselbare Entscheidungen (gemäß Design-Guide §4.1 / DESIGN.md
aesthetic_rules): z.B. asymmetrisches Raster, editorial Serif-Paar, Korn-/Rausch-Textur, benutzerdefinierter Scroll-Indikator, überdimensionierte Zahlen. Generische zentrierte-Helden + drei-Karten + lila-Gradient-Ausgabe ist ein Fehler, keine Basislinie.
HITL (unter --auto überspringen): die 5 Entscheidungen als kompakte Zusammenfassung präsentieren und eine einzelne Bestätigungs-/Anpassungsfrage stellen. Dies ist das letzte Entscheidungs-Tor – alles danach läuft unbeaufsichtigt.
Schritt 3: Hero-Schleifenvideo-Produktion (Veo 3.1)
$CLAUDE_PLUGIN_ROOT/skills/landing-page/references/veo-loop-video.md VOR diesem Schritt lesen – es enthält die Prompt-Rezepte, Tool-Call-Vorlagen und alle ffmpeg-Befehle.
A. Pfadentscheidung
| Bedingung | Pfad |
|---|---|
mcp__fect-mcp__veo_* vorhanden und mcp__fect-image__nanobanana_text2img vorhanden | A – Bookend-Schleife (Standard) |
mcp__fect-mcp__veo_* vorhanden, fect-image nicht vorhanden | B – text2video + Überblendungsschleife |
Veo-Tools nicht vorhanden, oder --no-video | C – CSS-animierter Hero (kein Video; Vorlage in references/video-integration.md) |
Die Tool-Präsenz wird aus den in der Sitzung verfügbaren Tools ermittelt (der fect-mcp-Server ist auf Benutzerebene und nicht gebündelt – Abwesenheit ist normal, kein Fehler). Den gewählten Pfad aufzeichnen; der Abschlussbericht muss diesen angeben und für B/C, warum.
B. Pfad A – Bookend-Schleife (erster Frame == letzter Frame)
Der nahtlose Schleifentrick: ein art-direktiertes Standbild generieren, dann Veo veranlassen, es von diesem Frame zurück zu diesem Frame zu animieren – veo_img2video mit lastImagePath, das auf die gleiche Datei wie sourceImagePath gesetzt ist. Der erste und letzte Frame des Clips sind pixelidentisch, sodass er ohne sichtbare Naht läuft, und das Standbild fungiert gleichzeitig als LCP-Poster.
- Standbild:
mcp__fect-image__nanobanana_text2img→landing/{slug}/.work/hero-frame.png– 16:9, Token-angepasste Palette, ruhiger negativer Raum, wo die Überschrift sitzen wird, kein Text, keine Logos, keine Gesichter (Prompt-Vorlage pro Ton in der Referenzdatei). - Clip:
mcp__fect-mcp__veo_img2video–sourceImagePath=lastImagePath=hero-frame.png,durationSeconds: 8,resolution: "1080p"(1080p erfordert 8 s),aspectRatio: "16:9", Standardmodell (veo-3.1-lite– auffast/voll nur erhöhen, wenn der lite-Output die Seam-QA zweimal nicht besteht). Prompt = zyklische Umgebungsbewegung, die sichtbar zu ihrem Start zurückkehrt (Rezepte pro Ton in der Referenzdatei; keine Schnitte, keine neuen Subjekte, kein Text). - Verifizieren (niemals ohne behaupten):
[ -f ]das mp4 +ffprobeDauer ≥ 7 s. Fehlt/zu kurz → einmal neu generieren; immer noch fehlgeschlagen → Pfad B; Veo durchgehend fehlerhaft → Pfad C. - Seam-QA: erste + letzte Frames extrahieren, mit
mcp__fect-mcp__vision_compare(oder beiden) vergleichen. Ein sichtbarer Sprung → die ffmpeg-Überblendungsschleife aus der Referenzdatei darauf anwenden.
C. Pfad B – text2video + Überblendungsschleife
mcp__fect-mcp__veo_text2video mit dem schleifenfreundlichen Prompt-Rezept, dann mit der ffmpeg Selbstüberblendung nahtlos machen (die letzte Sekunde mit der ersten Sekunde mischen; Befehl in der Referenzdatei). Poster = extrahierter erster Frame.
D. Post-Produktion (alle Videopfade)
Mit ffmpeg (command -v ffmpeg): Audio entfernen (-an – Hintergrundvideo ist immer stummgeschaltet; Veos nativer Audiospur ist Ballast), die Leiter hero-desktop.mp4 (1920 w, H.264 CRF 24, +faststart) + hero-mobile.mp4 (720 w, CRF 26) codieren und hero-poster.jpg erzeugen (Pfad A: konvertiert aus hero-frame.png; Pfad B: erster Frame). Ausgaben landen in landing/{slug}/assets/video/.
Kein ffmpeg → das rohe Veo-mp4 für beide Varianten verwenden; der JS-Überblendungsplayer (Schritt 4) maskiert jede verbleibende Naht. Die fehlende Komprimierung im Abschlussbericht angeben – die Seite nicht als größenoptimiert präsentieren.
Budget-Tor: hero-desktop.mp4 ≤ 4 MB, hero-mobile.mp4 ≤ 1.5 MB, Poster ≤ 200 KB (mit stat -f%z / du -k prüfen). Über Budget → CRF erhöhen und vor dem Fortfahren neu codieren.
Eine 9:16-Hochformatvariante (zweite Veo-Generation) wird nur auf explizite Benutzeranfrage generiert – die Standard-Mobilstrategie ist der 720-w-Downscale + Poster-first-Laden.
Schritt 4: Seitenimplementierung
$CLAUDE_PLUGIN_ROOT/skills/landing-page/references/video-integration.md VOR diesem Schritt lesen – es enthält das Hero-Markup, den vollständigen loop-video.js Endlosschleifen-Player, die bevorzugten CSS-Animationstechniken für die Konvergenzschleife und die Implementierungsdetails für den Adversarial-QA-Pass.