Wer regelmäßig präsentiert, kennt den Zeitfresser: Eine Präsentation fertig zu stellen dauert oft länger als den Vortrag selbst vorzubereiten. frontend-slides löst genau dieses Problem. Der Claude-Code-Skill generiert vollständige, browser-renderbare Slide-Decks direkt aus einem Prompt.
Was ist frontend-slides?
frontend-slides ist ein Skill für Claude Code aus dem Repository zarazhangrui/frontend-slides. Der Skill nutzt Claudes Stärke im Frontend-Bereich. Die KI versteht HTML, CSS und JavaScript auf einem hohen Niveau. Mit diesem Skill wandelt Claude eine Gliederung oder Textbeschreibung in ein vollständiges Slide-Deck um. Das Ergebnis läuft direkt im Browser.
Das ist kein statisches PDF, sondern eine interaktive HTML-Präsentation. Du rufst sie direkt im Browser auf, teilst sie per Link oder legst sie auf deinen eigenen Server. PowerPoint, Keynote oder Canva braucht es dafür nicht.
Das Projekt richtet sich an alle, die schnell gute Präsentationen brauchen: Speaker, Gründer, Content-Creator, Entwickler, die dem Team ein technisches Konzept erklären wollen, oder Berater, die einem Kunden Optionen vorstellen. Der Kern des Vorteils liegt darin, dass du den Workflow nicht verlässt. Alles bleibt in Claude Code.
Wie nutzt du frontend-slides in der Praxis?
Zuerst installierst du den Skill in deiner Claude-Code-Umgebung. Das Prinzip ist dasselbe wie bei anderen Claude-Code-Skills: Du fügst die Skill-Datei deinem Projekt hinzu und rufst sie dann per Slash Command auf.
# Skill über claude skill add installieren
claude skill add zarazhangrui/frontend-slides
# Dann in der Claude-Code-Session aufrufen
/frontend-slides Erstelle eine Präsentation über KI-Automatisierung in 6 Slides
Sobald der Skill aktiv ist, beschreibst du, was du brauchst. Du kannst eine Gliederung übergeben, ein Thema nennen oder bestehende Inhalte als Rohmaterial einfügen. Claude generiert daraus ein vollständiges HTML-Slide-Deck.
Die generierten Slides sind responsiv und funktionieren auf Desktop und Mobilgeräten. Navigation erfolgt per Tastatur oder Klick. Das ist das natürliche Ergebnis davon, dass Claude sauber strukturiertes HTML schreibt. Du musst keine Einstellungen konfigurieren.
Praxis-Beispiel: Pitch-Deck für ein SaaS-Produkt
Du willst einem Investor ein kurzes Pitch-Deck zeigen. Du hast zehn Stichpunkte im Kopf, aber keine Zeit für Designarbeit. So gehst du vor:
Erst öffnest du Claude Code und rufst den frontend-slides Skill auf. Dann gibst du deine Stichpunkte ein: Problemdefinition, Lösung, Zielgruppe, Markt, Team, nächste Schritte. Claude generiert daraus ein Slide-Deck mit Titelseite, klarem Layout und konsistentem Styling.
Das Ergebnis speicherst du als index.html und öffnest es direkt im Browser. Für einen ersten Entwurf reichen oft wenige Minuten. Änderungen machst du entweder direkt im Code oder sagst Claude auf Deutsch, was sich ändern soll.
Das Besondere dabei: Claude kennt gute Präsentationsstrukturen. Die KI weiß, dass ein Pitch-Deck nicht mehr als zehn Slides haben sollte, dass eine Slide eine Hauptaussage braucht, und dass Weißraum besser ist als vollgestopfte Folien. Du musst das nicht erklären.
Für inhaltsschwere Decks mit vielen technischen Schaubildern lohnt es sich, Claude in mehreren Schritten zu arbeiten. Erst die Struktur definieren, dann Slide für Slide ausarbeiten. So behältst du die Kontrolle über den Inhalt und sparst trotzdem die Designarbeit.
Wann lohnt sich frontend-slides?
frontend-slides ist kein Ersatz für professionelles Präsentationsdesign bei hochkarätigen Events. Wer eine Keynote auf einer großen Konferenz hält, wird weiterhin einen Designer einbinden wollen.
Aber für die meisten alltäglichen Präsentationsaufgaben ist der Skill ein echter Hebel:
- Team-Update am Montag: direkt aus dem Protokoll generieren statt Copy-Paste in PowerPoint
- Kundenpräsentation: Konzeptentwurf in 15 Minuten statt in drei Stunden
- Technische Dokumentation: Slides für das Onboarding neuer Entwickler aus vorhandenem Text erstellen
- Content für Social Media: Slide-Sequenzen für LinkedIn oder Instagram Stories
Wer bereits mit dem ui-ux-pro-max-skill für professionelles UI-Design arbeitet, findet in frontend-slides eine sinnvolle Ergänzung. Beide Skills arbeiten im Frontend-Bereich. Während ui-ux-pro-max-skill auf App-UIs spezialisiert ist, fokussiert sich frontend-slides auf Präsentationsformate.
Der größte Vorteil zeigt sich im Wiederholungsfall. Wenn du regelmäßig ähnliche Präsentationen erstellst, baust du dir eine eigene Prompt-Vorlage auf. Claude nutzt dann jedes Mal dieselbe Struktur, dasselbe Design, denselben Ton. Das geht deutlich schneller als eine Vorlage in PowerPoint zu pflegen.
FAQ
Kann ich das generierte Slide-Deck nachträglich anpassen?
Ja. Da das Ergebnis eine normale HTML-Datei ist, kannst du sie direkt bearbeiten oder Claude anweisen, Änderungen vorzunehmen. Farben, Schriften und Layouts lassen sich per Prompt oder direkt im Code anpassen.
Brauche ich Vorkenntnisse in HTML oder CSS?
Nein. Du beschreibst, was du willst. Claude generiert den Code. Du musst den Code nicht verstehen, um das Ergebnis zu nutzen. Wenn du Anpassungen möchtest, reicht es, Claude auf Deutsch zu sagen, was sich ändern soll.
Funktioniert frontend-slides offline?
Das generierte HTML-Deck läuft komplett im Browser ohne Internetverbindung, sobald es erstellt wurde. Die Erstellung selbst benötigt eine aktive Claude-Verbindung.
Wenn du Claude Code regelmäßig nutzt, lohnt es sich, eine Bibliothek nützlicher Skills aufzubauen. frontend-slides ist ein solider Einstieg für alles rund um Präsentationen in Claude Code.
Komm in die kostenlose Claude Business Community: Lerne Claude, Automatisierung, Co-Work, Claude Code, App-Building und Agent-Coding. Zeit sparen, Kosten sparen, Business skalieren: skool.com/unternehmernetzwerk-2071
Marcel Porcher, newways.ai