splatstudio – Magazin-Web-PPT

Magazin-Web-PPT

Was dieser Skill tut

Erzeugt ein einzelnes HTML-Deck mit horizontalem Wisch-Effekt im visuellen Stil von:

• Einem Hybrid aus elektronischem Magazin + E-Ink
• WebGL-Fluid-/Kontur-/Dispersionshintergrund (sichtbar auf Hero-Seiten)
• Serifen-Überschriften (Noto Serif SC + Playfair Display) + serifenloser Fließtext (Noto Sans SC + Inter) + Monospace-Metadaten (IBM Plex Mono)
• Lucide-Linienicons (kein Emoji)
• Horizontalem Links-/Rechts-Blättern (Tastatur ← →, Mausrad, Touch-Wisch, untere Punkte, ESC-Index)
• Sanfter Themeninterpolation: Beim Umblättern auf eine Hero-Seite wechseln Farben und Shader weich

Die Ästhetik dieses Skills ist weder „Unternehmens-PPT“ noch „Consumer-Internet-UI“: Sie sieht aus wie das Monocle-Magazin, nachdem Code darauf gestickt wurde.

Wann einsetzen

Geeignete Szenarien:

• Offline-Vorträge / interne Branchenvorträge / private Salons
• KI-Neueinführungen / Demo Days
• Vorträge mit starkem persönlichem Stil
• Eine Webversion der Folien, die man „einmal erstellt und kein Abspielwerkzeug benötigt“

Ungeeignete Szenarien:

• Lange Tabellendaten, gestapelte Diagramme (normales PPT verwenden)
• Schulungsunterlagen (zu geringe Informationsdichte)
• Gemeinsame Bearbeitung durch mehrere Personen (statisches HTML)

Workflow

Schritt 0 · Eine Richtung ableiten; nur fragen, wenn ein Vergleich gewünscht wird

Leiten Sie aus dem Briefing, dem Publikum, dem Inhalt und dem bekannten Kontext eine der 5 Magazinrichtungen ab. Jede Richtung enthält ihre Themenfarbe, empfohlene Layouts, Chrom-Stil und Folienanzahl. Verwenden Sie die passendste und fahren Sie ohne Nachfragen fort.

Nur wenn der Benutzer explizit nach einem Vergleich der Richtungsoptionen fragt, öffnen Sie references/styles.md und präsentieren Sie die 1-zeiligen Zusammenfassungen in einer direction-cards-Frage:

1. Monocle Editorial · Internationaler Magazinstil ✦ Standard
2. WIRED Tech · Daten + Technik
3. Kinfolk Slow · Slow Living / humanistisch
4. Domus Architectural · Architektur / Raumgefühl
5. Lab / Reference · Akademisch + Handwerksanleitung

Wenn der Benutzer sagt „Ich weiß nicht, empfehlen Sie“ oder keine Richtungsangabe macht: Standardmäßig auf Monocle Editorial ohne Nachfragen, da dies die geringste Ausfallwahrscheinlichkeit hat. Wenn der Benutzer „KI / Benchmark / technischer Launch“ erwähnt: WIRED wählen; „Lesen / privat / sozialer Kreis“: Kinfolk; „Design / Architektur / Portfolio“: Domus; „Forschung / akademisch / Methodik“: Lab.

Nachdem eine Richtung ausgewählt wurde, erstellen oder aktualisieren Sie 项目记录.md (Projektaufzeichnung) im Projektordner, mit der ersten Zeile, die Richtung + Themenfarbe + Publikum + Dauer klar angibt (siehe Vorlage am Ende von styles.md). Ändern Sie die Richtung zu keinem Zeitpunkt: Ein Wechsel in der Mitte bedeutet, dass alles Bisherige vergeblich war.

Schritt 1 · Absicht klären

Wenn der Benutzer bereits eine vollständige Gliederung + Bilder angegeben hat, können Sie direkt zu Schritt 2 springen.

Leiten Sie die folgende Checkliste aus dem Briefing, den Projektmetadaten, bereitgestellten Inhalten und der Konversation ab. Wenn eine fehlende Antwort das Deck wesentlich verändern würde und kein sicherer Standardwert existiert, fragen Sie nur diese ungeklärten Felder in einer konsolidierten Fragenliste ab. Fragen Sie nicht die Checkliste Punkt für Punkt ab.

6-Fragen-Klärungscheckliste

Richtung und Themenfarbe werden in Schritt 0 abgeleitet, es sei denn, der Benutzer fragt explizit nach einem Vergleich der Optionen.

