tadyuh76/slide-deck

Was macht slide-deck?

Ein Deck ist hier ein kleines React-Projekt, das 1920x1080 große Folien rendert, plus eine Pipeline, die daraus ein natives PowerPoint (editierbarer Text, Sprechernotizen), ein PDF und ein Sprecher-Skript erstellt. starter/ ist ein vollständig funktionierendes Deck (12 Beispiel-Folien auf Vietnamesisch, blaues Thema, je ein Beispiel jeder Komposition). Kopieren Sie es, ersetzen Sie den Inhalt, behalten Sie das System.

Lesen Sie das Briefing zuerst nach drei Dingen: Wer ist im Raum (gehen Sie von keinen Vorkenntnissen aus, sofern nicht anders angegeben), wie lang der Slot ist und wie die eigene Gliederung des Sprechers aussieht. Die Gliederung des Sprechers bestimmt Reihenfolge und Inhalt. Ihre Aufgabe ist Klarheit und Optik, nicht neue Behauptungen.

1. Start

cp -R "<dieses Skill-Verzeichnis>/starter" "<Projekt>/<Deck-Name>"
cd "<Projekt>/<Deck-Name>/deck" && npm install && npx playwright install chromium
npx vite                                                # Dev-Server, Port in vite.config.ts

Dann die Namen setzen: tools/deck-name.txt (Dateiname von PPTX und PDF), Titel in deck/index.html, die Überschrift in deck/script-doc.mjs, die Abschnittsnamen in deck/src/deck/types.ts (ACTS), und den Fußzeilentext und Logos in Chrome (deck/src/deck/Deck.tsx). Wählen Sie einen freien Port in deck/vite.config.ts, falls ein anderes Deck läuft.

Projektstruktur:

