So verwandeln Sie einen AI-Agenten in einen Slide-Layout-Ingenieur mit open-slide

Jedes Mal, wenn ich eine Präsentation für ein Meetup oder eine interne Besprechung zusammenstellen muss, erwische ich mich dabei, zu prokrastinieren. Mit Schriftarten und Blockausrichtung in PowerPoint und Google Slides herumzufummeln, ist mühsam. Markdown-Tools wie Marp oder Slidev erleichtern das Layout, aber wenn Sie nicht-standardmäßige Animationen, interaktive Diagramme oder eine ordentliche Callout-Box möchten, stößt das Markup schnell an seine Grenzen.

Es scheint, dass neuronale Netze heutzutage ausgezeichnet React-Code schreiben. Aber wenn Sie Claude Code oder Cursor bitten, eine Präsentation von Grund auf zu erstellen, schreiben sie ein Dutzend unverbundener Komponenten, vergessen die Bildschirmskalierung, verwickeln sich in Routing und lassen Sie mit Layout-Bugs allein.

Das Projekt open-slide löst genau dieses Problem. Es ist ein Präsentations-Framework, das speziell für die Zusammenarbeit mit AI-Agenten entwickelt wurde.

Die Projektidee

Der Ersteller von open-slide dachte einfach: Folien sind visueller Code, und moderne Agenten schreiben schnell Code ohne Beschwerden. Das einzige Problem ist die Ausführungsumgebung.

Statt eine eigene begrenzte Markup-Sprache (DSL) zu erfinden, gibt open-slide dem Agenten standardmäßiges React und übernimmt selbst die gesamte Routinearbeit. Das Framework arretiert die Leinwand bei 1920 × 1080 Pixeln, sorgt für adaptive Skalierung für jeden Monitor, konfiguriert Bildschirmwechsel, Hot Reloading und Sprechermodus.

Der Agent muss nur Komponenten gemäß klaren Markup-Regeln generieren, ohne sich von der Infrastruktur ablenken zu lassen.

npx @open-slide/cli init my-slide
cd my-slide
pnpm dev

Nach der Initialisierung enthält das Projekt bereits fertige Skripte für Claude Code und Systemanweisungen, die dem Modell die Canvas-Struktur, Typografie und Palette erklären.

Integrierter Bearbeitungszyklus über den Inspector

Normalerweise wird die Arbeit mit AI bei Visuals zu endlosen Versuchen, verbal zu erklären: „Verschiebe diesen grauen Button auf der dritten Folie leicht nach links der Überschrift". Das Modell macht Fehler, bearbeitet die falsche Datei, und der Dialog zieht sich hin.

open-slide hat einen eingebauten visuellen Inspector direkt im Dev-Server:

1. Sie öffnen die Folien im Browser und klicken auf ein beliebiges Element.
2. In dem erscheinenden Feld schreiben Sie einen Kommentar: „mache den Hintergrund dunkler", „verkleinere die Überschriftengröße" oder "füge unten Polsterung hinzu".
3. Das Framework speichert diese Notizen direkt im Quellcode als Marker @slide-comment.
4. Sie führen den Befehl /apply-comments im Terminal mit dem Agenten aus.
5. Der Agent liest die Marker, bearbeitet das JSX, entfernt die Kommentare und lädt die Seite neu.

Dieser Bearbeitungszyklus spart viele Nerven. Sie spielen die Rolle eines Art Directors, der Klebezettel auf dem Layout hinterlässt, während das neuronale Netz die Komponenten repariert.

Logosuche und Asset-Verwaltung

Wenn Sie einen Pitch oder einen technischen Vortrag halten, geht die Hälfte der Zeit für die Suche nach SVG-Logos von Technologien drauf. open-slide hat einen eingebauten svgl-Katalog. Öffnen Sie einfach das Assets-Panel, geben Sie den Namen der Bibliothek oder des Dienstes ein und fügen Sie das Vektor-Icon direkt in den Foliencode ein.

Das Assets-Panel ermöglicht es Ihnen auch, zentral Schriftarten, Bilder und Videos einzubinden, damit Sie sie nicht manuell über zufällige Projektordner organisieren müssen.

Export und Präsentation

Für Live-Präsentationen enthält das Projekt einen vollständigen Sprechermodus. Ein separater Bildschirm zeigt die aktuelle Folie, Vorschau des nächsten Schritts, Präsentationstimer und Sprechernotizen.

Sobald die Präsentation fertig ist, können Sie sie in ein vollständig statisches Bundle bauen:

• Generieren Sie eine eigenständige HTML-Datei, die ohne Server geöffnet werden kann und auf Vercel, Netlify oder Cloudflare Pages deployed werden kann.
• Exportieren Sie das Deck als PDF zum Ausdrucken oder Versenden an Konferenzorganisatoren.

Wenn Sie viele Präsentationen ansammeln, organisiert der eingebaute Deck-Manager sie in Ordnern mit Emojis und unterstützt das Sortieren durch einfaches Drag-and-Drop.

Repository-Struktur

Im Hintergrund ist open-slide ein Monorepo basierend auf pnpm und Turborepo:

• Das @open-slide/core-Paket enthält die Core-Runtime, die Canvas-Skalierungs-Engine, den Bearbeitungs-Inspector, das Vite-Plugin und die CLI-Schnittstelle.
• Das @open-slide/cli-Paket übernimmt die Initialisierung neuer Projekte und verbirgt Build-Konfigurationen im Core, um den Arbeitsdateibaum nicht zu überladen.
• Darin befindet sich eine Demo apps/demo, wo der Autor neue Releases testet.

Der Stack ist vollständig TypeScript, mit dem schnellen Biome für Linting und Formatierung, und das Projekt verwendet die permissive MIT-Lizenz.

Für wen ist dieses Projekt nützlich

Wenn Sie es gewohnt sind, Präsentationen nur mit der Maus in Figma oder Keynote zu erstellen, könnte der Umstieg auf Text-Prompts ungewohnt sein. Aber für Entwickler, die regelmäßig Vorträge halten und bereits Claude Code oder Cursor in ihrer täglichen Arbeit verwenden, könnte open-slide eine solide Alternative zu traditionellen Slide-Tools sein.

Sie erhalten vollen Zugriff auf das React-Ökosystem: betten Sie eine interaktive Three.js-Szene ein, einen funktionalen Monaco-Code-Editor oder ein Recharts-Diagramm, während Sie das grobe Layout dem neuronalen Netz überlassen.