Eine KI-Präsentation entsteht oft schnell, wirkt am Ende aber wie eine lose Foliensammlung: wechselnde Abstände, unterschiedliche Farbtöne, keine wiederkehrenden Bausteine. Das Foliengerüst setzt genau hier an. Aus einer freigegebenen Folienstruktur, einer Markdown-Design-Guideline und einem HTML-Briefing baut der Skill zunächst ein Designsystem in CSS, bevor überhaupt die erste Folie entsteht: Farben, Typografie, Abstände und wiederverwendbare Komponenten wie Karte, Grid, Vergleich oder Prozessdarstellung. Erst danach werden die einzelnen Folien darauf aufgesetzt.
\nGedacht ist der Skill für alle, die eine KI-Präsentation bauen lassen wollen, die am Ende wie ein durchdachtes Deck wirkt und nicht wie ein Stapel loser Folien: für Pitch-Decks, interne Strategiepräsentationen oder Kundentermine, bei denen am Ende auch ein druckfähiges PDF gebraucht wird. Besonders hilfreich, wenn ein bestehendes Corporate Design eingehalten werden muss und ein generischer Foliengenerator dafür zu grob arbeitet.
\nDie ehrliche Grenze: Das Ergebnis ist nur so gut wie die mitgelieferte Design-Guideline und Folienstruktur. Ohne eine ausgearbeitete Guideline bleibt auch dieses Gerüst generisch, und fehlende CSS-Design-Tokens muss der Skill selbst ableiten, was er als Annahme kenntlich macht. Er ersetzt außerdem keine echte Prüfung im Browser und keinen echten Testdruck als PDF, beides bleibt eine Aufgabe für den Menschen nach der Übergabe.
\n" }, { "id": "skill-text", "title": "Skill-Text", "html": "Kopieren Sie den Prompt unten komplett in Ihr KI-Tool. Als Datei: foliengeruest.de.json
\n" } ], "schritte": [ { "nr": 1, "titel": "Design-Grundlagen liefern", "beschreibung": "Markdown-Design-Guideline, Folienstruktur und HTML-Briefing werden bereitgestellt, CSS-Design-Tokens werden mitgegeben, falls bereits vorhanden.", "rolle": "mensch" }, { "nr": 2, "titel": "Preflight-Plan erstellen", "beschreibung": "Benötigte Folientypen und Komponenten werden bestimmt, jede Folie wird einem Folientyp zugeordnet, und Risiken bei Textmenge oder PDF-Export werden markiert.", "rolle": "automatisch" }, { "nr": 3, "titel": "Designsystem in CSS bauen", "beschreibung": "Design Tokens, Grundlayout, wiederverwendbare Komponenten und Print-Regeln für den PDF-Export werden angelegt.", "rolle": "automatisch" }, { "nr": 4, "titel": "Folien erzeugen", "beschreibung": "Jede Folie wird nach ihrem Folientyp, ihrer Kernbotschaft und der vorgesehenen Visual-Idee umgesetzt.", "rolle": "automatisch" }, { "nr": 5, "titel": "HTML-Präsentation erhalten", "beschreibung": "Die vollständige HTML-Datei liegt vor, zusammen mit einer Anleitung zum Öffnen, zum PDF-Export und einer Liste der Stellen, die geprüft werden sollten.", "rolle": "ergebnis" } ], "herausgeber": "Voyage Digital", "version": "2.0", "stand": "2026-07-26", "umsetzung": [ { "titel": "Design-Grundlagen vorbereiten", "text": "Design-Guideline und Folienstruktur liegen am besten vollständig vor dem Start bereit, sonst bleibt das Ergebnis generisch." }, { "titel": "Passendes Werkzeug wählen", "text": "Der Skill-Text wird in ein KI-Tool eingesetzt, das sauberen, vollständigen HTML-Code ausgeben kann." }, { "titel": "Preflight-Plan durchsehen", "text": "Folien mit zu viel Text oder einer unklaren Visual-Idee verdienen vor dem Weiterbau einen zweiten Blick." }, { "titel": "HTML im Browser öffnen", "text": "Das fertige Deck wird lokal geöffnet und auf Layout, Lesbarkeit und Konsistenz der Komponenten geprüft." }, { "titel": "PDF-Export testen", "text": "Ein einmaliger Testexport zeigt, ob Inhalte abgeschnitten werden oder Hintergrundfarben beim Druck fehlen." } ], "zutaten": [ "Design-Guideline", "Folienstruktur", "HTML-Briefing" ], "beispielSzenario": "Ein Team hat eine Design-Guideline und eine Struktur mit zwölf Folien vorbereitet und legt beides zusammen mit einem kurzen HTML-Briefing vor. Das Foliengerüst erstellt zunächst einen Preflight-Plan und stellt fest, dass zwei Folien deutlich zu viel Text tragen. Anschließend entstehen CSS-Variablen, Grundlayout und wiederverwendbare Komponenten wie Karte und Prozessdarstellung. Erst dann werden die einzelnen Folien darauf aufgebaut. Am Ende lässt sich die Datei im Browser öffnen und in einem Zug als PDF exportieren.", "eingaben": [ { "feld": "Markdown-Design-Guideline", "pflicht": true }, { "feld": "Folienstruktur", "pflicht": true }, { "feld": "HTML-Briefing", "pflicht": true }, { "feld": "CSS-Design-Tokens", "pflicht": false }, { "feld": "Exportziel", "pflicht": false }, { "feld": "Technische Anforderungen an die Ausgabe", "pflicht": false } ], "ausgabe": "Ein Preflight-Plan, eine vollständige HTML-Datei mit Designsystem, wiederverwendbaren Komponenten und Print-CSS für den PDF-Export, eine Anleitung zum lokalen Öffnen und zum Export sowie eine Liste der Stellen, die selbst noch geprüft werden sollten.", "prompt": "# BESCHREIBUNG\nSie bauen aus einer freigegebenen Folienstruktur, einer Markdown-Design-Guideline und einem HTML-Briefing eine vollständige HTML-Präsentation. Sie denken Designsystem, wiederverwendbare Komponenten und PDF-Export von Anfang an mit, nicht erst am Ende. Sprechen Sie die Nutzerin oder den Nutzer durchgehend in der Sie-Form an.\n\n# EINGABE\n- Markdown-Design-Guideline (Pflicht)\n- Folienstruktur (Pflicht)\n- HTML-Briefing (Pflicht)\n- CSS-Design-Tokens, falls bereits vorhanden (optional)\n- Exportziel, zum Beispiel Browser, PDF oder Präsentationsmodus (optional)\n- technische Anforderungen an die Ausgabe (optional)\n\n# AUSGABE\n- Preflight-Plan mit Folientypen, Komponenten und erkannten Risiken\n- vollständige, eigenständig nutzbare HTML-Datei\n- Anleitung zum lokalen Öffnen im Browser\n- Anleitung zum PDF-Export\n- Liste der Stellen, die eine Person zusätzlich prüfen sollte\n\n# KONTEXT\n- Designsystem vor Einzelfolie, Komponenten vor Sonderlösung: Eine bestehende Komponente wird wiederverwendet, bevor eine neue erfunden wird.\n- Eine Folie transportiert genau eine Aussage. Ist eine Folie zu voll, wird das im Preflight-Plan markiert statt sie stillschweigend zusammenzuquetschen.\n- PDF-Export wird von Beginn an mitgedacht, nicht nachträglich angeflickt.\n- Grenze: Halten Sie sich strikt an die mitgelieferte Design-Guideline. Erfinden Sie kein neues Gestaltungsmuster außerhalb der Guideline und keine zufälligen Farben. Fehlen CSS-Design-Tokens oder Angaben in der Guideline, leiten Sie sinnvolle Defaults ab und kennzeichnen Sie das ausdrücklich als Annahme, statt zu raten.\n\n# ARBEITSANWEISUNG\n\n## Schritt 1: Preflight-Plan erstellen\nLegen Sie, bevor Sie Code schreiben, eine Liste der benötigten Folientypen und Komponenten an und ordnen Sie jede Folie einem Folientyp zu. Folien mit zu viel Inhalt markieren Sie und schlagen eine Kürzung oder Aufteilung vor.\n\n## Schritt 2: Designsystem in CSS übersetzen\nLegen Sie CSS Custom Properties für Farben, Typografie, Abstände, Layoutgrößen, Linien, Schatten und Komponentenwerte an. Nutzen Sie vorhandene CSS-Design-Tokens aus der Guideline, fehlende Tokens leiten Sie aus der Guideline ab und kennzeichnen die Annahme.\n\n## Schritt 3: Grundlayout bauen\nErstellen Sie die Deck- und Folien-Grundstruktur, wiederverwendbare Layoutklassen, bei Bedarf Footer und Foliennummern sowie Print-Regeln für den PDF-Export. Achten Sie auf eine 16:9-Fläche und eine saubere Skalierung im Browser.\n\n## Schritt 4: Komponenten bauen\nDefinieren Sie wiederverwendbare Komponenten wie Headline, Card, Label, Badge, Grid, Vergleich, Prozessdarstellung, Framework, Tabelle und Zitat. Nutzen Sie diese konsequent und erfinden Sie keine neue Komponente, wenn eine vorhandene reicht.\n\n## Schritt 5: Folien erzeugen\nSetzen Sie jede Folie mit der passenden Layoutklasse um, machen Sie die Kernbotschaft als visuelle Hierarchie sichtbar, setzen Sie die Visual-Idee strukturiert um und reduzieren Sie die Textmenge, wo nötig.\n\n## Schritt 6: PDF-Export absichern\nErgänzen Sie Print-CSS mit fester Seitengröße, Seitenumbruch nach jeder Folie und gedruckten Hintergrundfarben, zum Beispiel:\n\n```css\n@media print {\n @page {\n size: 16:9;\n margin: 0;\n }\n .slide {\n page-break-after: always;\n break-after: page;\n }\n}\n```\n\nPrüfen Sie, dass keine Inhalte abgeschnitten werden und das Seitenverhältnis von 16:9 erhalten bleibt.\n\n## Schritt 7: Qualitätskontrolle\nPrüfen Sie jede Folie gegen die Definition of Done, bevor Sie das Ergebnis übergeben. Kennzeichnen Sie offene Annahmen und Stellen, die eine Person noch prüfen sollte.\n\n# DEFINITION OF DONE\n[ ] Preflight-Plan wurde erstellt\n[ ] Design Tokens wurden in CSS übersetzt\n[ ] Wiederverwendbare Komponenten wurden angelegt\n[ ] Jede Folie nutzt einen passenden Folientyp\n[ ] Jede Folie transportiert genau eine Hauptaussage\n[ ] Print-CSS für den PDF-Export ist enthalten\n[ ] Keine Folie ist offensichtlich überladen\n[ ] Stellen für die menschliche Prüfung sind benannt\n[ ] Die HTML-Datei ist eigenständig nutzbar\n[ ] Annahmen sind ausdrücklich gekennzeichnet\n\n# GESPRÄCHSSTART\nGuten Tag. Geben Sie mir Ihre Markdown-Design-Guideline, die Folienstruktur und das HTML-Briefing. Ich baue daraus eine vollständige HTML-Präsentation mit Designsystem, wiederverwendbaren Komponenten und einer Vorbereitung für den PDF-Export.", "einrichtung": { "intro": "Schritt-für-Schritt-Anleitungen für ChatGPT, Claude, Copilot Studio und Langdock.", "plattformen": [ { "plattform": "ChatGPT", "anbieter": "OpenAI", "schritte": [ "Kopieren Sie den Skill-Text oben über die Kopieren-Schaltfläche.", "Klicken Sie auf Ihr Profilbild und wählen Sie „Skills“.", "Klicken Sie auf „Skill erstellen“ und fügen Sie den kopierten Text als Anweisung ein.", "Passen Sie Eingaben, Ausgaben und Format an, wo es für Ihren Fall nötig ist.", "Speichern Sie den Skill. Er steht ab sofort in allen Chats zur Verfügung." ], "doku": { "label": { "de": "OpenAI Dokumentation: Skills in ChatGPT", "en": "OpenAI documentation: Skills in ChatGPT" }, "url": "https://help.openai.com/de-de/articles/20001066-skills-in-chatgpt" } }, { "plattform": "Claude", "anbieter": "Anthropic", "schritte": [ "Kopieren Sie den Skill-Text oben über die Kopieren-Schaltfläche.", "Öffnen Sie claude.ai und gehen Sie in Ihrem Profil auf „Skills“.", "Legen Sie einen neuen Skill an und fügen Sie den kopierten Text als Anweisung ein.", "Der Skill arbeitet in claude.ai, in Claude Code und über die API.", "Verfügbar in den Tarifen Pro, Max, Team und Enterprise." ], "doku": { "label": { "de": "Anthropic Dokumentation: Benutzerdefinierte Skills erstellen", "en": "Anthropic documentation: Creating custom skills" }, "url": "https://support.claude.com/de/articles/12512198-benutzerdefinierte-skills-erstellen" } }, { "plattform": "Copilot Studio", "anbieter": "Microsoft", "schritte": [ "Kopieren Sie den Skill-Text oben über die Kopieren-Schaltfläche.", "Öffnen Sie Copilot Studio und legen Sie einen neuen Agent an.", "Fügen Sie den kopierten Text als Anweisung ein.", "Verbinden Sie bei Bedarf Wissensquellen und Werkzeuge.", "Veröffentlichen Sie den Agent für sich selbst oder für Ihre Organisation." ], "doku": { "label": { "de": "Microsoft Dokumentation: Einen Agent erstellen und bereitstellen", "en": "Microsoft documentation: Create and deploy an agent" }, "url": "https://learn.microsoft.com/de-de/microsoft-copilot-studio/fundamentals-get-started" } }, { "plattform": "Langdock", "anbieter": null, "schritte": [ "Kopieren Sie den Skill-Text oben über die Kopieren-Schaltfläche.", "Öffnen Sie die Seitenleiste und klicken Sie auf „Skill hinzufügen“.", "Fügen Sie den kopierten Text direkt als Anweisung ein.", "Verbinden Sie den Skill bei Bedarf mit Integrationen, etwa Gmail oder Slack.", "Speichern Sie den Skill und geben Sie ihn für sich oder Ihr Team frei." ], "doku": { "label": { "de": "Langdock Dokumentation: Skills", "en": "Langdock documentation: Skills" }, "url": "https://docs.langdock.com/de/product/chat/skills" } } ] }, "itemIcon": "gallery-vertical-end", "recommended": [ { "slug": "canvas-design", "category": "skill", "name": "Das Bildwerk", "teaser": "Erstellt als ausführbarer Claude-Skill mit echter Code-Ausführung ein originales visuelles Werk als PDF oder PNG: zunächst eine eigene Design-Philosophie, danach deren museal anmutende Umsetzung mit minimalem, integriertem Text.", "domaene": "Design & Kreativ", "itemIcon": "palette" }, { "slug": "adobe-firefly", "category": "tool", "name": "Adobe Firefly", "teaser": "Adobes KI-Plattform für Bild, Video, Audio und Vektor-Generierung, nativ eingebettet in Photoshop, Illustrator, Express und Premiere.", "domaene": "Design & Kreativ", "logoFile": "adobe-firefly.png", "logoEinzug": 0.78 }, { "slug": "canva", "category": "tool", "name": "Canva", "teaser": "Eine breit genutzte Design-Plattform, mit der auch Teams ohne Design-Hintergrund Social-Media-Posts, Präsentationen und andere visuelle Inhalte erstellen.", "domaene": "Design & Kreativ", "logoFile": "canva.png", "logoEinzug": 1 }, { "slug": "claude-design", "category": "tool", "name": "Claude Design", "teaser": "KI-gestütztes Design-Werkzeug von Anthropic Labs, das beim Onboarding ein bestehendes Design-System einliest und fertige Entwürfe per Handoff-Bundle direkt an einen Coding-Agenten übergibt.", "domaene": "Design & Kreativ", "logoFile": "claude-design.svg", "logoEinzug": 1 }, { "slug": "comfyui", "category": "tool", "name": "ComfyUI", "teaser": "Node-basierter Open-Source-Editor für Bild-, Video- und 3D-Generierungs-Pipelines, mit voller Kontrolle über Sampler, Modelle und einzelne Verarbeitungsschritte.", "domaene": "Design & Kreativ", "logoFile": "comfyui.svg", "logoEinzug": 1 }, { "slug": "fireworks-tech-graph", "category": "tool", "name": "fireworks-tech-graph", "teaser": "Open-Source-Werkzeug zur bilingualen Generierung produktionsreifer technischer SVG- und PNG-Diagramme aus natürlichsprachigen Beschreibungen, mit UML- und KI-Architektur-Mustern.", "domaene": "Design & Kreativ" }, { "slug": "freepik", "category": "tool", "name": "Freepik", "teaser": "All in One Plattform für KI Bild, Video und Audio mit Zugang zu über 30 Modellen sowie einer großen Stock Bibliothek mit kommerzieller Lizenz.", "domaene": "Design & Kreativ", "logoFile": "freepik.svg", "logoEinzug": 0.78 }, { "slug": "krea", "category": "tool", "name": "Krea", "teaser": "Web-Plattform und API, die mehr als 40 KI-Bild- und Videomodelle verschiedener Anbieter, darunter Flux, Veo 3 und Kling, in einer gemeinsamen Oberfläche für Generierung, Editing, Upscaling und LoRA-Training bündelt.", "domaene": "Design & Kreativ", "logoFile": "krea.svg", "logoEinzug": 1 }, { "slug": "liquid-glass-js", "category": "tool", "name": "liquid-glass-js", "teaser": "Quelloffene Vanilla-JavaScript-Bibliothek für WebGL-basierte Glaseffekte im Stil von Apples Liquid Glass, mit echter Multi-Layer-Lichtbrechung statt CSS-Unschärfe für Buttons und Container.", "domaene": "Design & Kreativ" }, { "slug": "liquid-logo", "category": "tool", "name": "Liquid Logo", "teaser": "Kostenloses Open-Source-Browser-Tool, das aus einem hochgeladenen Logo per WebGL-Shader eine fließende Liquid-Metal-Animation erzeugt und wahlweise als PNG oder MP4 exportiert.", "domaene": "Design & Kreativ" }, { "slug": "magnific", "category": "tool", "name": "Magnific", "teaser": "Node-basierte Kreativplattform mit rund 30 KI-Werkzeugen für Bild, Video, Audio und 3D, einer angebundenen Lizenz-Bibliothek von über 250 Millionen Assets und MCP-Zugriff für KI-Assistenten.", "domaene": "Design & Kreativ", "logoFile": "magnific.svg", "logoEinzug": 0.78 }, { "slug": "midjourney", "category": "tool", "name": "Midjourney", "teaser": "KI-Plattform für Bild und Video-Generierung mit hoher ästhetischer Qualität, inklusive Moodboards und Personalization für konsistente Markenwelten.", "domaene": "Design & Kreativ", "logoFile": "midjourney.png", "logoEinzug": 0.78 }, { "slug": "napkin-ai", "category": "tool", "name": "Napkin AI", "teaser": "Text-zu-Diagramm-Tool, das aus Stichpunkten oder Fließtext automatisch Infografiken, Mindmaps und Flowcharts erzeugt.", "domaene": "Design & Kreativ", "logoFile": "napkin-ai.png", "logoEinzug": 0.78 }, { "slug": "playground-ai", "category": "tool", "name": "Playground AI", "teaser": "KI Bildgenerierungs- und Bearbeitungsplattform mit Canvas Editor, mehreren Modellen und Style Training für konsistente Marken Visuals.", "domaene": "Design & Kreativ", "logoFile": "playground-ai.png", "logoEinzug": 1 }, { "slug": "react-three-fiber", "category": "tool", "name": "React Three Fiber", "teaser": "React-Renderer für Three.js, mit dem sich 3D-Szenen, Shader-Effekte und WebGL-Content als deklarative React-Komponenten aufbauen lassen, bei vollem, verlustfreiem Zugriff auf die komplette Three.js-API.", "domaene": "Design & Kreativ", "logoFile": "react-three-fiber.svg", "logoEinzug": 1 }, { "slug": "shadergradient", "category": "tool", "name": "ShaderGradient", "teaser": "React-Bibliothek für animierte 3D-Gradient-Hintergründe auf WebGL-Basis, konfigurierbar über typisierte Props oder eine kopierbare Web-URL, mit Figma-Plugin und Framer-Komponente für den Einsatz außerhalb von React.", "domaene": "Design & Kreativ", "logoFile": "shadergradient.png", "logoEinzug": 1 }, { "slug": "stitch", "category": "tool", "name": "Stitch", "teaser": "KI-Design-Tool von Google Labs, das aus Textbeschreibungen, Skizzen oder Bildern UI-Wireframes und mehrstufige Screen-Flows erzeugt, mit Export nach Figma oder als Frontend-Code.", "domaene": "Design & Kreativ", "logoFile": "stitch.png", "logoEinzug": 0.78 }, { "slug": "transitions-dev", "category": "tool", "name": "transitions.dev-Skill", "teaser": "Externes Repository mit zwölf geprüften, portablen CSS-Übergängen für Standard-UI-Zustände (Modal, Dropdown, Erfolg, Fehler u. a.), gepackt als Skill für KI-Coding-Agenten.", "domaene": "Design & Kreativ" }, { "slug": "email-html-mjml", "category": "skill", "name": "Das E-Mail-Muster", "teaser": "Erstellt responsive MJML-4.x-E-Mail-Vorlagen und kompiliert sie zu produktionsreifem, client-geprüftem HTML für Outlook, Gmail, Apple Mail und mobile Clients, inklusive Dark-Mode-Muster und Barrierefreiheits-Checkliste.", "domaene": "Design & Kreativ", "itemIcon": "mails" }, { "slug": "21st-dev", "category": "tool", "name": "21st.dev", "teaser": "Community-betriebenes Registry-Verzeichnis für React- und Tailwind-Komponenten im shadcn-Format, aus dem sich Bausteine per CLI-Befehl oder KI-Prompt direkt in ein bestehendes Projekt kopieren lassen.", "domaene": "Design & Kreativ", "logoFile": "21st-dev.png", "logoEinzug": 0.78 } ] }