PPT im digitalen Magazinstil @GuiCang
Erstellen Sie horizontal blätternde, webbasierte PowerPoint-Präsentationen (einzelne HTML-Datei) im Stil von E-Magazin und E-Ink. Die Vorlagen umfassen unter anderem WebGL-animierte Hintergründe, Serifenschriften für Überschriften und serifenlosen Fließtext, Kapitelumschläge, große Datenbanner und Bildraster. Nutzen Sie diese Funktion, wenn Benutzer webbasierte Präsentationen für Präsentationen, Produktvorstellungen oder Launch-Events erstellen möchten oder wenn es um Präsentationen im Magazin-Stil, horizontal blätternde Präsentationen, redaktionelle Magazine oder E-Ink-Präsentationen geht.

Featured by
淡苍
Why we love this skill
Diese Funktion vereint E-Magazin- und E-Ink-Stile und ermöglicht so die Erstellung einzigartiger, künstlerisch gestalteter, horizontal blätternder PowerPoint-Präsentationen für das Web. Abseits traditioneller Geschäftsvorlagen setzt sie auf elegante Schriftarten, fließende Hintergründe und anspruchsvolle Layouts, um ein hochwertiges visuelles Erlebnis zu schaffen, das an das Magazin Monocle erinnert.
Anweisungen
Denken Sie daran, die Webseite zur Generierung zu verwenden.
Erstellen Sie horizontal blätternde, webbasierte PowerPoint-Präsentationen (einzelne HTML-Datei) im Stil von E-Magazin und E-Ink. Die Vorlagen umfassen unter anderem WebGL-animierte Hintergründe, Serifenschriften für Überschriften und serifenlosen Fließtext, Kapitelumschläge, große Datenbanner und Bildraster. Nutzen Sie diese Funktion, wenn Benutzer webbasierte Präsentationen für Präsentationen, Produktvorstellungen oder Launch-Events erstellen möchten oder wenn es um Präsentationen im Magazin-Stil, horizontal blätternde Präsentationen, redaktionelle Magazine oder E-Ink-Präsentationen geht.
# Magazin Web Ppt
## Was bewirkt diese Fähigkeit?
Generieren Sie eine einzelne HTML-Datei mit horizontaler Diashow-Formatierung. Der visuelle Stil ist:
- Ein Hybridstil, der E-Magazin und E-Ink kombiniert.
- **WebGL Fluid/Contour/Dispersion Background** (Siehe Hero-Seite)
- **Serifenschriften für Überschriften (Noto Serif SC + Playfair Display) + serifenloser Fließtext (Noto Sans SC + Inter) + Metadaten in Monospace (IBM Plex Mono)**
- **Lucide Linear Icons** (Keine Emojis erforderlich)
- **Horizontales Umblättern (links und rechts auf der Tastatur, Scrollrad, Wischen auf dem Touchscreen, Punkt am unteren Bildschirmrand, ESC-Taste)**
- **Nahtloser Übergang des Designs**: Farben und Schattierungen gehen beim Wechsel zur Hero-Seite fließend ineinander über.
Die Ästhetik dieser Fertigkeit ist weder „Business-PowerPoint“ noch „Benutzeroberfläche für Verbraucher-Internet“ – es ist wie das *Monocle*-Magazin mit aufgeklebtem Code.
## Wann verwenden?
**Geeignete Szenarien:**
- Offline-Austauschrunden / Branchengespräche / Private Treffen
- Tag der Produkteinführung/Demo im Bereich KI
- Eine Rede mit einem ausgeprägten persönlichen Stil
- Wir benötigen eine webbasierte Version der Präsentation, die ohne Umblättern in einem Durchgang vollständig durchgearbeitet werden kann.
**Unangemessene Szenarien:**
- Große Abschnitte mit Tabellendaten und überlagerten Diagrammen (unter Verwendung gängiger PowerPoint-Präsentationen)
- Schulungsmaterialien (unzureichende Informationsdichte)
- Erfordert die gemeinsame Bearbeitung durch mehrere Personen (es handelt sich um statisches HTML).
### Schritt 1 · Anforderungen klären (**Unbedingt vor Beginn erforderlich**)
Wenn der Benutzer bereits eine vollständige Gliederung und Bilder bereitgestellt hat, können Sie mit Schritt 2 fortfahren.
Wenn der Nutzer nur ein Thema oder eine vage Idee vorgibt, gleichen Sie diese vor Beginn der Präsentation anhand der folgenden sechs Fragen ab. Erstellen Sie keine Folien auf Basis von Vermutungen – ist die Struktur erst einmal falsch, sind spätere Korrekturen sehr kostspielig. Sie können das Tool „askUserQuestion“ verwenden, um Fragen zu stellen.
#### 6 Klärungsfragen
| # | Frage | Warum fragen? |
|---|------|-----------|
| 1 | **Wer ist die Zielgruppe? In welchem Kontext soll der Inhalt präsentiert werden?** (Brancheninsider/Unternehmensgründung/Demo-Tag/Privates Meeting) | Bestimmt Sprachstil und -tiefe |
| 2 | **Dauer des Teilens?** | 15 Minuten ≈ 10 Seiten, 30 Minuten ≈ 20 Seiten, 45 Minuten ≈ 25-30 Seiten |
| 3 | **Haben Sie Originalmaterialien?** (Dokumente/Daten/Alte Präsentationen/Artikellinks) | Falls ja, verwenden Sie diese; falls nein, erstellen Sie etwas anderes daraus. |
| 4 | **Gibt es Bilder? Wo sollen sie platziert werden?** | Siehe „Bildkonventionen“ unten |
| 5 | **Welche Designfarbe möchten Sie?** | Siehe @themes.md , wählen Sie eine von 5 Voreinstellungen |
| 6 | **Gibt es zwingende Einschränkungen?** (XX-Daten müssen enthalten sein / YY-Daten dürfen nicht vorkommen) | Um Nacharbeiten zu vermeiden |
#### Gliederungshilfe (falls der Benutzer keine Gliederung hat)
Verwenden Sie die Vorlage für den „Erzählbogen“, um das Grundgerüst zu erstellen, und füllen Sie dann den Inhalt ein:
```
Einstieg → Seite 1: Präsentieren Sie einen Kontrast/eine Frage/harte Fakten, um die Leute zum Innehalten zu bringen.
Den richtigen Ton treffen (Kontext) → Seiten 1-2: Erläutern Sie den Hintergrund / Wer Sie sind / Warum Sie darüber sprechen
Hauptteil (Kern) → Seiten 3-5: Kerninhalt, durchsetzt mit Layouts 4/5/6/9/10
Shift → Seite 1: Erwartungen durchbrechen / Eine neue Perspektive präsentieren
Fazit → Seiten 1-2: Wichtige Zitate / Spannende Fragen / Handlungsvorschläge
```
Erzählbogen + Seitenzahlplanung + Themenrhythmustabelle (siehe @layouts.md ), **richten Sie die drei Tabellen aus**, bevor Sie mit Schritt 2 fortfahren.
Es wird empfohlen, die Gliederung als `Projektdatensatz` oder `Gliederung-v1` zu speichern, um nachfolgende Iterationen zu vereinfachen.
#### Bildkonventionen (Benutzer informieren)
Erklären Sie dem Benutzer Folgendes, bevor Sie fortfahren:
- **Bildposition**: Welches Bild befindet sich auf dem Board oder welches Bild wurde hochgeladen?
- **Was ist, wenn keine Bilder vorhanden sind?**: Um die Struktur an das Layout des Benutzers anzupassen, können Sie zunächst die Struktur mithilfe von Platzhalterfarbblöcken generieren und später Bilder hinzufügen; Sie müssen jedoch Layout 4/5/10 und andere Seiten mit gemischtem Text und Bildern darüber informieren, dass der visuelle Effekt ohne Bilder nicht überprüft werden kann.
### Schritt 2 · Referenzvorlage
@template.txt ist eine **vollständige und funktionsfähige** HTML-Datei – CSS, WebGL-Shader, Paginierungs-JS und Schriftart-/Icon-CDN sind alle voreingestellt; nur `
#### 2.1 · Platzhalter, die geändert werden müssen (**Leicht zu übersehen**)
Ändern Sie unmittelbar nach dem Kopieren die folgenden Platzhalter; andernfalls wird in Ihren Browser-Tabs der unschöne Text "[Erforderlich] Durch PPT-Titel ersetzen" angezeigt:
| Ort | Original | Muss geändert werden in |
|------|------|--------|
| `
#### 2.2 · Designfarbe auswählen (5 Voreinstellungen · Benutzerdefinierte Farben nicht zulässig)
Diese Funktion **erlaubt nur die Auswahl aus 5 sorgfältig zusammengestellten Voreinstellungen** und akzeptiert keine benutzerdefinierten Hex-Werte – nicht übereinstimmende Farben lassen das Bild sofort unansehnlich wirken; der Schutz der Ästhetik ist wichtiger als die Gewährung von Freiheit.
| # | Thema | Geeignet für |
|---|------|------|
| 1 | 🖋 Klassische Tinte | Allgemeine/Kommerzielle Freigabe/Standard bei Unsicherheit |
| 2 | 🌊 Indigo Porcelain | Konferenz zu Technologie/Forschung/Daten/Technologie-Release |
| 3 | 🌿 Forest Ink | Natur/Nachhaltigkeit/Kultur/Sachbuch |
| 4 | 🍂 Kraftpapier | Nostalgie/Geisteswissenschaften/Literatur/Unabhängiges Magazin |
| 5 | 🌙 Sanddünen | Kunst/Design/Kreativität/Galerie |
**arbeiten**:
1. Empfehlen Sie eine Zusammenstellung von Inhalten basierend auf dem Thema oder fragen Sie den Benutzer direkt, welche Zusammenstellung er auswählen möchte.
2. Öffnen Sie @themes.md und suchen Sie den `:root`-Block für das entsprechende Theme.
3. **Vollständiger Austausch** der mit "theme color" gekennzeichneten Zeilen innerhalb des `:root{`-Blocks am Anfang von @template.txt (`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`).
4. Alle anderen CSS-Anweisungen verwenden `var(--...)`, sodass keine weiteren Änderungen erforderlich sind.
**Harte Regeln**:
- Verwenden Sie für jedes Deck nur ein Thema; ändern Sie das Farbschema nicht mittendrin.
- Beliebige Hexadezimalwerte, die vom Benutzer angegeben werden, werden nicht akzeptiert – stattdessen werden 5 Optionen zur Auswahl angezeigt.
- Vermeiden Sie es, verschiedene Materialien zu kombinieren (z. B. Tinte für Ink Classic, Papier für Dune) – das wirkt völlig deplatziert.
### Schritt 3 · Inhalt einfügen
#### 3.0 · Vorabprüfung: Klassennamen müssen in @template.txt definiert sein (**Sehr wichtig**)
Hier liegt die Ursache aller Probleme bei der Seitengenerierung. Das Grundgerüst von @layouts.md verwendet viele Klassennamen (`h-hero` / `h-xl` / `stat-card` / `pipeline` / `grid-2-7-5` usw.). Fehlt eine entsprechende Definition im `