#	Frage	Warum fragen
1	Wer ist das Publikum? Teilen-Szenario? (interner Branchenvortrag / kommerzieller Launch / Demo Day / privater Salon)	bestimmt Sprachstil und Tiefe
2	Vortragsdauer?	15 Min. ≈ 10 Seiten, 30 Min. ≈ 20 Seiten, 45 Min. ≈ 25-30 Seiten (siehe empfohlenen Bereich jeder Richtung in styles.md)
3	Gibt es Quellmaterial? (Dokumente / Daten / altes PPT / Artikel-Links)	Mit Material darauf aufbauen; ohne Material helfen, es zu erstellen
4	Gibt es Bilder? Wo sind sie?	siehe „Bildkonvention“ unten
5	Welche Themenfarbe möchten Sie?	✓ bereits durch die Richtung in Schritt 0 entschieden
6	Gibt es harte Einschränkungen? (muss XX-Daten enthalten / darf YY nicht zeigen)	vermeidet Nacharbeit

Gliederungshilfe (wenn der Benutzer keine Gliederung hat)

Verwenden Sie die „Erzählbogen“-Vorlage, um das Skelett zu erstellen, dann füllen Sie den Inhalt ein:

Aufhänger  → 1 Seite   : Ein Kontrast / eine Frage / eine harte Zahl, die die Leute innehalten lässt
Kontext    → 1-2 Seiten : Erklärt den Hintergrund / wer Sie sind / warum dieses Thema
Kern       → 3-5 Seiten : Der Kerninhalt, durchmischt mit Layouts 4/5/6/9/10
Wende      → 1 Seite    : Bricht die Erwartung / schlägt eine neue Sichtweise vor
Takeaway   → 1-2 Seiten : Ein Point / eine spannungsgeladene Frage / ein Aufruf zum Handeln

Erzählbogen + Seitenanzahlplan + Themenrhythmustabelle (siehe layouts.md); stimmen Sie alle drei Tabellen aufeinander ab, bevor Sie zu Schritt 2 übergehen.

Es ist am besten, die Gliederung als 项目记录.md (Projektaufzeichnung) oder 大纲-v1.md (Gliederung v1) für spätere Iterationen zu speichern.

Bildkonvention (dem Benutzer mitteilen)

Machen Sie dem Benutzer vor dem Start Folgendes klar:

• Ordnerpfad: unter 项目/XXX/ppt/images/ (nebengeordnet zu index.html)
• Benennungskonvention: {Seitennummer}-{semantisch}.{ext}, z. B. 01-cover.jpg / 03-figma.jpg / 05-dashboard.png
  • Seitennummer mit Nullen auffüllen für einfache Sortierung
  • Den semantischen Teil auf Englisch, kurz, spezifisch, passend zum Inhalt
• Spezifikationsempfehlungen:
  • Jedes Bild ≥ 1600px breit (vermeidet Unschärfe auf großen Bildschirmen)
  • JPG für Fotos/Screenshots, PNG für transparente UI/Diagramme
  • Gesamtgröße unter 10MB halten (beeinflusst die Blätterglätte)
• So ersetzen Sie: Gleichnamige Überschreibung ist am stabilsten (kein Pfadwechsel in der HTML nötig); wenn sich der Dateiname ändert, denken Sie daran, global images/altname zu suchen und in den neuen Namen zu ändern
• Was tun, wenn es keine Bilder gibt: Mit dem Benutzer abstimmen; Sie können die Struktur zuerst mit Platzhalter-Farbblöcken generieren und die Bilder später einfügen, aber sagen Sie ihnen, dass Seiten mit Bild-Text-Mix wie Layouts 4/5/10 ihre Optik ohne Bilder nicht überprüft werden kann

Schritt 2 · Vorlage kopieren

Kopieren Sie assets/template.html an den Zielort (normalerweise 项目/XXX/ppt/index.html), und erstellen Sie einen images/-Ordner als Nebengeordneten, bereit zum Empfangen von Bildern.

mkdir -p "项目/XXX/ppt/images"
cp "<SKILL_ROOT>/assets/template.html" "项目/XXX/ppt/index.html"

template.html ist eine vollständige, ausführbare Datei: CSS, WebGL-Shader, Blätter-JS, Schriftart-/Icon-CDN sind alle voreingestellt; nur innerhalb von <main id="deck"> gibt es 3 Beispielfolien (Cover, Akt-Trenner, leere Füllseite).

2.1 · Platzhalter, die Sie ändern müssen (leicht zu übersehen)

Ändern Sie direkt nach dem Kopieren die folgenden Platzhalter, sonst zeigt der Browser-Tab einen unbeholfenen Text wie „[必填] replace with the PPT title“:

Stelle	Original	Ändern zu
<title>	[必填] 替换为 PPT 标题 · Deck Title	den tatsächlichen Deck-Titel (z. B. Eine neue Arbeitsweise · Luke Wroblewski)

Das erste, was Sie jedes Mal tun, wenn Sie das Kopieren von template.html beendet haben: greppen Sie nach „[必填]“, um zu bestätigen, dass alles ersetzt wurde.

