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.

psi-slides Builder
Das Builder-Fenster mit einer offenen Vorlesung: der Ordnername und der Pfad zur source.md, die Zeile „Ready. Built at 21:25 in 0.2 s.“, ein Knopf „Build now“ neben einem gesetzten Häkchen „Build again whenever source.md is saved“, vier Knöpfe für die Projektion, das Cockpit und die beiden Handouts, Links zum Öffnen der source.md im Texteditor und zum PDF-Export und darunter eine Zählung der Vorlesung: 12 Abschnitte, 61 Folien, 2 Bilder, 3 Zeichnungen, 9.887 Wörter im Handout und 859 in den Sprechernotizen.

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.

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.

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.md baut. 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.