Denken Sie daran, eine Webseite zur Generierung der Ausgabe zu verwenden, und Sie müssen den Benutzer fragen, welche Sprache er verwenden möchte.

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: Hintergrund erläutern / Wer Sie sind / Warum Sie darüber sprechen

Hauptinhalt (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 Bild 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 `<main id="deck">` enthält 3 Beispielfolien (Titelbild, Kapitel-Titelbild und leere Füllseite).

#### 2.1 · Platzhalter, die geändert werden müssen (**Leicht zu übersehen**)

Ändern Sie unmittelbar nach dem Kopieren die folgenden Platzhalter; andernfalls zeigen Ihre Browser-Tabs einen unschönen Text wie „[Erforderlich] Durch PPT-Titel ersetzen“ an:

| Ort | Original | Muss geändert werden in |

|------|------|--------|

| `<title>` | `[Erforderlich] Ersetzen Sie dies durch den PPT-Titel · Decktitel` | Tatsächlicher Decktitel (z. B. `Eine neue Arbeitsweise · Luke Wroblewski`) |

#### 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 `<style>`-Bereich von `assets/template.html`, greift der Browser auf den Standardstil zurück – Überschriften werden serifenlos dargestellt, Datenkarten werden eng beieinander angeordnet, Rohrleitungen verschwimmen zu einer einzigen Zeile und Bilder werden am unteren Seitenrand gestapelt.

**Bevor Sie mit dem Schreiben des Foliencodes beginnen:**

1. **Lesen Sie zuerst die Datei @template.txt ** (zumindest bis zum Ende des `<style>`-Blocks).

2. **Schauen Sie in der Pre-flight-Liste in @layouts.md nach, ob jede Klasse, die Sie verwenden möchten, im `<style>`-Tag vorhanden ist.**

3. Falls eine Klasse fehlt: **Fügen Sie sie im Abschnitt `<style>` der Datei @template.txt hinzu**, schreiben Sie sie nicht inline in jede Folie neu.

4. **@template.txt ist die einzige Quelle für Klassennamen** – erfinden Sie keine neuen Klassennamen; wenn Sie diese anpassen müssen, verwenden Sie `style="..."` inline.

Häufig übersehene Klassen (deren Existenz vorher bestätigt werden muss):

`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 · Planung des Thementempos (**Genauso wichtig wie die Voraberkennung im Unterricht**)

Bevor Sie ein Layout auswählen, müssen Sie zunächst die Designklasse für jede Seite (`hero dark` / `hero light` / `light` / `dark`) festlegen und in einem Dokument oder Entwurf ausrichten. Ausführliche Regeln finden Sie im Abschnitt „Designrhythmusplanung“ ab der Datei @layouts.md .

**Verbindliche Regeln**:

- Jeder Seitenabschnitt muss einen der folgenden Begriffe enthalten: `light`, `dark`, `hero light` oder `hero dark`; schreiben Sie nicht einfach nur `hero`.

- Mehr als 3 aufeinanderfolgende Seiten zum selben Thema = visuelle Ermüdung, nicht erlaubt.

- Auf 8 oder mehr Seiten muss mindestens ein „dunkler Held“ und mindestens ein „heller Held“ enthalten sein.

- Das gesamte Kartenset darf nicht nur aus Seiten mit „hellem“ Text bestehen; es muss auch Seiten mit „dunklem“ Text enthalten, um Freiraum zu schaffen.

- Fügen Sie alle 3-4 Seiten eine Heldenseite ein (Titelseite/Rückseite/Frage/großes Zitat)

**Selbstprüfung nach der Generierung: `grep 'class="slide' index.html` listet alle Themen auf; manuelle Überprüfung stellt sicher, dass das Tempo vor der Auslieferung angemessen ist.

#### 3.1 · Auswahl eines Layouts

**Erstellen Sie keine Folien von Grund auf.** Öffnen Sie `@layouts.md` , das 10 vorgefertigte Layout-Gerüste enthält, jedes ein vollständiger und einfügbarer `<section>`-Codeblock:

| Aufbau | Zweck |

|---|---|

| 1. Aufklappen des Umschlags | Seite 1 |

| 2. Kapitelumschlag | Beginn jedes Akts |

3. Datenbasierte Poster | Präsentation von harten Fakten |

| 4. Linker Text, rechtes Bild (Zitat + Bild) | Identitätskontrast / Geschichte |

| 5. Bildraster | Vergleich mehrerer Bilder / Screenshot-Beweis |

6. Zwei-Pipeline-Workflow |

| 7. Ende der Spannung/Fragenseite | Ende des Kapitels/Finale |

8. Großes Zitat | Serifen/Kernaussagen |

| 9. Parallelvergleich (Vorher / Nachher) | Alter Modus vs. Neuer Modus |

| 10. Kombination von Bild und Text | Informationsreiche Bild- und Textseiten |

Wählen Sie das entsprechende Layout aus, fügen Sie es ein und passen Sie die Text- und Bildpfade an. **Führen Sie zuerst den 3.0-Vorabtest durch.**

#### 3.2 Bildseitenverhältnis-Standards

Verwenden Sie immer das **Standard-Seitenverhältnis**, niemals ungerade Seitenverhältnisse des Originalbildes (wie z. B. `2592/1798`):

| Szenarien | Empfehlungsquote |

|------|---------|

| Text links, Bild rechts (Hauptbild) | 16:10 oder 4:3 + `max-height:56vh` |

| Bildraster (Vergleich mehrerer Bilder) | **Feste Höhe: 26vh**, kein Seitenverhältnis erforderlich |

| Kleines Bild links + Text rechts | 1:1 oder 3:2 |

| Hauptansicht im Vollbildmodus | 16:9 + `max-height:64vh` |

| Kleine Illustrationen in gemischtem Text- und Bildlayout | 3:2 oder 3:4 |

**Verwenden Sie niemals `align-self:end` für Bilder** – diese rutschen an den unteren Rand der Zelle und werden von der Browser-Toolbar verdeckt. Verwenden Sie stattdessen einen Grid-Container mit `align-items:start` (in der Vorlage vordefiniert), um Bilder oben zu positionieren. Um Bilder unten in der linken Spalte anzuordnen, verwenden Sie eine Flexbox-Spalte mit `justify-content:space-between`.

Komponentendetails (Schriftarten, Farben, Raster, Symbole, Beschriftungen, Statistikkarten usw.) befinden sich in @components.md .

### Schritt 4 · Selbstprüfung anhand der Checkliste

Nachdem Sie die Checkliste erstellt haben, öffnen Sie unbedingt die Datei @checklist.md und überprüfen Sie jeden Punkt anhand der Anweisungen. Sie fasst alle im Iterationsprozess aufgetretenen Probleme zusammen, und alle Probleme der Stufe P0 (Emojis, Bildüberladung, Zeilenumbrüche im Titel, Schrifttrennung) müssen behoben werden.

Einige Punkte, denen besondere Aufmerksamkeit zu schenken ist:

1. **Hauptüberschriften müssen in Serifenschrift formatiert sein** – Werden sie als serifenlose Schriftart angezeigt, ist es zu 99 % wahrscheinlich, dass die Vorabprüfung in Schritt 3.0 fehlgeschlagen ist und die Klasse `h-hero` in template.html fehlt.

2. **Verwenden Sie im Bildraster ausschließlich `height:Nvh`, nicht `aspect-ratio` (dadurch wird das Raster fehlerhaft dargestellt).**

3. **Bilder sollten nicht an den unteren Seitenrand verschoben werden** — Verwenden Sie nicht `align-self:end`, sondern grid + `align-items:start` (siehe Schritt 3.2).

4. **Bilder müssen Standard-Seitenverhältnisse aufweisen** (16:10 / 4:3 / 3:2 / 1:1 / 16:9). Bilder mit ungewöhnlichen Seitenverhältnissen dürfen nicht kopiert werden.

5. **Chinesische Hauptüberschriften dürfen maximal 5 Zeichen lang sein und müssen `nowrap` verwenden (vermeiden Sie 1 Zeichen pro Zeile)**

6. **Verwenden Sie Lucide, keine Emojis.**

7. **Verwenden Sie Serifenschriften für Überschriften, serifenlose Schriften für den Fließtext und eine feste Schriftbreite für Metadaten.**

### Schritt 5 · Iteration

Auf Grundlage von Benutzerfeedback wurde das CSS der Vorlage modifiziert und ist nun hochgradig parametrisiert. 90 % der Anpassungen betreffen Inline-Styles (font-size:Xvw / height:Yvh / spacing:Zvh).

## Kernprinzipien des Designs (Philosophie)

Diese Prinzipien sind das Ergebnis von fünf Iterationen der Erstellung von PowerPoint-Präsentationen für ein Einzelunternehmen. Die Missachtung eines einzigen dieser Prinzipien beeinträchtigt die visuelle Wirkung.

1. **Zurückhaltung statt technischer Brillanz** — WebGL-Hintergründe sind nur auf Hero-Seiten sichtbar und auf normalen Seiten fast unsichtbar.

2. **Struktur vor Dekoration** — Keine Schatten, keine schwebenden Karten, keine Füllkästen; alle Informationen werden durch **große Schriftgröße + Schriftkontrast + Rasterabstand** vermittelt.

3. **Die Inhaltshierarchie wird durch Schriftgröße und Schriftart definiert:** – Serifenlose Schrift mit großer Schriftbreite = Hauptüberschrift, Serifenlose Schrift mit mittlerer Schriftbreite = Unterüberschrift, Serifenlose Schrift mit großer Schriftbreite = Zeilenvorschub, Serifenlose Schrift mit kleiner Schriftbreite = Fließtext, Schrift mit fester Breite = Metadaten

4. **Bilder haben Vorrang** — Schneiden Sie nur den unteren Teil des Bildes ab und achten Sie darauf, dass der obere und der linke/rechte Rand intakt bleiben; fixieren Sie das Raster mit `height:Nvh`, verwenden Sie nicht `aspect-ratio`, um es zu erweitern.

5. **Tempo mit Heldenseiten** — Der Wechsel zwischen Helden- und Nicht-Heldenseiten beugt einer Überanstrengung der Augen vor.

6. **Konsistente Terminologie** — Skills sollte als Skills übersetzt werden, nicht als eine Mischung aus Chinesisch und Englisch.

## Referenzen

Der visuelle Stil dieser Fertigkeit ist inspiriert von:

- Beitrag „Ein-Personen-Unternehmen: Von KI zerschlagene Organisationen“ (22. April 2026, Seite 27)

- Layout des *Monocle*-Magazins

- Eine Demo des Blogbeitrags „Dünnes Geschirr, dicke Fähigkeiten“ von YC-Präsident Garry Tan

Sie können als Stilanker verwendet werden.