83.3K+Download
Zur Nutzungsanleitung springen
frontend-slidesvon Zara Zhang

Frontend Slides Skill.

Ein Claude Code und Codex Skill für PPT und Slide-Decks: animationsreiche HTML-Präsentationen von Grund auf oder konvertiert aus PowerPoint-Dateien.

  • Presentations
  • HTML-Folien
OpenDesign herunterladenAnleitung ansehen
zarazhangrui/frontend-slides · SKILL.mdSKILL.md
--- name: frontend-slides description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. --- ## Core Principles ## Design Aesthetics ## Fixed Stage Rules ## Phase 0: Detect Mode ## Phase 1: Content Discovery (New Presentations) ## Phase 2: Style Discovery
Front Matter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 28.057 Zeichen insgesamt

01 Was es tut

Was der frontend-slides Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Frontend Slides erstellt animationsreiche HTML-Präsentationen ohne Abhängigkeiten, die vollständig im Browser laufen – entweder von Grund auf neu erstellt oder aus einer .pptx-Datei konvertiert. Es ist für Nicht-Designer gemacht, die ihre Ästhetik durch Betrachten statt durch die Auswahl aus abstrakten Beschreibungen entdecken: Es erzeugt drei Einzelfolien-Stilvorschauen (ein sicheres Preset, mindestens eine mutige Vorlage und eine Wildcard) und lässt den Nutzer visuell darauf reagieren.

Wie viel Text ein Deck enthält, wird durch eine Dichteentscheidung zwischen wenig Text mit Vortragender im Fokus und viel Text zum Lesen festgelegt. Jedes Deck wird innerhalb einer festen 1920x1080-Bühne erstellt, die gleichmäßig auf den Viewport skaliert wird, und die Auslieferung kann mit einer Live-Vercel-URL oder einem PDF-Export enden.

Was er erzeugt

  • Eine eigenständige HTML-Präsentation mit allen Stilen und Skripten inline.
  • Drei temporäre Stilvorschau-Dateien (style-a.html, style-b.html, style-c.html), die zum Zeitpunkt der Auslieferung gelöscht werden.
  • Optional eine Live-URL auf Vercel, um das Deck per Text, Slack oder E-Mail zu teilen, abrufbar auf jedem Gerät.
  • Optional ein PDF für E-Mail, Slack oder Druck, erzeugt durch Screenshots jeder Folie, die anschließend kombiniert werden.
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Modus erkennen

    Der Skill entscheidet zunächst, ob es sich um ein neues, von Grund auf erstelltes Deck, eine .pptx-Konvertierung oder eine Erweiterung einer bestehenden HTML-Präsentation handelt, und wendet den passenden Phasenpfad an.

  2. 02
    Discovery-Fragen in einem Durchgang stellen

    Zweck, Länge, Inhaltsbereitschaft und Dichte werden gemeinsam abgefragt, wobei bei Bedarf eine native strukturierte Fragen-UI der Umgebung genutzt wird, sodass der Nutzer alles auf einmal ausfüllt.

  3. 03
    Drei Stilvorschauen erzeugen

    Statt den Nutzer nach einem Stilnamen zu fragen, rendert der Skill drei Einzelfolien-Titelvorschauen, öffnet sie automatisch und fragt, welche bevorzugt wird (oder ob Elemente gemischt werden sollen).

  4. 04
    Das einzelnedatei-Deck erzeugen

    Die vollständige Präsentation wird als eine HTML-Datei geschrieben, die die gesamte obligatorische viewport-base.css sowie abschnittsweise Kommentare inline einbindet, unter Verwendung der Dichteentscheidung und des ausgewählten Stilrezepts.

  5. 05
    Eine PowerPoint-Datei konvertieren

    Bei einer .pptx-Quelle extrahiert das gebündelte Python-Skript den Inhalt, der Nutzer bestätigt Titel, Zusammenfassungen und Bildanzahlen, und erst dann erfolgen Style-Discovery und HTML-Generierung.

  6. 06
    Erst liefern, dann das Teilen anbieten

    Vorschaudateien werden gelöscht, die Präsentation wird im Browser geöffnet, und dem Nutzer wird Navigation, CSS-Variablen, Schriften, die .reveal-Klasse und Inline-Bearbeitung erklärt, bevor Deployment oder PDF-Export angeboten werden.

02 Finden Sie Ihren Favoriten

Wann das frontend-slides-Skill verwendet werden sollte