• deck/src/slides/*.tsx eine Datei pro Folie oder Gruppe, Reihenfolge in index.ts. Jede exportiert eine SlideDef (id, title, act, minutes, notes, Component).
• deck/src/ui/atoms.tsx gemeinsame Bausteine: Bg, Header, HaloArt/Art, Feature (das hervorgehobene Panel), IconTile, Stat, Source, LogoTile, AppIcon. Links.tsx zeichnet Verbindungslinien mit langsam wandernden Punkten. World.tsx ist eine gepunktete Weltkarte aus echten Ländern.
• deck/src/index.css enthält die Farb-Tokens. Ändern Sie das Thema durch Anpassen von --accent, --accent-ink, den Hintergrundwerten und den rgba-Tönungen, nicht durch Hinzufügen eines zweiten Designs.
• tools/ Kunstgenerierung, Build, Veröffentlichung.

2. Inhaltsregeln (was der Besitzer korrigiert hat, in der Reihenfolge der Häufigkeit)

1. Folgen Sie dem Dokument des Sprechers. Abschnittsreihenfolge, Wortlaut von Definitionen und jede Zahl stammen daraus. Wenn die Gliederung nur eine Überschrift hat, fügen Sie das Minimum aus einer Primärquelle hinzu, verlinken Sie es in Source und teilen Sie dem Besitzer mit, welche Folien Sie ausgefüllt haben. Geben Sie niemals eine Anzahl an, die die Liste nicht hergibt (eine Liste mit 30 Namen, die 28 enthält: Zeigen Sie die Liste, lassen Sie die Zahl weg, berichten Sie es).
2. Überschriften sind ganz einfach. Eine Überschrift benennt die Folie in Worten, die das Publikum bereits verwendet: „5 cách thu thập dữ liệu xuyên biên giới", "Yêu cầu trong tình huống khẩn cấp". Clevere oder komprimierte Zeilen werden abgelehnt. Eine Zeile, bis zu etwa 40 Zeichen bei 66 px; die zweite Hälfte in Akzentfarbe.
3. Minimaler Text, klare Sprache. Eine Idee pro Karte, ein paar kurze Zeilen. Gebräuchliche englische Begriffe in Klammern oder als kleine zweite Zeile („service provider"). Ziffern, keine Zahlenwörter. Kein kleines Etikett über einer Überschrift, keine Doppelpunkte oder Mittelpunkte als Dekoration, keine werbliche Formulierung.
4. Alles übersetzen aus einem Ausgangsdeck in die Sprache des Publikums; Eigennamen und den englischen Begriff dort behalten, wo Amtsträger ihn antreffen werden.
5. Sprechernotizen enthalten den vollständigen Text. Die Folie behält die Kurzform; die Notizen enthalten die vollständigen Sätze des Sprechers aus der Gliederung, damit nichts verloren geht. Summieren Sie minutes gegen den Slot und melden Sie eine Überschreitung.
6. Echte Logos für echte Organisationen (offizielle Dateien, niemals ein generiertes Nachahmung); dokumentieren Sie, woher jedes stammt, in assets/logos-src/SOURCES.md. Organisationslogos, die der Besitzer anfordert, erscheinen auf jeder Folie in Chrome, groß auf Titel- und Schlussfolie.
7. Faktencheck im Hintergrund. Schicken Sie einen Recherche-Agenten für die Fakten, die Sie hinzufügen (Daten, Artikelnummern, Gesetzesnummern, Zählungen), und schreiben Sie das Ergebnis in docs/facts.md mit einer URL pro Eintrag. Wo die eigene Zahl des Sprechers von öffentlichen Quellen abweicht, behalten Sie seine und melden Sie die Abweichung.

3. Grafiken

Jede Inhaltsfolie hat eine Illustration. Nur-Icon-Folien wurden als langweilig bezeichnet. Kleine Lucide-Icons sind nur als Zeilenmarkierungen in Ordnung, wenn die Folie auch Kunst hat.

• Eine Familie: kompakte pseudo-3D-Objekte aus flachen Farbeebenen, keine Verläufe oder Glanz, eine Farbfamilie plus einen kleinen gelben Marker. Die Stilreferenzblätter sind assets/ref/blue-indicators.png und green-indicators.png. Jede Kachel auf einem Blatt muss selbst flach sein: eine glänzende Kachel zieht neue Bilder zu Verläufen hin. Für eine andere Farbe färben Sie ein Blatt um (tools/blue_ref.py), ändern Sie die Palette in tools/art.mjs, generieren Sie einen ersten Batch, dann bauen Sie das Blatt aus 16 Ihrer eigenen besten Ergebnisse neu und verwenden Sie es von da an (das blaue Blatt wurde so erstellt).
• Fügen Sie eine Zeile pro Bild zu tools/art-list.tsv hinzu (Name<TAB>Konzept). Ein Konzept ist ein klares Objekt mit höchstens zwei unterstützenden Details und keinem Text: „ein versiegelter Umschlag mit einem Vorhängeschloss an der Klappe und einem durchgestrichenen Augenabzeichen".
• P=4 bash tools/art-batch.sh generiert, was fehlt, mit dem Bildwerkzeug der Codex CLI (ca. 80 s pro Bild; erfordert installiertes und angemeldetes codex, Modell in tools/art.mjs). Führen Sie es im Hintergrund aus und schreiben Sie weiter Folien. Manche Läufe schlagen stillschweigend fehl: Wenn es fertig ist, überprüfen Sie, ob jeder Name existiert, und führen Sie es für die fehlenden erneut aus.
• docker build -q -t deck-pack -f tools/Dockerfile tools && docker run --rm -v "$PWD":/w -w /w deck-pack python tools/art_finish.py schneidet sie in deck/public/art/*.webp zu. Verwenden Sie mit <HaloArt name="..." size={...} />.
• Sensible Themen (Kindeswohlgefährdung, Selbstmord, Terrorismus) erhalten schützende Symbole: einen Regenschirm, einen Schild, eine Rettungsboje, ein Warnschild.
• Karten stammen aus World.tsx (echte Formen), niemals aus einem Bildmodell. Diagramme (Venn, Flüsse, Hubs) sind SVG in der Folie.

4. Komposition: Keine zwei gleichen Nachbarn

Ein Deck, in dem jede Folie eine Reihe gleicher Karten ist, wurde zurückgesandt („jede Folie hat ein sehr ähnliches Layout"). Geben Sie jeder Folie die Form, die ihr Inhalt hat. Das Starter-Deck enthält ein ausgearbeitetes Beispiel für jede:

Inhalt	Komposition	Starter-Folie
Einige Teile in Reihenfolge	Schritte, die einen Pfad hinaufsteigen, große blasse Ziffern	s02-agenda.tsx
Eine übergeordnete Idee plus mehrere andere	Bento: eine hohe hervorgehobene Kachel und ein 2x2	Terms in s03-terms.tsx
Ein Prozess	Pipeline: nummerierte Stationen auf einer Linie, die in ein Ergebnisfeld fließen	s05-preserve.tsx
Mehrere Wege zu einer Sache	Hub und Speichen	s06-channels.tsx
Parallele Arten mit denselben Attributen	Vollbreite Zeilen: Bild, Frage, Name, Inhalte	DataTypes in s03-terms.tsx
Optionen mit einer Warnung	Kachelraster plus ein Feature-Panel	Emergency in s08-requests.tsx
Eine Kette von Übergaben	Fluss von Knoten mit Pfeilen (Link aus ui/Links.tsx)	keines im Starter
Zwei Alternativen	Zwei breite Paneele	keines im Starter
Überlappende Bereiche mit gemeinsamem Kern	Venn, Beschriftungen auf Führungslinien	Directorate in s11-venn.tsx
Orte	Gepunktete Karte mit Pins oder leuchtenden Ländern, Liste daneben	s17b-map-list.tsx
Ein Zentrum mit vier Funktionen	Scheibe in der Mitte, Elemente in den Ecken	AspDesk in s14-corners-bridge.tsx
Zwei Seiten und was dazwischen passiert	Brücke: zwei Ufer, Fahrspuren dazwischen	Gateway in s14-corners-bridge.tsx
Zahlen, die einen Punkt beweisen	Feature-Panel mit Stat	keines im Starter

Wenn die eigene Folie des Sprechers eine Diagramm-Idee enthält (ein Venn, eine Liste neben einer Karte), behalten Sie Absicht und Inhalt und zeichnen Sie es neu; behalten Sie nicht seine Gestaltung.

5. Text-Handwerk (jeder dieser Punkte war eine abgelehnte Bildschirmaufnahme)

• Nichts springt. In einem Satz von Karte beginnt dasselbe Element in jeder Karte auf derselben Höhe. Machen Sie Titel gleich viele Zeilen (umformulieren oder jedem Titel zwei Zeilen geben), dann stapeln Sie den Rest direkt darunter. Keine leeren Plätze und kein margin-top: auto-Loch zwischen einem Titel und seinem Text.
• Zeilen nach Sinn brechen. .slide ist white-space: pre-line; schreiben Sie \n am Ende einer Phrase: „Chuỗi bảo quản\nchứng cứ", niemals „Chuỗi bảo\nquản chứng cứ". Halten Sie jede manuell gesetzte Zeile kurz genug, dass der Browser sie nie wieder umbricht; wenn sie umbricht, kürzen Sie die Zeile oder verbreitern Sie die Box. Namenslisten erhalten ebenfalls manuell gesetzte Zeilen (geschützte Leerzeichen haben das PowerPoint zerstört).
• Eine Größe pro Zeile. Eine große Zahl und ihre Einheit sind zwei Blöcke (Stat); ein Akzentwort, das eine Beschreibung anführt, ist seine eigene Zeile.
• Ränder. Der Inhalt bleibt innerhalb von 120 px links und rechts und frei vom Logo-Streifen (oben 30 bis 98 px). Überprüfen Sie Beschriftungen auf Karten und Diagrammen auf die rechte Kante.
• Folien öffnen sich vollständig. Keine Eingangsanimation; höchstens eine Aufdeckung per Klick, nur wenn die Aufdeckung der Punkt ist. Hintergrundbewegung (fließende Punkte, der Titel-Hintergrund) ist in Ordnung.
• Keine Fortschritts- oder Abschnittsnummern-Widgets auf Folien, sofern nicht verlangt; die Fußzeilenleiste reicht.

6. Build und Prüfung

zsh tools/release.sh     # etwa 5 Minuten: release/ erhält Deck/ (Web), .pptx, .pdf, Kich-ban-trinh-bay.pdf

Die Veröffentlichung speichert die Datei über Microsoft PowerPoint erneut, damit die Schriftarten eingebettet sind. Es beendet zuerst PowerPoint: Überprüfen Sie, dass nichts Ungespeichertes offen ist, und es belegt einen Sperr-Ordner in /tmp, sodass zwei Sitzungen nie gleichzeitig erneut speichern. Ohne PowerPoint auf einem Mac überspringen Sie diesen Schritt in tools/release.sh; das Deck öffnet sich trotzdem, mit Schriftarten, die auf dem präsentierenden Rechner installiert sein müssen.

Die Prüfung ist Teil der Aufgabe, jede Runde:

1. cd deck && npx vite build && node export.mjs ../tmp/export rendert jede Folie in tmp/export/sNN.png.
2. Betrachten Sie jede Folie in voller Größe, ein Bild nach dem anderen (verkleinert auf 1600 px Breite). Kontaktabzüge verbergen umbrochene Zeilen, Text, der Grenzen berührt, und falsch ausgerichtete Reihen. Suchen Sie nach: Zeilen, die umgebrochen sind, wo Sie sie nicht gebrochen haben, Text nahe oder über einer Kante, Überschriften, die Logos berühren, ungleichmäßige Anfänge über Karten hinweg, fehlende Bilder (ein leeres umrandetes Quadrat), überlappende Beschriftungen.
3. Nach der Veröffentlichung betrachten Sie tmp/lo/p-NN.png (das von LibreOffice ausgelegte PowerPoint) für die geänderten Folien. Hier zeigen sich überlaufende Textfelder. LibreOffice rendert Schriftarten etwas breiter als PowerPoint, daher ist eine knappe Fehlstelle dort ein echtes Risiko.
4. Korrigieren, neu bauen, erneut prüfen. Sagen Sie klar, was Sie geprüft haben und was nicht.

Kopieren Sie dann release/ in einen benannten Ordner auf dem Desktop, dienen Sie release/Deck auf localhost (docker run -d -p 127.0.0.1:<port>:80 -v "$PWD/release/Deck":/usr/share/nginx/html:ro nginx:alpine), und öffnen Sie den Ordner, wenn Sie dazu aufgefordert werden.

7. Berichterstattung

Beginnen Sie mit dem, was fertig ist und wo. Listen Sie dann die Entscheidungen auf, die dem Besitzer oder Sprecher gehören: alles, was Sie über die Gliederung hinaus hinzugefügt haben, jede Zahl, die Sie behalten haben, die Quellen widersprechen, jede Anzahl, die nicht aufgeht, die Laufzeit gegen den Slot. Klare Worte, keine Datei- oder Funktionsnamen.