Präsentationsgrafiken
Präsentationsgrafiken werden mit HTML-Seiten im 16:9-Format erstellt. Jede Seite ist eine 1920×1080 große HTML-Seite, die nach Anwendung des ausgewählten Stils von einem Headless-Browser in ein 3840×2160 PNG gerendert wird. Diese Grafiken können in Dokumente wie Projektvorschläge, Berichte und Genehmigungsunterlagen eingefügt werden.
KRITISCH — Bevor Sie eine Seite erstellen, MÜSSEN Sie die folgenden Spezifikationen mit dem Read-Tool lesen:
kirklin-slides-copy.md: Textregeln, gültig für alle Stilekirklin-slides-layouts.md: Inhalt und Layoutregeln für 27 Layoutskirklin-slides-components.md: Seitenstruktur und Komponentenklassennamen- Spezifikationen des gewählten Stils: Farben, Schriftgrößen und Abmessungen jedes Layouts. Dateiposition siehe Stiftabelle.
- Lesen Sie vor dem Erstellen, Rendern, Prüfen, Neu nummerieren, Exportieren, Vorschauen eines Stils oder dem Aufnehmen von Screenshots
kirklin-slides-workflow.md. - Lesen Sie vor dem Hinzufügen eines neuen Stils
kirklin-slides-new-style.md.
<skill-Verzeichnis> im Folgenden bezieht sich auf das Verzeichnis, in dem sich diese Datei befindet.
Stile
Ein Stil bestimmt die Farben, Schriftarten, Schriftgrößen und Dekorationen der Grafiken. Alle Stile teilen sich denselben Satz an Beispielseiten, Komponentenklassennamen und Textregeln. Derzeit sind folgende Stile verfügbar:
| Stil | Englischer Name | Anwendungsszenario | Spezifikation |
|---|---|---|---|
| Schwarzer Launch-Stil | launch-dark | Projektvorschläge, Präsentationen, Beamer-Vorträge | kirklin-slides-style-launch-dark.md |
Die Beispielseiten befinden sich in assets/pages/, die Stildateien der einzelnen Stile in assets/styles/<englischer Name>/style.css. Führen Sie node <skill-Verzeichnis>/scripts/preview-style.ts <englischer Name> Zusammenfassung.png aus, um eine Zusammenfassungsgrafik aller Beispiele eines Stils zu generieren.
Anwendungsszenarien
- Erstellen von Grafiken für Dokumente wie Projektvorschläge, Berichte und Genehmigungsunterlagen
- Ändern oder Ergänzen vorhandener Grafiken
- Erstellen einzelner Seiten wie Titelseiten, Zeitpläne oder Teamvorstellungen
- Exportieren aller Grafiken eines Dokuments in Dokumentenreihenfolge und Erstellen einer Zusammenfassungsgrafik
- Aufnehmen von Screenshots sozialer Beiträge und Einfügen in Grafiken
- Hinzufügen neuer Stile auf Basis vorhandener Benutzergrafiken, z. B. eines hellen Stils
Schnellentscheidungen
- Wenn das Projekt bereits eine
slides/style.css-Datei enthält, wird dieser Stil verwendet. Der erste Zeilenkommentar der Datei enthält den englischen Namen des Stils. Lesen Sie die entsprechende Stilspezifikation und legen Sie neue Seiten im selbenpages/-Verzeichnis ab. - Wenn der Benutzer einen Stil angibt, verwenden Sie diesen.
- Wenn das Projekt keine
style.css-Datei enthält und der Benutzer keinen Stil angibt, verwenden Sie den einzigen vorhandenen Stil. Bei mehreren Stilen empfehlen Sie einen basierend auf Inhalt und Kontext. Der Benutzer entscheidet nach Ansicht der Zusammenfassungsgrafik. - Wenn der Benutzer einen neuen Satz Grafiken bereitstellt und wünscht, dass zukünftige Grafiken in diesem Stil erstellt werden, fügen Sie gemäß
kirklin-slides-new-style.mdeinen neuen Stil hinzu. Bestehende Stile bleiben unverändert. - Bestimmen Sie zuerst den Titel jeder Seite und wählen Sie dann basierend auf dem Hauptinhalt ein Layout. Die folgende Tabelle zeigt die häufige Zuordnung von Inhalt zu Layout. Vollständige Details finden Sie in
kirklin-slides-layouts.md.
| Inhalt | Layout |
|---|---|
| Eine einzelne Schlüsselzahl | Große Zahl |
| Mehrere Zahlen | Zahlenkacheln |
| Mehrere parallele Schlussfolgerungen | Aufzählungspunkte |
| Mehrere Eigenschaften oder Fähigkeiten | Symbolleiste |
| Abwägung zwischen zwei Vorgehensweisen | Vergleich |
| Nach zwei Dimensionen gruppierte Elemente | Vier-Quadranten |
| Vergleich mehrerer Elemente in mehreren Aspekten | Tabelle |
| Vergleich numerischer Größen | Balken |
| Nach Zeitintervallen aggregierte Werte | Säulendiagramm |
| Veränderung einer Kennzahl über die Zeit | Liniendiagramm |
| Zusammensetzung einer Gesamtsumme | Ringdiagramm |
| Stufenweise abnehmende Phasen | Trichter |
| Meilensteine | Zeitleiste |
| Phasenweiser Plan | Roadmap |
| Wöchentliche Aufgaben | Gantt-Diagramm |
| Zwei gleichzeitige Aktivitäten | Zweigleisig |
| Aufeinanderfolgende Schritte | Ablauf |
| Ein Originalzitat | Zitat |
| Ein Bild mit Erklärung | Bild-Text |
| Externer Beitrag | Screenshot |
| Mitglieder und Aufgabenverteilung | Team |
| Partner | Logowand |
| Ein Code-Ausschnitt | Code |
Kern-Grenzen
- Die Leinwandgröße aller Stile beträgt 1920×1080, das gerenderte Ergebnis ist 3840×2160.
- Text befindet sich innerhalb des im Stil festgelegten Satzspiegels, der durch vier Randvariablen in
style.cssdefiniert wird. - Eine Seite enthält nur Struktur, Inhalt und aus Daten berechnete Prozentangaben. Farben, Schriftgrößen und andere Stile werden vom Stil bestimmt. Die Bedeutung von Farben wird durch die Stilspezifikation definiert.
- Jede Seite drückt ein einzelnes Thema aus. Bei umfangreichem Inhalt wird er auf mehrere Seiten aufgeteilt.
- Zahlen, Personennamen und Daten stammen aus Benutzermaterialien oder werden direkt daraus berechnet (z. B. Summen, Start-/Enddaten, Maximalwerte). Berechnete Zahlen werden in der Fußzeile mit der Berechnungsmethode vermerkt. Nicht in den Materialien enthaltene oder nicht berechenbare Zahlen werden nicht in die Grafik aufgenommen, auch keine Schätzungen.
- Platzhaltertexte in Beispielseiten werden vollständig durch Benutzerinhalte ersetzt. Nicht bereitgestellte Inhalte werden als ganzer Block gelöscht.
- Vergleichbare Diagramme verwenden denselben Maßstab, der in der Fußzeile angegeben wird.
- Titel sind vollständige Sätze, die mit einem Punkt enden. Zwischen chinesischen Schriftzeichen und englischen Wörtern/Zahlen wird ein Leerzeichen eingefügt. Wertebereiche werden mit „bis“ verbunden.
- Die Nummerierung der Grafiken im Dokument folgt der Reihenfolge ihres Auftretens. Nach dem Einfügen einer neuen Seite wird neu nummeriert.
- Skripte werden in TypeScript geschrieben. Hilfsskripte im Projekt verwenden ebenfalls TypeScript.
Beispiele
# SCHLECHT: Titel ist ein Thema, keine Leerzeichen zwischen Ziffern und chinesischen Zeichen, Bereich mit Tilde
Einführung in den Genehmigungsprozess
Jedes Modul benötigt 2~3 Personen
# GUT: Titel ist eine Schlussfolgerung, endet mit einem Punkt
Der neue Prozess verkürzt die Genehmigungszeit um zwei Tage.
Jedes Modul wird von 2 bis 3 Personen betreut
# SCHLECHT: Zwei Balkendiagramme mit unterschiedlichem Maßstab und Auswahl einer Farbe, die Ernsthaftigkeit signalisiert
# GUT: Zwei Balkendiagramme mit demselben Maßstab und Angabe in der Fußzeile. Die gewählte Farbe entspricht der Stilspezifikation für „Auswahl“.
Checkliste
- Nach jeder Änderung wurde die Seite erneut gerendert und das PNG mit dem Read-Tool überprüft.
- Das Prüfskript meldet keine Probleme. Es sind keine Platzhaltertexte aus Beispielseiten mehr vorhanden.
- Zahlen, Personennamen und Daten sind in den Benutzermaterialien auffindbar oder daraus berechenbar.
- Bildunterschriften im Dokument stimmen mit den Titeln überein. Die Nummerierung folgt der Reihenfolge des Auftretens.
- Wenn der Benutzer einen Export wünscht, wurde das Exportskript fehlerfrei ausgeführt und die Zusammenfassungsgrafik überprüft.
- Nach Änderungen an Skripten, Beispielseiten oder Stilen dieses Skills muss
pnpm --dir <skill-Verzeichnis> testvollständig bestanden werden.
Nicht im Umfang dieses Skills
- PPTX-Dateien und Online-Präsentationen
- Poster, Social-Media-Karten und Webdesign
- Verfassen des eigentlichen Dokumenttextes
Referenzen
| Datei | Beschreibung |
|---|---|
kirklin-slides-copy.md | Textregeln |
kirklin-slides-layouts.md | Layoutverzeichnis |
kirklin-slides-components.md | Seitenstruktur und Komponenten |
kirklin-slides-workflow.md | Arbeitsablauf und Skriptnutzung |
kirklin-slides-new-style.md | Hinzufügen neuer Stile |
kirklin-slides-style-launch-dark.md | Schwarzer Launch-Stil |
assets/pages/ | Gemeinsame Beispielseiten für 27 Layouts |
assets/styles/ | Stildateien der einzelnen Stile |
scripts/use-style.ts | Stil für ein Projekt festlegen |
scripts/add-page.ts | Eine Beispielseite nach Layout kopieren |
scripts/render.ts | Seiten rendern |
scripts/check-pages.ts | Text und Layout prüfen |
scripts/export-slides.ts | Alle Grafiken eines Dokuments und Zusammenfassungsgrafik exportieren |
scripts/preview-style.ts | Zusammenfassungsgrafik eines Stils generieren |
scripts/post-shot.ts | Screenshot eines sozialen Beitrags aufnehmen |