psi-slides · zurück zur Startseite · This page in English
Loslegen
Eine Vorlesung ist eine Textdatei, source.md.
Zwei Wege machen daraus vier Webseiten, die Ansichten: die Folien für den
Saal, ein Cockpit für die Vortragenden und zwei Handouts. Beide schreiben
dieselben vier Ansichten daneben.
Option 1: Man lädt eine App
herunter, die die Dateien auf Knopfdruck baut. Man öffnet darin eine
source.md, und nach jedem Speichern baut sie neu, oder man
lässt Neue Vorlesung… eine erste anlegen. Sonst muss nichts
installiert werden, und ein Terminal braucht es nicht: Die App bringt ihr
eigenes psi-slides mit.
Option 2: Man baut die Ansichten auf
der Kommandozeile. Dieser Weg
beginnt mit einer Kopie des Repositorys und einem npm install.
Danach kann ein Server Vorlesungen bauen, ohne dass jemand zusieht, und ein
Programmierassistent wie Claude Code findet im Repository
Anleitungen, die ihm das Format beschreiben.
Die App
Die source.md einer Vorlesung öffnen oder auf
das Fenster ziehen, und die vier Ansichten sind gebaut. Das Fenster neben
dem Texteditor offen lassen, und die App baut sie nach jedem Speichern
erneut.
Eine Zeile sagt, ob der letzte Build (das Bauen der Ansichten aus der source.md) funktioniert hat, und
über vier Knöpfe öffnet man die Ansichten, die er geschrieben hat. Ein Projekt ist nicht einzurichten, und vor dem ersten Build sind keine Einstellungen
auszufüllen.
Darunter zählt das Fenster, was in der Vorlesung steckt – Abschnitte, Folien, Bilder, Zeichnungen und wie viele Wörter ins Handout gegangen sind und wie viele in die Sprechernotizen – sodass der Umfang eines Vortrags ablesbar ist, ohne ihn zu öffnen.
Herunterladen
Das Paket für das eigene System aus den dreien unten holen. Sie gehören zum neuesten Release von psi-slides, und die App baut eine Vorlesung genau so wie die Kommandozeile derselben Version.
Windows 64 Bit (experimentell)
Installationsprogrammläuft ohne Rückfrage durch und startet die Apppsi-slides-builder-win-x64.exe
macOS Apple Silicon
Disk-Imageöffnen, die App in „Programme“ ziehenpsi-slides-builder-mac-arm64.dmg
Linux 64 Bit (experimentell)
AppImageausführbar machen und startenpsi-slides-builder-linux-x86_64.AppImage
Der erste Start
Windows und Linux sind experimentell. Diese beiden Pakete werden automatisch gebaut und wurden noch auf keinem echten Windows- oder Linux-Rechner gestartet. Wer eines ausprobiert, meldet bitte in einem Issue, ob es lief. Das macOS-Paket wurde auf einem echten Mac benutzt.
Die Pakete sind nicht signiert, außer dem für macOS: Das wird vor dem Hochladen von Hand signiert und notarisiert – Apples eigene Prüfung. Ist diese Signatur noch nicht erfolgt, sagt macOS beim Doppelklick, der Entwickler lasse sich nicht überprüfen: die App einmal mit Rechtsklick und Öffnen starten, dann ist die Warnung weg. Windows zeigt einmal seine SmartScreen-Warnung – Weitere Informationen, dann Trotzdem ausführen. Ein AppImage muss erst ausführbar sein.
Was sie ist und was nicht
Schlägt ein Build fehl, zeigt das Fenster die Meldung des Builds selbst, mit der Zeile in der Quelle. Die vier Ansichten behalten den letzten Build, der lief; ein kaputtes Speichern nimmt einem nicht mitten in der Vorlesung die Folien weg.
Es gibt zwei Schalter. Setzt man Die Ansichten über eine lokale Webadresse öffnen, bekommt man einen kleinen lokalen Server: Eingebettete YouTube- und Vimeo-Player laufen aus einer Datei heraus nicht, sie brauchen eine Adresse. Unter Die Ansichten öffnen in wählt man Chrome oder Edge, worin psi-slides getestet wird, oder das, womit das System HTML öffnet.
Die App ist kein Markdown-Editor. Die Vorlesung schreibt man in dem Texteditor, den man ohnehin benutzt; das Fenster beobachtet die Datei. Es gibt keine geteilte Ansicht, keine Vorschau daneben, keinen Git-Client und keine Stelle, an der man Build-Befehle tippt.
Die zwei Wege sind auch nicht zwei Werkzeuge: Die App führt dasselbe
build.js auf derselben source.md aus und erzeugt
dieselben vier Ansichten, und Als PDF exportieren… schreibt
dieselben drei PDFs wie die Kommandozeile. Nichts verlässt den Rechner. Kein
Konto, keine Telemetrie, kein Update-Aufruf, kein Netzzugriff – und die
lokale Webadresse oben hängt an 127.0.0.1, erreichbar von
diesem Rechner und von sonst nichts. Das Fenster gibt es auf Deutsch und Englisch: Beim ersten Start entscheidet die Systemsprache, danach eine Einstellung.
Die erste eigene Vorlesung
Neue Vorlesung…, auf dem Startbildschirm der App und im Menü „Datei“, fragt nach einem Ordnernamen und einem Ort. Dort legt es eine Starter-Vorlesung an – eine Titelfolie, eine Textfolie und eine kleine Abbildung, die der Diagramm-Editor öffnen kann – und öffnet sie, schon gebaut. Den Text im eigenen Editor ändern, speichern, und die vier Ansichten ziehen nach.
Hilfe ▸ Wie man eine Vorlesung schreibt öffnet das Tutorial (englisch) im Browser: eine Vorlesung über das Schreiben von Vorlesungen, mit ihrer Quelle zum Abschauen.
Wer die Beispielvorlesungen auf dem eigenen Rechner haben will, nimmt
das Release-Archiv,
psi-slides.zip. Darin stehen die fünf Vorlesungen, auf die die
Startseite verweist, schon gebaut, mit ihren source.md-Dateien
daneben. Entpacken und lectures/tutorial/audience.html
doppelklicken; installiert werden muss dafür nichts.
Die Kommandozeile
Derselbe Build wie in der App, in ein Terminal getippt. Er braucht Node 22 oder neuer und sonst nichts: kein LaTeX, kein Pandoc, keinen Server, nichts systemweit Installiertes. Nicht einmal git: Der Clone unten ist der schnellste Weg zu den Dateien, und das Release-Archiv enthält dasselbe Werkzeug als ein ZIP.
Das Tutorial bauen
Man führt npm install einmal aus. Es holt die Schriften,
die psi-slides in eine Vorlesung einbettet, und die Handvoll Pakete, die der
Build benutzt – alles in einen Ordner node_modules neben
build.js.
Die vier Ansichten erscheinen als HTML-Dateien neben der
source.md, und sie sind das, was man weitergibt: Jede trägt
ihre Schriften, Bilder und ihren Code selbst und lädt beim Öffnen nichts
nach.
Wird stattdessen ein PDF verlangt, schreibt
--slides-pdf die Folien als eines,
--print-pdf und
--print-notes-pdf die beiden Handouts auf A4.
Diese drei brauchen einen Chromium-basierten Browser: Der Build sucht ihn in $PSI_CHROME, dann im Playwright-Cache, dann als systemweites Chrome. Die Desktop-App druckt mit ihrem eigenen und braucht nichts zusätzlich.
git clone https://github.com/UBA-PSI/psi-slides
cd psi-slides
# einmalig: die Schriften und die Abhängigkeiten des Builds
npm install
# alle vier Ansichten neben source.md bauen, dann die Projektion öffnen
node build.js lectures/tutorial/source.md
open lectures/tutorial/audience.html # macOS; sonst xdg-open oder der Browser
# die Folien als PDF, eine Seite je Schritt; die zwei Handouts als A4-PDF
node build.js lectures/tutorial/source.md --slides-pdf
node build.js lectures/tutorial/source.md --print-pdf --print-notes-pdf
Eine eigene Vorlesung
--new legt einen Vorlesungsordner
an, mit ausgefülltem Einstellungsblock oben, einer Titelfolie, einer
Textfolie und einer kleinen Abbildung – dieselbe Starter-Vorlesung,
die Neue Vorlesung… in der App anlegt. Sie umschreiben ist
leichter, als mit einer leeren Datei anzufangen.
Was hineingehört, lehrt das Tutorial (englisch); ein deutsches Muster zum Abschauen ist das Kurzbeispiel mit sechs Folien.
# einen neuen Vorlesungsordner anlegen, Einstellungsblock inklusive
node build.js --new my-lecture
# bauen und bei jedem Speichern neu bauen
node build.js lectures/my-lecture/source.md --watch
Während man schreibt
Mit --watch baut der Build bei jedem Speichern
neu und lädt jeden offenen Tab neu, sodass Texteditor, Projektion und
Cockpit gleichzeitig sichtbar bleiben. Das tut die App von sich aus.
--serve ist für das, was eine Datei auf der Platte
nicht kann: eingebettete YouTube- und Vimeo-Player abspielen.
lint.js prüft eine Vorlesung vor der Weitergabe, hat in der App
keinen Knopf und wohnt hier.
# bei jedem Speichern neu bauen, jeden offenen Tab neu laden
node build.js lectures/tutorial/source.md --watch
# dasselbe, über http auf diesem Rechner, für eingebettete Player
node build.js lectures/tutorial/source.md --watch --serve
# Chunk-IDs, Wortbudgets, offene :::-Blöcke, zu große Dateien
node lint.js lectures/tutorial/source.md
Von einem Rechner ohne alles
Die Schritte führen von diesem Rechner zu einem gebauten
Tutorial. Der Reihe nach
durchgehen: Wer npm install vor dem cd aufruft, installiert in den falschen
Ordner.
Die App oben braucht nichts davon.
Wer noch nie Node installiert oder ein Terminal benutzt hat
Node installieren
Auf nodejs.org gehen. Der Knopf bietet
die LTS-Fassung – die mit Langzeitunterstützung – in der richtigen Datei
für den Rechner an, den man vor sich hat; die nehmen. Auf macOS bekommt man
ein .pkg: doppelklicken, durch den Installer klicken, das
Passwort eingeben, wenn danach gefragt wird. Auf Windows bekommt man ein
.msi: doppelklicken, die Voreinstellungen übernehmen, das
Häkchen bei den Werkzeugen für native Module in Ruhe lassen. psi-slides
braucht diese Werkzeuge nicht.
Wer schon einen Paketmanager benutzt: brew install node auf
macOS und winget install OpenJS.NodeJS.LTS auf Windows tun
dasselbe.
Ein Terminal öffnen
Auf macOS Command-Leertaste drücken, terminal tippen,
Return. Auf Windows das Startmenü öffnen und terminal tippen:
Windows Terminal, wenn es erscheint, sonst PowerShell. Man bekommt ein
Fenster mit einem Cursor darin. Man tippt eine Zeile, drückt Return, und es
antwortet.
node --version
Die Antwort ist eine Versionsnummer. Alles ab v22 passt, und ein frisches
LTS liegt deutlich darüber. Kommt stattdessen command not found
oder ist nicht erkannt, das Fenster schließen und ein neues
öffnen: ein Terminal, das schon lief, als Node installiert wurde, hat es
noch nicht gesehen.
Die Dateien holen
Wer git hat, nimmt einen git clone, sonst das
Release-Archiv –
psi-slides.zip, unter diesem Namen am neuesten Release auf der
Release-Seite,
mit den Beispielvorlesungen schon gebaut. Das ZIP
entpacken wie jeden anderen Download; auf beiden Systemen genügt ein Doppelklick. Man
bekommt einen Ordner, dessen Name mit psi-slides anfängt, und
dieser Ordner ist das ganze Werkzeug. Irgendwohin legen, wo man ihn
wiederfindet, denn gleich muss man das Terminal darauf zeigen.
Unter Windows das .zip wirklich entpacken und nicht nur per
Doppelklick öffnen: Windows zeigt den Inhalt eines ZIP wie einen Ordner an,
aber darin lassen sich keine Befehle ausführen.
Das Terminal auf den Ordner zeigen
cd psi-slides
Die cd-Zeile muss benennen, wo der Ordner tatsächlich liegt:
unter Windows etwa cd C:\Users\Name\Downloads\psi-slides. Statt
den Pfad zu tippen, cd und ein Leerzeichen tippen und dann den
Ordner aus dem Dateimanager ins Terminalfenster ziehen – der Pfad schreibt
sich selbst.
Holen, was der Build benutzt
npm install
Man führt npm install einmal aus, in diesem Ordner, und es
dauert ein paar Sekunden. Es holt die Schriften, die psi-slides in eine Vorlesung
einbettet, und die Handvoll Pakete, die der Build benutzt. Alles landet in
einem Ordner node_modules neben build.js:
systemweit wird nichts installiert, und die gebauten Vorlesungen öffnen
sich auch ohne diesen Ordner.
Das Tutorial bauen
node build.js lectures/tutorial/source.md
Der Build berichtet, was eingebettet wurde – die Bilder, die Schriften, die QR-Codes, die gesetzten Formeln – und endet damit, was er geschrieben hat. Dieselbe Zeile funktioniert auf Windows und macOS, Schrägstriche eingeschlossen: Node nimmt sie auf beiden.
Wrote lectures/tutorial/print.html, lectures/tutorial/print-notes.html, lectures/tutorial/audience.html, lectures/tutorial/speaker.html (12 columns, 61 chunks)
Öffnen
Doppelklick auf lectures/tutorial/audience.html. Es öffnet
sich im Browser, und ein Browser ist alles, was es braucht: mit ? bekommt man die
Tastenliste, mit S das Cockpit. Die Datei an jemanden mailen, der
nichts davon installiert hat, und sie funktioniert trotzdem.
Für Linux: all das kommt aus dem Paketmanager.
Distributionspakete hinken manchmal mehrere Versionen hinterher, ein
node --version lohnt sich also trotzdem.
Schreiben mit einem KI-Assistenten
psi-slides bringt sechs Skills mit: Anleitungen, die einem
Sprachmodell das Quellformat und die Maschinerie dahinter beschreiben. Mit
ihnen entwirft ein Assistent aus den eigenen Notizen die source.md
einer Vorlesung oder überarbeitet eine vorhandene. Gebaut wird sie weiter mit der App oder mit
build.js, und lint.js sagt, was nicht zum Format
passt.
Die Skills nutzen das offene
Agent-Skills-Format: Ein
Skill ist ein Ordner mit einer SKILL.md darin, Markdown unter
einem kurzen Kopf, der den Skill benennt und sagt, wann er gebraucht wird.
Anthropic hat das Format entwickelt und als offenen Standard
veröffentlicht. Die
Liste der Werkzeuge auf
agentskills.io, die es lesen, nennt Claude Code und claude.ai, außerdem
unter anderem Gemini CLI, Codex von OpenAI, GitHub Copilot und Cursor. Einem
Werkzeug ohne Skill-Unterstützung lässt sich eine SKILL.md
trotzdem als Anleitung mitgeben, eingefügt oder angehängt wie jeder andere
Text.
Herunterladen
Das erste Archiv enthält alle sechs, für ein Werkzeug, das einen Ordner mit Skills liest. Die einzelnen sind für ein Werkzeug, das einen Skill nach dem anderen annimmt, etwa claude.ai, wo jeder Upload ein Skill ist. Zwei der sechs handeln vom Schreiben einer Vorlesung; die anderen vier beschreiben, wie die Maschinerie gebaut ist, und sind vor allem für alle, die an psi-slides selbst arbeiten.
Eine Vorlesung schreiben
psi-slides-authoring Das Quellformat: Chunk-Typen, die:::-Blöcke, Aufdeckschritte, Notizen und der Einstellungsblock.
psi-slides-authoring.zip
psi-slides-figures
Abbildungen als Text in einem ::: draw-Block, mit der Anleitung zum Anordnen dabei.
psi-slides-figures.zip
An psi-slides arbeiten
psi-slides-decoration Titelfolien, Abschnittstrenner, Karten, Hintergründe und Overlays, und wie der Build sie zeichnet.psi-slides-decoration.zip
psi-slides-appearance
Schriften, Farbschemata, die Ansichtsvorgaben und der style:-Block.
psi-slides-appearance.zip
psi-slides-media
Video, YouTube- und Vimeo-Player, Linkadressen mit QR-Codes, die Live-Demo.
psi-slides-media.zip
psi-slides-prompter
Der Live-Prompter im Cockpit, seine Einstellungen und sein Protokoll.
psi-slides-prompter.zip
Wohin die Ordner gehören, ist von Werkzeug zu Werkzeug verschieden und steht in dessen eigener Dokumentation. Die beiden folgenden Abschnitte sind Beispiele, für Claude Code und für claude.ai.
In Claude Code
Ein Skill ist ein Ordner mit einer SKILL.md
darin. Nach ~/.claude/skills/ entpackt, stehen die sechs in
jedem Projekt auf diesem Rechner bereit; in das
.claude/skills/ eines Vorlesungs-Repositorys entpackt, gehören
sie zu diesem Repository.
Eine laufende Sitzung bemerkt neue Skills. Gab es den
Ordner beim Start der Sitzung noch nicht, holt /reload-skills
sie nach. Eine Kopie von psi-slides braucht nichts davon: Die sechs liegen
in ihrem eigenen .claude/skills/.
# alle sechs, für jedes Projekt auf diesem Rechner
mkdir -p ~/.claude/skills
unzip psi-slides-skills.zip -d ~/.claude/skills
# oder für ein Vorlesungs-Repository, in dessen Ordner ausgeführt
mkdir -p .claude/skills
unzip psi-slides-skills.zip -d .claude/skills
Auf claude.ai und in der Claude-Desktop-App
Skills brauchen dort die Codeausführung. Unter Settings ▸ Capabilities muss Code execution and file creation eingeschaltet sein; in einem Team- oder Enterprise-Tarif schaltet sie ein Owner für die Organisation ein. Dann Customize ▸ Skills öffnen, + drücken, Create skill und danach Upload a skill wählen und eines der einzelnen Archive auswählen. Das für jeden gewünschten Skill wiederholen und jeden in derselben Liste einschalten.
Diese Schritte stehen so im Hilfeartikel von Anthropic (englisch); Menünamen ändern sich, und der Artikel ist die Stelle zum Nachsehen, wenn einer nicht dort ist, wo er stehen soll. Dort eingeschaltete Skills laden auch in Claude Code, wenn es mit demselben Konto angemeldet ist. Die Skills nennen Dateien im psi-slides-Repository und geben zu jeder die Adresse an; ob Claude diese Adressen auf claude.ai öffnen kann, hängt von der Netzwerkeinstellung der Codeausführung ab.
Zum Weiterlesen
- Was psi-slides ist Die Startseite: eine Vorlesung, wie der Raum sie sieht und wie die Lesenden sie bekommen, und warum das dieselbe Datei ist.
- Wie psi-slides sich vergleicht (englisch) Beamer, reveal.js, Quarto, Marp, Slidev, PowerPoint und andere, in beide Richtungen, einschließlich der Stellen, an denen psi-slides verliert.
- Figures you write (englisch) Die Begründung für die Abbildungssprache, dann das Handbuch: eine Abbildung Zeile für Zeile aufgebaut, und jede Anweisung.
- Das Repository Die README erklärt das Format und sagt, wofür das Werkzeug taugt und wofür nicht.
- Versionen
Nur eine Major-Version darf ändern, wie eine bestehende
source.mdbaut. 2.0.0 ist eine: Eine Vorlesung für 1.0.0 kann eine Änderung brauchen, und die Liste „Breaking“ am Kopf von 2.0.0 im Changelog sagt, welche.