Zur Nutzungsanleitung springen
guizang-ppt-skillvon op7418

Guizang PPT Skill Skill.

Ein Claude Code- und Codex-Skill für PPT und Slide-Decks: horizontale HTML-Decks in einer Datei im Magazin- oder Swiss-Stil, mit Referentenansicht und Sync.

  • Presentations
  • HTML-Folien
op7418/guizang-ppt-skill · SKILL.mdSKILL.md
--- name: guizang-ppt-skill description: 生成横向翻页网页 PPT(单 HTML 文件),含 WebGL 背景、演讲者视图、观众屏同步、讲稿备注、章节幕封、数据大字报、图片网格等模板。提供两种风格:① "电子杂志 × 电子墨水"(衬线 + 流体背景 + 暖色) ② "瑞士国际主义"(无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮)。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT,或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。 --- ## 这个 Skill 做什么 ## 何时使用 ## 工作流 ## 资源文件导览 ## 核心设计原则(哲学) ## 参考作品
Front Matter und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 25.146 Zeichen insgesamt

01 Was es tut

Was die guizang-ppt-skill Skill in Claude Code und Codex bewirkt

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

Erzeugt ein horizontal wischbares Webpage-Deck als einzelne in sich geschlossene HTML-Datei mit WebGL-Hero-Hintergründen, Presenter View, Bildschirm-Synchronisation für das Publikum, Sprechernotizen, Kapitel-Trennseiten, Big-Number-Datenseiten und Bildrastern. Zwei sich gegenseitig ausschließende visuelle Richtungen: A, Electronic Magazine x E-ink (serifenbetonte Überschriften, fließender Hintergrund, warme Töne) und B, Swiss International Style (durchgehend serifenlos, 12-Spalten-Raster, Grid-Dot-Hintergründe, ein kontrastreicher Akzent aus IKB, Zitronengelb, Zitronengrün oder Safety Orange).

Body-Seiten im Stil B müssen eines von 22 registrierten Layouts, S01–S22, verwenden, gekennzeichnet mit data-layout. Für Designerinnen und Entwickler, die Talks, Launches und Demo-Days erstellen und das Deck in einem Durchgang fertigstellen wollen, ohne ein Slide-Tool.

Was er erzeugt

  • Ein Single-File-HTML-Deck mit horizontalem Seitenwechsel, geliefert als ein einzelnes in sich geschlossenes Dokument mit CSS, WebGL-Shader, Paging-JS und bereits verdrahtetem Presenter-Modus.
  • Ein SPEAKER_NOTES-Datensatz, erzeugt in derselben Reihenfolge wie die data-slide-id-Werte der Folien, mit Feldern für Zweck, Talk, Übergang und optionaler Inszenierung.
  • Das Outline, als Markdown-Datei neben dem Deck gespeichert, damit spätere Iterationen darauf aufbauen können.
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Zuerst auf Updates upstream prüfen

    Die Skill ruft das Repo ab und zählt, wie weit HEAD hinter upstream liegt, und fragt den Nutzer, bevor sie irgendetwas zieht.

  2. 02
    Vor dem Schreiben auf sieben Fragen einigen

    Zuerst wird Stil A oder B festgelegt, dann Zielgruppe und Setting, Dauer, Ausgangsmaterial, Bilder oder Screenshots, Themenpalette und feste Vorgaben.

  3. 03
    Die gewählte Vorlage kopieren

    Kopieren Sie assets/template.html für Stil A oder assets/template-swiss.html für Stil B an den Speicherort des Decks und legen Sie den zugehörigen images-Ordner daneben an.

  4. 04
    Klassennamen vorab prüfen

    Lesen Sie den Style-Block der Vorlage, bevor Sie Folien-Markup schreiben, und prüfen Sie, dass jede verwendete Klasse dort definiert ist.

  5. 05
    Themen-Rhythmus vor der Layout-Wahl planen

    Notieren Sie die Theme-Klasse jeder Seite (Hero dunkel, Hero hell, hell, dunkel) und stimmen Sie diese ab, bevor Sie Layouts auswählen.

  6. 06
    Gegen die Checkliste selbst prüfen

    Öffnen Sie nach der Generierung references/checklist.md, gehen Sie sie Punkt für Punkt durch und führen Sie dann die Validatoren und die Browser-Vorschau aus.