2.2 · Themenfarbe wählen (5 Voreinstellungen · keine Anpassung erlaubt)

Dieser Skill erlaubt nur die Auswahl einer von 5 sorgfältig abgestimmten Voreinstellungen; er akzeptiert keine benutzerdefinierten Hex-Werte: Eine falsche Farbkombination macht die Optik sofort hässlich, und der Schutz der Ästhetik ist wichtiger als das Angebot von Freiheit.

#	Thema	Am besten geeignet für
1	🖋 Ink Classic	Allgemein / kommerzieller Launch / der Standard, wenn Sie nicht wissen, was Sie wählen sollen
2	🌊 Indigo Porcelain	Technik / Forschung / Daten / technische Keynotes
3	🌿 Forest Ink	Natur / Nachhaltigkeit / Kultur / Sachbuch
4	🍂 Kraft Paper	Nostalgisch / humanistisch / literarisch / Independent-Magazine
5	🌙 Dune	Kunst / Design / kreativ / Galerie

So wird's gemacht:

1. Empfehlen Sie eines basierend auf dem Inhaltsthema, oder fragen Sie den Benutzer einfach, welches er wählen möchte
2. Öffnen Sie references/themes.md und finden Sie den :root-Block für das entsprechende Thema
3. Ersetzen Sie als Ganzes die Zeilen, die mit dem „theme color“-Kommentar im öffnenden :root{-Block von assets/template.html (der kopierten Version) markiert sind: --ink / --ink-rgb / --paper / --paper-rgb / --paper-tint / --ink-tint
4. Das gesamte andere CSS fließt durch var(--...), keine weiteren Änderungen nötig

Harte Regeln:

• Ein Deck verwendet nur ein Thema, ändern Sie die Farben nicht in der Mitte
• Akzeptieren Sie keinen beliebigen Hex-Wert des Benutzers: lehnen Sie höflich ab und zeigen Sie die 5 Voreinstellungen zur Auswahl
• Mischen Sie nicht (z. B. Tinte von Ink Classic und Papier von Dune): es kollidiert völlig

Schritt 3 · Inhalt füllen

3.0 · Vorprüfung: Klassennamen müssen in template.html definiert sein (am wichtigsten)

Dies ist die Quelle aller Generierungsprobleme. Die Layout-Skelette in layouts.md verwenden viele Klassennamen (h-hero / h-xl / stat-card / pipeline / grid-2-7-5, etc.); wenn das <style> in assets/template.html keine entsprechende Definition hat, fällt der Browser auf die Standardstile zurück: Der große Titel wird serifenlos, die Datenkarten quetschen sich zu einem Klumpen, die Pipeline verschmiert zu einer Zeile, die Bilder stapeln sich am unteren Seitenrand.

Bevor Sie Foliencode schreiben:

1. Lesen Sie zuerst assets/template.html (zumindest bis zum Ende des <style>-Blocks)
2. Überprüfen Sie gegen die Preflight-Liste von layouts.md, ob jede Klasse, die Sie verwenden werden, im <style> existiert
3. Fehlt eine Klasse: Fügen Sie sie zum <style> von template.html hinzu, schreiben Sie sie nicht inline auf jeder Folie neu
4. template.html ist die einzige Quelle für Klassennamen: Erfinden Sie keine neuen Klassennamen; wenn Sie einen benutzerdefinierten benötigen, verwenden Sie style="..." inline

Häufig übersehene Klassen (müssen im Voraus bestätigt werden): h-hero / h-xl / h-sub / h-md / lead / kicker / meta-row / stat-card / stat-label / stat-nb / stat-unit / stat-note / pipeline-section / pipeline-label / pipeline / step / step-nb / step-title / step-desc / grid-2-7-5 / grid-2-6-6 / grid-2-8-4 / grid-3-3 / grid-6 / grid-3 / grid-4 / frame / frame-img / img-cap / callout / callout-src / chrome / foot

3.0.5 · Themenrhythmus planen (genauso wichtig wie die Klassen-Vorprüfung)

Bevor Sie Layouts auswählen, müssen Sie zuerst die Themenklasse für jede Seite auflisten (hero dark / hero light / light / dark) und in einem Dokument oder Entwurf notieren, um sie abzugleichen. Detaillierte Regeln finden Sie im Abschnitt „Themenrhythmusplanung“ oben in references/layouts.md.

Obligatorische Regeln:

• Jeder Seitenabschnitt muss eines von light / dark / hero light / hero dark tragen; schreiben Sie nicht nur hero
• 3+ aufeinanderfolgende Seiten mit demselben Thema = visuelle Ermüdung, nicht erlaubt
• 8+ Seiten müssen ≥1 hero dark + ≥1 hero light haben
• Das gesamte Deck darf nicht nur light-Inhaltsseiten haben; es muss eine dark-Inhaltsseite geben, um Atempausen zu schaffen
• Fügen Sie alle 3-4 Seiten eine Hero-Seite (Cover/Trenner/Frage/Großzitat) ein

Selbstprüfung nach der Generierung: grep 'class="slide' index.html listet alle Themen auf; überprüfen Sie manuell, ob der Rhythmus vernünftig ist, bevor Sie ausliefern.

3.1 · Ein Layout auswählen

Schreiben Sie Folien nicht von Grund auf neu. Öffnen Sie references/layouts.md; es enthält 10 fertige Layout-Skelette, jedes ein vollständiger, einfügebereiter <section>-Codeblock:

Layout	Verwendung
1. Cover	Seite 1
2. Akt-Trenner	Beginn jedes Akts
3. Große Zahlen	Harte Daten präsentieren
4. Leitbild + Text (Zitat + Bild)	Identitätskontrast / Geschichte
5. Bildraster	Mehrfachbildvergleich / Screenshot-Beweis
6. Zweispaltige Pipeline (Pipeline)	Arbeitsablaufprozess
7. Spannungsgeladener Abschluss / Frageseite	Aktabschluss / Zusammenfassung
8. Großzitatseite (Big Quote)	Serifen-Point / Takeaway
9. Side-by-Side-Vergleich (Vorher / Nachher)	Altes Modell vs. neues Modell
10. Bild-Text-Mix (Leitbild + Seitentext)	Informationsdichte Bild-Text-Seiten

Wählen Sie das entsprechende Layout aus, fügen Sie es ein, ändern Sie den Text und die Bildpfade. Stellen Sie sicher, dass die 3.0-Vorprüfung zuerst abgeschlossen ist.

3.2 · Bildseitenverhältnisregeln

Verwenden Sie immer ein Standardseitenverhältnis, niemals das seltsame Verhältnis des Quellbildes (wie 2592/1798):

Szenario	Empfohlenes Verhältnis
Leitbild + Text, Hauptbild	16:10 oder 4:3 + max-height:56vh
Bildraster (Mehrfachbildvergleich)	Fest height:26vh, nicht aspect-ratio
Kleines Bild links + Text rechts	1:1 oder 3:2
Vollbild-Hero-Visual	16:9 + max-height:64vh
Bild-Text-Mix, kleiner Einsatz	3:2 oder 3:4

Verwenden Sie niemals align-self:end auf einem Bild: Es rutscht an den unteren Rand der Zelle und wird von der Browser-Symbolleiste versteckt. Verwenden Sie einen Grid-Container + align-items:start (bereits in der Vorlage voreingestellt), damit das Bild oben klebt; wenn Sie die linke Spalte unten kleben wollen, verwenden Sie Flex-Spalte + justify-content:space-between.

Komponentendetails (Schriftarten, Farben, Raster, Icons, Callout, Stat-Card etc.) finden Sie in references/components.md.

Schritt 4 · Selbstprüfung anhand der Checkliste

Nach der Generierung öffnen Sie immer references/checklist.md und überprüfen Sie Punkt für Punkt. Es fasst jede Falle zusammen, die während der echten Iteration aufgetreten ist; die Probleme der Stufe P0 (Emoji, ausbrechende Bilder, Titelumbruch, Typografie-Arbeitsteilung) müssen alle bestanden werden.

Einige Punkte, auf die Sie besonders achten sollten:

1. Große Titel müssen Serife haben: Wenn sie als serifenlos angezeigt werden, wurde die Schritt 3.0-Vorprüfung zu 99% nicht durchgeführt und die h-hero-Klasse fehlt in template.html
2. Verwenden Sie in Bildrastern nur height:Nvh, nicht aspect-ratio (es bricht aus)
3. Bilder dürfen sich nicht am unteren Seitenrand stapeln: Verwenden Sie nicht align-self:end, sondern Grid + align-items:start (siehe Schritt 3.2)
4. Bilder dürfen nur Standardseitenverhältnisse verwenden (16:10 / 4:3 / 3:2 / 1:1 / 16:9), kopieren Sie nicht das seltsame Verhältnis des Quellbildes
5. Chinesische große Titel ≤ 5 Zeichen und nowrap (vermeiden Sie 1 Zeichen pro Zeile)
6. Verwenden Sie Lucide, kein Emoji
7. Serife für Titel, serifenlos für Fließtext, Mono für Metadaten

Schritt 5 · Lokale Vorschau

Öffnen Sie index.html einfach direkt im Browser. Unter macOS:

open "项目/XXX/ppt/index.html"

Kein lokaler Server erforderlich. Bilder verwenden den relativen Pfad images/xxx.png.

Schritt 6 · Iterieren

Ändern Sie basierend auf Benutzerfeedback: Das CSS der Vorlage ist hochgradig parametrisiert, und 90% der Anpassungen bestehen darin, i...