splatstudio-landing-deck

Was macht splatstudio-landing-deck?

Schwester-Skill zu splatstudio-landing. Gleiches Atelier Zero-Visuals (warmes Papier, Inter Tight + Playfair Display, kursiv-Serifen-Akzente, Korallen-Punkte), aber als horizontales Magazin-Swipe-Deck statt langer Scroll-Seite.

Das Navigationsmodell stammt bewusst vom Skill guizang-ppt: ←/→ Pfeiltasten, Rad/Swipe, ESC für Übersichts-Raster – so fühlt es sich wie ein Print-Magazin an, das Seite für Seite umblättert, nicht wie ein Web-Slide-Deck zum Scrollen.

inputs.json + ../splatstudio-landing/styles.css
        │
        └──────────► scripts/compose.ts
                            │
                            ▼
                   <out>/index.html
                   (ein Viewport pro Slide, horizontaler Swipe)

Was Sie erhalten

• Eine einzige, in sich geschlossene HTML-Datei mit N viewportgroßen Slides, die horizontal auf einer transformierten Flex-Bahn angeordnet sind.
• Tastaturnavigation: ←/→ · ↑/↓ · Bild auf/ab · Leertaste · Home/Ende.
• Mausrad + Touch-Swipe (mit Momentum-Guard, damit ein einzelner Trackpad-Wischer nicht überschießt).
• Chrome-Leiste pro Slide: Markenzeichen, Deck-Titel, Ort, römische Jahreszahl, Live-Slide-Zähler (01 / 11).
• Korallen-Fortschrittsbalken unten, der sich beim Vorrücken füllt.
• Punkt-Indikator in der Nähe des unteren Rands; Klick auf einen Punkt springt dorthin.
• ESC-Übersichts-Raster – skalierte Miniaturansichten aller Slides, Klick zum Springen. Spiegelt die Übersichts-UX von guizang-ppt wider.
• Verwendet die gleiche 16-Slot-Bildbibliothek wie der Schwester-Skill – keine doppelten Assets.

Slide-Typen

Typ	Verwendung
cover	Titelblatt am Anfang. 2-spaltiger Text + Collage-Kunst.
section	Römischer Ziffern-Trenner zwischen Kapiteln. Zentriert, randlos.
content	Augenbrauenzeile + Titel + Fließtext + Aufzählungspunkte + optionale Collage-Kunst.
stats	Bis zu 4 große Statistikzellen (Wert · Label · Unterlabel).
quote	Hervorgehobenes Zitat + Autor. Optionales Porträt-Collage rechts.
cta	Abschluss-Pitch + 1-2 Schaltflächen.
end	Mega-Kursiv-Serifen-Schlusswort + Signatur-Footer.

Typischer 11-Slide-Pitch:

1. cover     — Titelblatt, Helden-Collage
2. section   — „I. Das Problem“
3. content   — Über uns / Manifest, Aufzählungspunkte
4. content   — Fähigkeiten, Aufzählungspunkte
5. stats     — 4 Zahlen
6. section   — „II. Wie es sich anfühlt“
7. content   — Methode, Aufzählungspunkte
8. content   — Ausgewählte Arbeiten
9. quote     — Kundenreferenz
10. cta      — Primäre + sekundäre Aktion
11. end      — Mega-Schlusswort + Signatur

Workflow

1. inputs.json erstellen

Beginnen Sie mit inputs.example.json (dem Open Design-Pitch-Deck). Der Markenblock, die Bildstrategie und der Asset-Pfad spiegeln den Schwester-Skill wider – wenn Sie bereits einen Kurzbrief für splatstudio-landing ausgefüllt haben, kopieren Sie brand und imagery einfach eins zu eins.

Wählen Sie für jeden Slide einen kind-Typ aus und füllen Sie die Typ-Felder aus schema.ts. MixedText (serifenlose Grundlinie + kursiv-Serifen-Akzente + abschließender Korallen-Punkt) ist dieselbe Kodierung wie beim Schwester-Skill – siehe dessen inputs.example.json.