02 Finden Sie Ihren Favoriten

Wann Sie den guizang-ppt-skill Skill verwenden

Verwenden Sie den guizang-ppt-skill Skill in Claude Code oder Codex, wenn es um PPT- und Präsentationsaufgaben dieser Art geht. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

  • Offline-Sharing-Sessions, interne Branchen-Talks und private Salons, bei denen ein Sprecher ein Deck mit Präsenz auf großer Leinwand möchte.
  • KI-Produktlaunches und Demo-Days, die ein fertiges, sofort präsentierbares Deck benötigen.
  • Web-Folien, die in einem Durchgang fertiggestellt werden sollen, ohne ein separates Paging- oder Präsentationstool.
  • Inhalte, die aus großen Mengen von KPI-Zahlen, Roadmaps und Prozessen bestehen, wofür das Data-Hero-Layout des Stils B die naheliegende Wahl ist.

Grenzen kennen

  • Seiten mit großen Datentabellen oder gestapelten Diagrammen werden stattdessen an ein herkömmliches Slide-Tool gegeben.
  • Schulungsunterlagen, da die Informationsdichte dieses Formats zu gering ist.
  • Arbeiten, die mehrere Personen gemeinsam bearbeiten müssen, da die Ausgabe statisches HTML ist.
  • Neue Grundstrukturen über die registrierten 22 Layouts hinaus zu erfinden, etwa P23/P24, Swiss Image Split oder Evidence Grid, außer der Nutzer bittet ausdrücklich um ein experimentelles Layout.

Was Sie bereitstellen sollten

  • Ein Thema oder AusgangsmaterialDokumente, Daten, ein altes Deck oder Artikel-Links ermöglichen es dem Skill, auf echtem Material aufzubauen; bei nur einer vagen Idee hilft es, die Gliederung anhand der Narrative-Arc-Vorlage zu erstellen.
  • Die Stilwahl, zuerst erfragtStil A oder B entscheidet, welche Vorlage, welche Layouts und welche Themes-Datei verwendet werden, daher ist dies die verpflichtende erste Klärungsfrage.
  • Zielgruppe und RahmenOb es sich um einen internen Branchenvortrag, eine kommerzielle Produkteinführung, einen Demo Day oder einen privaten Salon handelt, bestimmt das Sprachregister und die inhaltliche Tiefe.
  • Bilder und Screenshots, mit Benennung und SpezifikationenBilder kommen in den Ordner images/ neben index.html und folgen der Namenskonvention aus Seitenzahl plus semantischer Bezeichnung, damit die Seitenreihenfolge lesbar bleibt.
  • Feste VorgabenAlles, was enthalten sein muss, etwa bestimmte Datenpunkte, oder niemals erscheinen darf, wird vorab erfasst, um Nacharbeit zu vermeiden.

03 Innerhalb des Skills

Regeln, die der guizang-ppt-skill 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. Die Beiden Stile Niemals Mischen

    Ein Deck verwendet nur einen Stil. Derselbe Klassenname wird in den beiden Vorlagen völlig unterschiedlich dargestellt, daher existieren Layout-Klassen nur in ihrer jeweils passenden Vorlagendatei.

  2. Feste Theme-Paletten, Keine Benutzerdefinierten Hex-Werte

    Erlaubt sind nur die fünf handabgestimmten Presets aus themes.md, und ein einzelnes Deck behält durchgehend ein Theme.

  3. Jede Seite Deklariert Ihr Theme

    Jeder Abschnitt muss eines von light, dark, hero light oder hero dark tragen, ein bloßes hero reicht nicht aus.

  4. Seiten im Stil B Müssen Eine Layout-ID Deklarieren

    Schweizer Decks laufen im gesperrten Modus: Textseiten verwenden ausschließlich die 22 registrierten Layouts, und jeder Folienabschnitt schreibt data-layout="Sxx".

  5. Icons Stammen von Lucide, Nicht aus Handgezeichnetem SVG

    Verwenden Sie das kantige Lucide-Set über Markup plus lucide.createIcons() statt Formen zu zeichnen, und vermeiden Sie Emoji; Stil B hält zusätzlich alle Textbeschriftungen aus SVG heraus und in HTML-Grids oder Bildunterschriften.

  6. Bildraster Verwenden Feste Viewport-Höhen

    Setzen Sie bei Bildrastern im Stil A height:Nvh statt aspect-ratio, da dies das Layout sonst zerstört.

  7. Sprechernotizen Beziehen Sich auf Stabile Seiten-IDs

    Jeder Abschnitt erhält eine eindeutige, stabile data-slide-id, und der Notizeneintrag wird in derselben Reihenfolge erzeugt. Notizen werden nach Seiten-ID gespeichert, niemals nach Array-Index oder Seitenzahl.

  8. Die Dauer Bestimmt die Seitenzahl

    Fünfzehn Minuten entsprechen etwa 10 Seiten, dreißig Minuten etwa 20, fünfundvierzig Minuten 25–30.