Verwenden Sie das frontend-slides-Skill in Claude Code oder Codex, wenn es um PPT und Präsentationsfolien dieser Art geht. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Jeder, der Folien für einen Vortrag oder Pitch erstellen möchte, oder eine bestehende PPT/PPTX in Web-Folien umwandeln will.
  • Nicht-Designer, die keine visuelle Präferenz benennen können, aber auf zwei oder drei gerenderte Optionen reagieren können.
  • Jemand, der von einer PowerPoint-Datei ausgeht, die neu gestaltet statt neu geschrieben werden muss.
  • Verbessern einer bereits bestehenden HTML-Präsentation, bei der zusätzliche Inhalte das fixe Bühnen-Fitting stören könnten.
  • Präsentationen, die auf Smartphones angesehen werden, bei denen eine im Letterbox-Format dargestellte 16:9-Bühne akzeptabel ist, ein smartphonespezifisches Layout aber nicht gewünscht wird.

Grenzen kennen

  • Präsentationen, deren Layout sich an das Anzeigegerät anpassen soll; der Folieninhalt wird niemals umgebrochen, um auf einen Bildschirm zu passen.
  • Die Erwartung, dass ein PDF-Export Bewegung oder Interaktivität enthält; es handelt sich um eine statische Momentaufnahme.
  • Der Export von extern erstelltem HTML, dessen Folien einen anderen Klassennamen als .slide verwenden, wodurch das Export-Skript nichts findet.

Was Sie bereitstellen sollten

  • ZweckDer Anlass steuert das Preset-Matching und das Wildcard-Design; als Optionen werden Pitch Deck, Lehr-Tutorial, Konferenzvortrag oder interne Präsentation angeboten.
  • LängeEine ungefähre Folienanzahl, eingeteilt in kurz, mittel oder lang, bestimmt, wie viele Abschnitts- und Inhaltsfolien die Präsentation tragen kann.
  • Bestehender InhaltDer Nutzer gibt an, ob der gesamte Inhalt bereits fertig ist, nur grobe Notizen vorliegen oder lediglich ein Thema existiert, und stellt das Material bereit, sodass die Präsentation daraus aufgebaut wird.
  • Density-ModusEine einmalige, vorab getroffene Entscheidung zwischen niedriger Dichte mit Sprecherführung und hoher Dichte mit Lesefokus, die sich das System merkt und durchgängig auf Folienanzahl, Typografie-Skala und Layout anwendet.
  • Bildordner (optional)Bilder werden einzeln auf Nutzbarkeit und dominante Farben hin geprüft, und die Gliederung wird um sie herum mitentwickelt, statt vorab geplant zu werden.

03 Innerhalb des Skills

Regeln, die das frontend-slides-Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

  1. Keine Abhängigkeiten, eine Datei

    Präsentationen sind einzelne HTML-Dateien mit inline eingebettetem CSS und JS, daher darf das Skill nicht auf npm, einen Bundler oder sonstiges Build-Tooling zurückgreifen.

  2. Niemals für das Gerät umbrechen

    Die 1920x1080-Bühne skaliert als Ganzes und kann auf Smartphones im Letterbox-Format dargestellt werden; responsive Breakpoints dürfen nicht verwendet werden, um Folieninhalte neu anzuordnen.

  3. Folien mit Visibility wechseln, nicht mit Display

    Der Folienwechsel erfolgt über .active / .visible mit visibility, opacity und pointer-events; display: none und display: block sind verboten, da spätere Layout-Klassen sie überschreiben und dabei alle Folien gleichzeitig sichtbar machen können.

  4. CSS-Funktionen mit Calc negieren

    Die direkte Negation von clamp(), min() oder max() wird stillschweigend ignoriert. Daher muss der Skill sie als calc(-1 * clamp(...)) einbetten.

  5. Schriften von Fontshare oder Google Fonts

    Systemschriften werden nie verwendet, und im Abschnitt zur Ästhetik werden Inter, Roboto und Arial als überstrapazierte Schriftfamilien genannt, die vermieden werden sollten.

  6. Keine Template-Namen auf der Folie

    Template- und Slug-Namen erscheinen ausschließlich in der Nachricht an den Nutzer, niemals in der Vorschau oder auf der Folie selbst, ebenso wie anderer interner Workflow-Text.

  7. Aufteilen statt Verkleinern

    Scrollen, Überlauf, sich überlappende Panels und Text unter angenehmer Lesegröße sind grundlegende Verstöße; Inhalte über dem Dichtelimit werden zu weiteren Folien.

  8. preview.md vor design.md lesen

    Auffällige Templates werden aus dem Auswahlindex vorausgewählt und auf preview.md-Ebene gelesen; die vollständige design.md eines Templates wird erst in Phase 3 geladen, nachdem der Nutzer sie ausgewählt hat.

04 In Betrieb nehmen