2. (Optional) Bilder generieren oder Platzhalter erstellen

Dieser Skill liefert keinen eigenen Bildgenerator oder Platzhalter-Skript – er teilt die 16-Slot-Bibliothek mit splatstudio-landing. Zum Neugenerieren oder Platzieren:

# generieren via gpt-image-2 (fal.ai)
FAL_KEY=... npx tsx ../splatstudio-landing/scripts/imagegen.ts ../splatstudio-landing/inputs.example.json --out=../splatstudio-landing/assets/

# oder papierstrukturierte SVG-Platzhalter
npx tsx ../splatstudio-landing/scripts/placeholder.ts ../splatstudio-landing/assets/

Setzen Sie inputs.imagery.assets_path Ihres Decks auf den Pfad, unter dem diese PNGs liegen (Standard im Beispiel: ../splatstudio-landing/assets/).

3. Deck kompilieren

npx tsx scripts/compose.ts inputs.json out/index.html

Der Komponierer liest inputs.json, lädt das kanonische Atelier Zero-Stylesheet von ../splatstudio-landing/styles.css, legt deckspezifische Regeln obendrauf (horizontaler Flex-Track, Slide-Layouts, HUD, Punkt-Navigation, ESC-Übersicht, Tastatur-/Rad-/Touch-Handler) und schreibt eine einzige, in sich geschlossene HTML-Datei.

4. Selbstprüfung

• HTML in einem neuen Browser-Tab öffnen; Slide 1 (Cover) wird mit der Chrome-Leiste oben rechts mit 01 / N angezeigt.
• → drücken (oder Leertaste oder nach unten scrollen). Gleitet sanft einen Viewport nach rechts; die Punktnavigation springt mit; der Korallen-Fortschrittsbalken rückt vor.
• Ende drücken. Springt zum letzten Slide.
• Home drücken. Kehrt zu Slide 1 zurück.
• Esc drücken. Übersichts-Raster mit verkleinerten Miniaturansichten erscheint; Klick auf eine Kachel springt dorthin und schließt die Übersicht.
• Auf 1080px und 640px umstellen. Cover-/Content-Slides brechen auf eine Spalte um; Punktnavigation funktioniert noch; Chrome-Leisten schrumpfen.
• prefers-reduced-motion: reduce (DevTools → Rendering): Seitenübergänge bleiben flott und verursachen keine Bewegungskrankheit.
• Lighthouse: Kontrast AA, font-display swap, kein Layout-Shift.

Grenzen

• Stylesheet des Schwester-Skills wiederverwenden. Der Komponierer liest ../splatstudio-landing/styles.css zur Compile-Zeit. Keine doppelte Kopie hier führen; wenn sich Atelier Zero-Token ändern, einmal im Schwester-Skill bearbeiten.
• Bildbibliothek des Schwester-Skills wiederverwenden. Kein erneutes Prompten oder Rendern nötig – dieselben 16 Tafeln funktionieren für beide Oberflächen.
• Slides auf einen Viewport beschränken. Wenn der Inhalt eines Slides bei 1280×800 nicht in 100vh × 100vw passt, läuft er über und wirkt beengt. Text kürzen oder auf zwei Slides aufteilen.
• Nicht auf vertikales Scroll-Snap umstellen. Die horizontale Swipe-Haltung macht diesen Skill zum Magazin-Layout; ein vertikaler Scroller wäre nur eine lange Landing-Page.
• Keinen Router hinzufügen. Dies ist ein Single-File-Artefakt. Mehrseitige Decks sind nicht vorgesehen; für eine Multi-Deck-Erfahrung jedes Deck separat rendern und von einem übergeordneten Index aus verlinken.

Siehe auch

• splatstudio-landing — Landing-Page-Schwester-Skill.
• guizang-ppt — das Magazin-Deck-Navigationsmuster, das dieser Skill übernimmt.
• design-systems/atelier-zero/DESIGN.md — Token-Spezifikation.