04 In Betrieb nehmen

guizang-ppt-skill in Claude Code oder Codex installieren

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

guizang-ppt-skill zu Claude Code, Codex oder Ihrem Agent hinzufügen

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

Terminal
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

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
帮我做一份 30 分钟左右的分享 deck,受众是公司内部的产品和工程同学,风格选 B 瑞士国际主义。素材是这份 [产品发布文档] 和 [几张 dashboard 截图],截图想保真放进 S22 的主图和 S15 的图片格。主题色用克莱因蓝 IKB,另外需要 20 页左右的页面计划和每页的讲稿备注。

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:

  • Führen Sie den Swiss-Deck-Validator vor der Auslieferung aus; er übernimmt die statische Strukturprüfung und misst dort, wo Playwright auflöst, die gerenderten sichtbaren Grenzen, den unteren Leerraum, die Nav-Sicherheitslinie und den Titelabstand.

In OpenDesign ist guizang-ppt-skill bereits gebündelt: Plugins → Skills, wählen Sie es in der oberen Leiste aus.

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

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

Author
op7418
Skill-Datei
SKILL.md Inhaltsprüfsumme bei Verifizierung erfasst; Commit c91369c
License
AGPL-3.0 Aus LICENSE.
Repository-Sterne
26.246 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository op7418/guizang-ppt-skill. Keine Bewertung oder Nutzungszahl für guizang-ppt-skill.
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.
Die eigene Beschreibung des Skills
„Erzeugt horizontale, wischbare Web-PPT (einzelne HTML-Datei) mit WebGL-Hintergrund, Speaker-View, Publikumssynchronisation, Vortragsnotizen, Kapitel-Zwischentiteln, großformatigen Daten-Slides und Bildraster-Layouts. Zwei Stile verfügbar: ① „Magazin × E-Ink" (Serifen + fluider Hintergrund + warme Farben) ② „Schweizer Internationalismus" (serifenlos + Rasterpunkte + IKB/Zitronengelb/Zitronengrün/Warnorange-Akzente). Verwenden Sie diesen Skill, wenn der Nutzer eine Web-PPT für Präsentationen, Keynotes oder Veröffentlichungen benötigt oder Begriffe wie „Magazin-Style PPT", „Swiss Style", „horizontal swipe deck" nennt."

Front-matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst ca. 25.146 Zeichen. Vollständige Datei auf GitHub lesen.

Guizang PPT Skill

Führen Sie guizang-ppt-skill an einer echten PPT- oder Präsentationsaufgabe aus.

Der guizang-ppt-skill Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie den Skill unter Plugins → Skills, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

Terminal
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

OpenDesign Desktop

Ein Designsystem. Jeder Output unverkennbar deine Marke

Im vollständigen Vibe Design Workspace gelten dieselben Markenregeln für Websites, Slides, interaktive Prototypen, Dashboards, Bilder und HTML-Videos. Verbinde Codex, Claude Code, Cursor und weitere lokale Coding-Agents und gestalte kostenlos.

  • Web, Slides, Prototypen, Dashboards, Bilder und Video
  • 140+ Designsysteme plus die vollständige Vorlagen- und Skill-Bibliothek
  • Lokales Codex und 21+ Coding-Agents verbinden · Kostenlos

Für macOS und Windows