Installieren Sie frontend-slides in Claude Code oder Codex

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

Fügen Sie frontend-slides zu Claude Code, Codex oder Ihrem Agent hinzu

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides

Generische skills-CLI-Form für SKILL.md; das Repository kann einen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste PPT- und Folienpräsentationsaufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt
It's [a 20-minute conference talk] and all I have is rough notes in [talk-notes.md]. Build me a new HTML presentation, about 12 slides, low density and speaker-led so it's one idea per slide. Show me some style previews before you generate the deck.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

  • Bestätigen Sie nach jeder Änderung, dass die Bühne weiterhin im Format 16:9 ist, kein Text über seine Karte hinausläuft, keine Panels sich überlappen und die Screenshots bei 1280x720 sowie einem Smartphone-Viewport korrekt aussehen.
  • Beurteilen Sie Überlauf und Überlappung anhand gerenderter Browser-Screenshots statt anhand des Codes, da Grid-Panels sich optisch gegenseitig verdecken können.
  • Lesen Sie den sichtbaren Text jeder Vorschau, bevor Sie sie öffnen, und überarbeiten Sie sie, falls interne Metadaten auf die Folie durchgesickert sind.
  • Öffnen Sie nach dem Deployment die Live-URL und bestätigen Sie, dass jedes referenzierte Bild tatsächlich lädt.

In OpenDesign ist frontend-slides gebündelt: Plugins → Skills, wählen Sie es in der oberen Leiste aus.

OpenDesign herunterladenQuickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author
Zara Zhang
Repository
github.com/zarazhangrui/frontend-slides Branch main
Skill-Datei
SKILL.md Content-Prüfsumme bei Verifizierung erfasst; Commit 9906a34
License
MIT Aus LICENSE.
Repository-Sterne
29.255 GitHub-Snapshot vom 14.09.2026 für das gesamte zarazhangrui/frontend-slides Repository. Keine Bewertung oder Nutzungszahl für frontend-slides.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. GrundprinzipienKeine Abhängigkeiten, Show-don't-tell-Vorschauen, unverwechselbares Design, progressive Offenlegung und die nicht verhandelbare feste 16:9-Bühne.
  2. Design-ÄsthetikHinweise zu Typografie, Farbe, Bewegung und Hintergrund, um generischen KI-Einheitsbrei bei Typografie und Paletten zu vermeiden.
  3. Regeln für die feste BühneCSS-Invarianten: 1920x1080-Canvas, .active/.visible-Umschaltung, clamp nur außerhalb der Bühne, Unterstützung für reduzierte Bewegung.
  4. Phase 0: Modus erkennenKlassifiziert die Anfrage als neue Präsentation, PPT-Konvertierung oder Erweiterung, mit Änderungsregeln für bestehende Dateien.
  5. Phase 1: Inhaltsermittlung (neue Präsentationen)Fragt gemeinsam nach Zweck, Länge, Inhaltsbereitschaft und Dichte und wertet dann einen eventuell bereitgestellten Bildordner aus.
  6. Phase 2: StilermittlungErstellt drei Vorschauen aus sicherem Preset, auffälligem Template und Wildcard nach strikten Regeln für Vorschau-Authentizität.
  7. Phase 3: Präsentation erstellenWendet die Dichteauswahl und die gewählte Stilrezeptur an, liest unterstützende Dateien und gibt eine einzelne HTML-Datei mit fester Bühne aus.
  8. Phase 4: PPT-KonvertierungExtrahiert .pptx-Inhalte mit einem Python-Skript, bestätigt sie mit dem Nutzer und konvertiert sie dann in den gewählten Stil.
  9. Phase 5: AuslieferungLöscht Vorschauen, öffnet die Präsentation und fasst Dateidetails, Navigation, Anpassungsmöglichkeiten und Inline-Bearbeitung zusammen.
  10. Phase 6: Teilen & Export (Option
Die eigene Beschreibung des Skills
„Erstellen Sie atemberaubende, animationsreiche HTML-Präsentationen von Grund auf oder durch Konvertierung von PowerPoint-Dateien. Verwenden, wenn der Nutzer eine Präsentation erstellen, eine PPT/PPTX ins Web konvertieren oder Folien für einen Vortrag/Pitch erstellen möchte. Hilft Nicht-Designern, ihre Ästhetik durch visuelle Exploration statt abstrakter Entscheidungen zu entdecken."

Front-matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 28.057 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

Frontend Slides

Führen Sie frontend-slides an einer echten PPT- und Folienaufgabe aus.

Das frontend-slides Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie das Skill in Plugins → Skills aus, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladenAlle Skills durchsuchen
Terminal
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides