kyjongSNSoft/Landing-Page-Skill

Figma → Landing Page

Erzeuge eine deploybare statische Landing Page aus einem Figma-Design: index.html + css/main.css + js/{tool,pm_main,main}.js + images/*.webp.

Aufruf: /figma-landing-page <Figma-Link> [Aktionsname] [Ausgabeverzeichnis]

Fester Vertrag (darf nicht abgewichen werden):

• Es gibt genau 3 Template-Platzhalter: __PAGE_TITLE__, __FUNCTION_NAME__ (beide in main.js, Titel auch in index.html), __PC_BASE__ (in tool.js; 375 = nur H5-Frame; 1920 = H5+PC-Doppelframe).
• CTA-Elemente müssen zusätzlich die Klasse .join-btn erhalten (fester JS-Selektor-Vertrag), zusammen mit BEM-Klassen.
• Breakpoint 576px einheitlich an drei Stellen: JS-rem-Verzweigung, CSS @media (min-width: 576px), platform-Erkennung.
• px-Normalisierung: H5 px × 375 ÷ H5-Framebreite ÷ 100 = rem; PC px × 1920 ÷ PC-Framebreite ÷ 100 = rem.
• Die drei Template-JS-Dateien (tool.js rem-Adaption / pm_main.js postMessage-Brücke / main.js Business-Logik, in dieser Reihenfolge geladen) sowie die festen Abschnitte werden kein einziges Wort geändert; Seiteninteraktionen werden ausschließlich unter // === Page-specific interactions === in main.js eingefügt (innerhalb des IIFE, direkt nutzbar: $p/pm/track/Date.prototype.format).
• Detaillierte Regeln (Asset-Zuschnitt, Klassennamen, Interaktions-Ableitungstabelle) siehe references/patterns.md, Abnahmekriterien siehe references/checklist.md – vor der Generierung beide Dateien lesen.

Schritt 1 – Eingabe parsen & Umgebungsprüfung

1. Aus dem Link den File-Key und die Node-ID extrahieren. Node-ID-Bindestriche in Doppelpunkte umwandeln (123-456 → 123:456) bevor die Figma-API aufgerufen wird; bei 404/leeren Ergebnissen der API sofort diesen Schritt überprüfen.
2. Drei Umgebungsprüfungen (bei Scheitern erst reparieren, dann fortfahren):
   • Figma MCP ist verbunden (falls nicht, Benutzer zur Authentifizierung führen; Authentifizierungsinteraktionen zählen nicht als einzige Unterbrechung durch das Bestätigungsgate). Zuerst whoami (kontingentbefreit) aufrufen, um den Sitz zu bestätigen: View/Collab- oder Starter-Sitz: nur 6 MCP-Aufrufe/Monat – bei knappem Budget MCP überspringen und direkt auf REST-Route in Schritt 2/4 umsteigen (PAT in ~/.figma_token speichern, fehlend: Benutzer bitten, in Figma Settings → Security zu generieren und in eigenem Terminal in Datei zu schreiben, um Chatverlauf zu vermeiden).
   • which cwebp – fehlt: Benutzer informieren brew install webp; lehnt Benutzer Installation ab, gesamte Seite auf PNG-Assets zurückfallen und im Lieferbericht vermerken.
   • node -e "require('playwright-core')" – fehlt: im Scratchpad-Verzeichnis npm i playwright-core ausführen; Browser: lokales Chrome wiederverwenden (channel: 'chrome'), keine Browser-Binärdateien herunterladen.
3. Standard-Ausgabeverzeichnis: ./output/<aktionsname-slug>/ (alle Skill-Artefakte einheitlich unter output/ ablegen; wenn Aktionsname nicht angegeben, aus Figma-Seiten-/Framenamen ableiten, im Bestätigungsgate prüfen). Wenn Verzeichnis existiert und nicht leer ist, jetzt nicht unterbrechen – Überschreibungsbestätigung gehört zum Bestätigungsgate.

Schritt 2 – Design inventarisieren

• Mit spärlichem Metadaten-Tool (get_metadata) den Node-Baum lesen; nicht den gesamten Design-Context auf einmal für den Root-Frame abrufen.
• MCP nicht verfügbar / Budget erschöpft: REST GET /v1/files/<key>/nodes?ids=<node> (ohne depth = vollständiger Teilbaum-JSON, mit Volltext, Schriftarten, Fills-Gradienten-Originalwerten, exakten BBoxen – Informationen umfassender als get_metadata). Lokal speichern und wiederholt parsen; ein Aufruf reicht für den gesamten Vorgang; CSS-Farben/Gradienten/Texte direkt aus diesem JSON entnehmen, kein get_code nötig.
• Frame-Erkennung: Breite ≤ 480 → H5-Frame; ≥ 1200 → PC-Frame; nicht klassifizierbare Frames ins Bestätigungsgate aufnehmen. Nur H5-Frame → __PC_BASE__ = 375; H5+PC-Doppelframe → __PC_BASE__ = 1920.
• Asset-Liste erstellen: Abschnittsliste (Hero, Banner, Steps, Tnc…); jeden Node markieren als Zuschnitt-Bild / Echter Text / Interaktionskomponente (Erkennungsregeln siehe references/patterns.md).
• Alle CTAs markieren (Join Now / Registrieren / Sign-Up-Buttons) – sie müssen .join-btn erhalten.

Schritt 3 – Bestätigungsgate (einzige Unterbrechung vor Generierung im Normalablauf)

Eine Nachricht mit folgendem vollständigen Inhalt, einmalige Benutzerbestätigung einholen; danach bis zur Lieferung nicht mehr unterbrechen:

• Aktionsname, __PAGE_TITLE__-Wert, __FUNCTION_NAME__-Wert (z. B. WinsdayBillionDropLandingPage)
• Ausgabeverzeichnis (bei nicht leerem Verzeichnis hier Überschreibung bestätigen)
• Asset-Liste (Node → images/<name>.webp)
• CTA-Node-Liste
• Interaktionsliste: Jeder Eintrag mit Ableitungsgrundlage und erforderlichen Parametern (Countdown → Endzeit/Verhalten bei Ablauf; Karussell → Autoplay/Intervall; Popup → Auslösezeitpunkt; Tabelle siehe references/patterns.md). Parameter, die nicht aus dem Design ableitbar sind, hier vom Benutzer ausfüllen lassen; nicht klassifizierbare Nodes als „statisch“ markieren.
• Zweifelhafte Frame-Erkennungen

Schritt 4 – Assets exportieren (vierstufige Fallback-Kette, absteigend nach Verfügbarkeit)

1. MCP download_assets (bei ausreichendem Sitz-Budget): max. 20 Nodes pro Batch, scale 2x, format png; temporäre URLs mit curl herunterladen.
2. REST-Rendering GET /v1/images/<key>?ids=…&format=png&scale=2: ids kommagetrennt, aber max. 4 große Nodes pro Batch (sonst "Render timeout"); 429 = Sitz-Rendering-Budget erschöpft (View-Sitz etwa nach 12 Bildern, Fenster stundenweise), auf nächste Stufe wechseln, nicht warten.
3. REST-Bild-Endpunkt GET /v1/files/<key>/images: liefert gesamte imageRef-zu-Originalbild-URL-Mapping der Datei zurück, nutzt Datei-Budget, fast nie durch Rendering-Limits gedrosselt. Geeignet für alle Bildfüll-Node (Fotos/Sticker/Icons – Node-JSON fills[].imageRef zuordnen ergibt Originalauflösung, oft weit über 2x, nach scaleMode des Fills zuschneiden/Alpha trimmen und skalieren). Nicht geeignet für Vektor-Kombinations-Node (Panels/Bänder).
4. Manueller Benutzerexport (kein Kontingent): Benutzer bitten, Nodes in Figma auszuwählen und zu exportieren. Bevorzugt SVG-Format – Vektorteile unendlich scharf, Bitmaps als base64 in Originalauflösung eingebettet (mit regex <image> extrahierbar, beste Quelle für transparente Elemente). SVG→2x-Bitmap-Rasterisierungspipeline: SVG in temporäres Verzeichnis kopieren (kebab-sicherer Dateiname, Originalname enthält oft &/Leerzeichen), HTML-Wrapper im selben Verzeichnis schreiben <img src="./x.svg"> (file:// direkt geöffnetes SVG oder referenzierte Datei über Verzeichnisse hinweg werden von Chrome abgelehnt), Playwright deviceScaleFactor:2 + omitBackground:true Screenshot für transparentes PNG.

• Allgemein: In webp konvertieren cwebp -q 80; Benennung semantisch kebab-case, ohne Hash; reine Gradienten-/Vollfarben-Nodes direkt aus JSON in CSS schreiben, kein Bild.
• Hinweis: Figma-exportierte SVG-viewBox können Schatten/Beschnitt enthalten (größer als Node-Box), Container nach Node-Box positionieren, Bild proportional überlaufen lassen, nicht quetschen.
• Einzelbild-Export fehlgeschlagen: 2x wiederholen → auf nächste Kette fallen lassen; erst bei vollständigem Kettenausfall überspringen und im Lieferbericht vermerken.

Schritt 5 – Code generieren

• Von assets/template/ ausgehen: base.css-Inhalt als Anfangsskelett von css/main.css (Produkt: nur einzelne main.css, base.css nicht separat ausgeben).
• index.html: <title> ersetzen; Schriftarten-Link durch Design-Schriftarten ersetzen (falls Google Fonts nicht gefunden, nächstähnliche wählen und im Bericht vermerken); innerhalb von #app pro Abschnitt semantische Struktur generieren, BEM-Klassennamen (.hero__bg, .banner__headline), CTA-Elemente zusätzlich mit join-btn.
• css/main.css: Werte aus Figma exakten Maßen/Farben/Gradienten (plain HTML+CSS-Ausgabe von get_code kann bei Wertfindung helfen), alle zuerst px-normalisiert dann in rem schreiben; Hintergrund background-image, Inhaltsbilder <img>. Bei Doppelframe-Seite: H5-Regeln zuerst, PC-Überschreibungen alle in @media (min-width: 576px).
• js/: Drei Template-Dateien kopieren (tool.js / pm_main.js / main.js), 3 Platzhalter ersetzen (__PC_BASE__ in tool.js, die anderen beiden in main.js); bestätigte Interaktionscodes unter dem Marker in main.js einfügen.
• Elemente, die im Design bis zum Framenrand beschnitten sind (bbox überschreitet Framebreite), Container mit overflow: hidden den Framebeschnitt nachbilden, sonst horizontaler Überlauf.
• Selbstprüfung: node --check js/*.js für alle drei Dateien bestehen.

Schritt 6 – Screenshot-Vergleich & Iteration (abschnittsweise, max. 3 Runden)

• Lokalen Server im Ausgabeverzeichnis starten: python3 -m http.server <port>.
• Folgendes Screenshot-Skript ins Scratchpad schreiben und damit abschnittsweise Screenshots machen (Clip-Koordinaten aus DOM holen: page.evaluate für jedes Abschnitts-Element getBoundingClientRect):

// shot.mjs <url> <out.png> <width> <dsf> [clipY clipH]
import { chromium } from 'playwright-core';
const [url, out, width, dsf, clipY, clipH] = process.argv.slice(2);
const browser = await chromium.launch({ channel: 'chrome' });
const page = await browser.newPage({
  viewport: { width: +width, height: 800 },
  deviceScaleFactor: +dsf,
});
await page.goto(url, { waitUntil: 'networkidle' });
await page.screenshot(clipY === undefined
  ? { path: out, fullPage: true }
  : { path: out, clip: { x: 0, y: +clipY, width: +width, height: +clipH } });
await browser.close();

• H5-Vergleich: Lokal width 375, dsf 2; Figma-Seite mit download_assets für Abschnitts-Nodes 2x-png-Vergleichsbilder exportieren (Vergleichsbilder im Scratchpad, nicht in images/).
• Abschnittsweise nebeneinander vergleichen, Unterschiede korrigieren; max. 3 Runden, verbleibende Unterschiede im Lieferbericht vermerken.
• Nach Konvergenz: Zusätzlich mit width 414 (dsf 2) ganzseitigen Quick-Regression-Test durchführen, um Versatz/Überlauf auszuschließen (Checklist fordert 375/414 zwei Stufen).
• Ganzframe-Screenshots nur für Lieferbericht-Optik, niemals als Abweichungsbeurteilungsgrundlage (lange Seite ganz wird für Schriftgröße/Farbunterschiede zu stark herunterskaliert).
• Bei Doppelframe-Seite: Zusätzlich mit width 1920, dsf 1 den PC-Layout-Abschnittsvergleich wiederholen (gegen PC-Frame-1x-Exportbild); und mit width 1280 ganzseitigen Quick-Regression-Test (Checklist Doppelframe-Stufen fordert 1280/1920).
• Nebenbei prüfen: Browser-Konsole keine Fehler (page.on('console') oder DevTools).

Schritt 7 – Lieferung

Lieferbericht enthält:

1. Ausgabeverzeichnis-Baum
2. references/checklist.md – alle Punkte abgehakt
3. Verbleibende bekannte Abweichungen (in 3 Runden nicht behobene)
4. Pfade zu abschnittsweisen Vergleichs-Screenshots
5. Verwendete Fallbacks (png statt webp, ähnliche Schriftarten, übersprungene Assets)

Fehlerbehandlungs-Spickzettel

Szenario	Behandlung
Figma MCP nicht verbunden/Authentifizierung abgelaufen	Zur Authentifizierung führen, dann vom unterbrochenen Schritt fortsetzen (zählt nicht als Bestätigungsgate-Unterbrechung)
Node-ID-API 404/leer	Bindestrich→Doppelpunkt-Konvertierung prüfen
Asset-Export fehlgeschlagen/Rate-Limit 429	2x wiederholen → auf nächste Kette fallen lassen (siehe Schritt 4) → bei Misserfolg überspringen + im Bericht vermerken
cwebp fehlt und Benutzer lehnt Installation ab	Produkt auf images/*.png zurückfallen + im Bericht vermerken
Frame-Struktur nicht erkennbar	Ins Bestätigungsgate aufnehmen, Benutzer fragen (konkrete Node-ID nötig)
Ausgabeverzeichnis nicht leer	Überschreibung im Bestätigungsgate gemeinsam bestätigen