frontend-slides: Web-Präsentationen mit einem Coding-Agent erstellen
frontend-slides ist das meistgesternte Open-Source-PPT-Skill für Coding-Agents – es baut Foliensätze als klare, moderne Webseiten, die du direkt im Browser präsentierst. Dieser Leitfaden erklärt, was es ist, wie man es installiert und nutzt, worin es wirklich stark ist (und wo seine Grenzen liegen), wie es im Vergleich zu anderen Claude-PPT-Skills abschneidet und wo ein Agent-Native Design Workspace übernimmt, wenn ein einzelnes Skill an seine Grenzen stößt.
Wenn du eine Präsentation willst und ohnehin schon im Terminal lebst, ist frontend-slides einer der saubersten Wege, an eine zu kommen. Es ist ein Coding-Agent-Skill: Statt eine Präsentations-App zu öffnen, beschreibst du die Foliensammlung dem Agenten, den du bereits nutzt, und frontend-slides verwandelt deine Idee in Folien, die als Webseiten gebaut sind — echtes HTML und CSS, das du direkt aus dem Browser präsentierst.
Es ist außerdem die beliebteste Option ihrer Art. Mit 25k GitHub-Stars und einer MIT-Lizenz sitzt frontend-slides ganz oben im wachsenden Regal der Claude PPT Skills. Dieser Leitfaden behandelt, was es ist, wie man es installiert und promptet, was es gut macht und wo es aufhört, wie es sich gegen die anderen Skills in diesem Bereich schlägt und wo ein vollwertiges Workspace ins Spiel kommt, wenn aus einer Foliensammlung eine fortlaufende Arbeit wird.
Was frontend-slides ist
frontend-slides ist ein Skill — ein gebündelter Satz an Anweisungen, den dein Coding-Agent (Claude Code, Codex, Cursor und andere) mitten in einer Aufgabe lädt, um eine Sache gut zu erledigen. In diesem Fall ist diese Sache das Erstellen einer Präsentation. Er stützt sich auf die Frontend-Fähigkeiten, die dein Agent bereits hat, und richtet sie auf Folien: Du beschreibst die Präsentation in einfacher Sprache, und der Agent schreibt saubere, moderne Webseiten, eine pro Folie, durch die du im Browser blätterst.
Die Ausgabe ist von Grund auf web-nativ. Weil jede Folie HTML und CSS ist, bekommst du volle Kontrolle — eigene Layouts, echte Typografie, Verläufe, Übergänge, eingebettete Diagramme, alles, was der Browser rendern kann. Es wird von Zara Zhang gebaut und gepflegt, ist unter MIT quelloffen und, wie der Rest dieser Skills, nach dem Prinzip Bring-your-own-Model-Key: Du lieferst den API-Key, der Skill liefert das Handwerk.
Wie es funktioniert
Der Ablauf ist kurz und größtenteils dialogisch:
- Installiere den Skill — klone frontend-slides oder füge es dem Skills-Verzeichnis deines Coding-Agenten hinzu (das Repository enthält die Einrichtungsschritte). Bring deinen eigenen Modell-Key mit.
- Beschreibe die Präsentation — gib dem Agenten Thema, Zielgruppe, Tonfall und ungefähre Folienzahl als Prompt. Je konkreter das Briefing, desto besser die Struktur, die er aufbaut.
- Lass ihn bauen — der Agent generiert die Folien als Webseiten und öffnet sie zum Präsentieren im Browser.
- Iteriere — bitte in einfacher Sprache um Änderungen („Straffe die Einleitung“, „Mach Folie 3 zu einem zweispaltigen Vergleich“, „Wärmere Farbpalette“) und rendere neu. Weil es nur CSS ist, kannst du auch alles direkt von Hand bearbeiten.
- Präsentiere oder exportiere — präsentiere aus dem Browser oder exportiere zum Teilen nach PDF.
Worin es gut ist (und seine ehrlichen Grenzen)
frontend-slides ist am stärksten, wenn du web-native Folien und volle Kontrolle über ihr Aussehen willst. Wenn du dich mit HTML und CSS wohlfühlst, steht nichts zwischen dir und dem Design — du kannst jede Folie aufbrechen und von Hand ändern, die ganze Präsentation in git versionieren und Komponenten über Präsentationen hinweg wiederverwenden. Für Entwickler liegt genau darin der ganze Reiz: Folien, die sich wie eine Codebasis verhalten statt wie eine proprietäre Datei.
Die ehrlichen Grenzen sind die Kehrseite dieser Stärke. Die Ausgabe ist eine Webseite, kein .pptx — wenn deine Organisation also eine bearbeitbare PowerPoint mit nativen Formen braucht, ist dies nicht das Werkzeug (Skills, die darauf zielen, findest du in der Bewertungstabelle unten). Es gibt auch eine Komfortschwelle: Je weiter du dich von HTML und CSS entfernst, desto weniger verkauft sich die „volle Kontrolle“ von selbst. Und wie jeder einzelne Skill macht frontend-slides eine Präsentation — es trägt dein Branding nicht projektübergreifend und hält kein Design-System synchron. Es ist ein scharfes Werkzeug für einen einzigen Zweck, und dazu steht es ehrlich.
frontend-slides gegen andere Claude PPT Skills
frontend-slides ist nicht der einzige Skill dieser Kategorie, und die richtige Wahl hängt von der Ausgabe ab, die du brauchst, und der Lizenz, mit der du leben kannst.
| Tool | Ausgabe | Lizenz | Am besten für |
|---|---|---|---|
| frontend-slides | HTML-Web-Folien | MIT | Web-native Präsentationen, volle CSS-Kontrolle |
| guizang-ppt-skill | HTML (redaktionell) | AGPL-3.0 | Handwerklich gestaltet wirkende Präsentationen |
| dashiAI | Bearbeitbare Präsentation | AGPL-3.0 | Ausgabe, die ein Nicht-Entwickler bearbeiten kann |
| Open Design | Markenkonforme bearbeitbare Präsentationen + Vorlagen | Apache-2.0 | Präsentationen, die an ein Design-System gebunden sind, in einem Workspace |
Wenn du den polierten redaktionellen Look willst, ist guizang-ppt-skill das Geschwister zum Vergleichen; wenn dein Ergebnis für einen Nicht-Entwickler bearbeitbar bleiben muss, ist dashiAI genau dafür gebaut. frontend-slides gewinnt, wenn du willst, dass die Präsentation Webseiten ist, die dir vollständig gehören.
Wo Open Design ins Spiel kommt
frontend-slides ist ein großartiger Einzweck-Skill für eine Präsentation in deinem Terminal. Aber ein Skill ist ein Skript — er trägt dein Branding nicht projektübergreifend, hält die Ausgabe nicht in einem echten Workspace bearbeitbar und koordiniert eine Präsentation nicht mit dem Rest deiner Design-Arbeit.
Open Design ist die Schicht über dem Skill: ein quelloffenes (Apache-2.0), lokal-orientiertes Agent-Native Design Workspace mit Bring-your-own-Key, das außerhalb des Coding-Agenten sitzt, den du ohnehin schon nutzt. Du beschreibst eine Präsentation; der Agent generiert eine bearbeitbare gegen ein Design-System, sodass sie markenkonform bleibt, statt jedes Mal von einer leeren Seite auszugehen — und Open Design liefert eigene HTML-Präsentationsvorlagen in seiner Plugin-Bibliothek. Es ist dieselbe Idee wie frontend-slides, nur mit einem Zuhause: deine Dateien, deine Marke, bearbeitbar und dein zum Behalten. Wenn du heute Folien mit einem Coding-Agent baust, sieh dir an, wie Open Design mit Claude Code funktioniert.
Greif zu frontend-slides, wenn du schnell eine web-native Präsentation über die Kommandozeile willst. Greif zu einem Workspace, wenn die Präsentation markenkonform, bearbeitbar und Teil eines größeren Design-Ganzen sein muss.
FAQ
Ist frontend-slides kostenlos? Ja. Es ist unter der MIT-Lizenz quelloffen und kostenlos nutzbar — du stellst deinen eigenen Modell-API-Key. MIT ist permissiv, also auch für die kommerzielle Nutzung freundlich.
Wie nutze ich frontend-slides? Installiere den Skill in das Skills-Verzeichnis deines Coding-Agenten und beschreibe dann die Präsentation (Thema, Zielgruppe, Länge). Der Agent baut die Folien als Webseiten; iteriere in einfacher Sprache und präsentiere aus dem Browser.
Exportiert frontend-slides nach PowerPoint? Nein — es erzeugt Web-Folien (HTML/CSS), die du im Browser präsentierst, und du kannst zum Teilen nach PDF exportieren. Wenn du eine bearbeitbare .pptx mit nativen Formen brauchst, sieh dir statt frontend-slides einen Skill an, der für diese Ausgabe gebaut ist.
Für wen ist frontend-slides am besten? Für Entwickler, die web-native Folien und volle CSS-Kontrolle wollen — Menschen, die sich auf der Web-Plattform zu Hause fühlen und eine Präsentation lieber in git versionieren, als eine Präsentations-App zu öffnen.
Skill oder Design-Workspace — was sollte ich nutzen? Ein Skill wie frontend-slides ist ideal für eine schnelle, einmalige Präsentation. Ein Agent-Native Design Workspace wie Open Design passt besser, wenn du markenkonforme, bearbeitbare Präsentationen brauchst, die neben dem Rest deiner Design-Arbeit leben.
Das Fazit
frontend-slides ist der meistgesternte Weg, Folien mit einem Coding-Agent zu erstellen, und es verdient das: web-native Präsentationen, volle CSS-Kontrolle, MIT-lizenziert, alles aus dem Terminal getrieben, in dem du ohnehin arbeitest. Wenn du schnell eine browser-first-Präsentation willst und dich in HTML und CSS wohlfühlst, installiere es und leg mit dem Prompten los. Wenn aus einer Präsentation eine fortlaufende, markenkonforme Arbeit wird, die bearbeitbar bleiben und an ein Design-System gebunden sein muss, übernimmt genau dort ein Agent-Native Design Workspace.