Skills· Design & Kreativ

    Das Foliengerüst

    Baut aus freigegebener Folienstruktur, Design-Guideline und HTML-Briefing zuerst ein Designsystem in CSS mit Farben, Typografie, Abständen und wiederverwendbaren Komponenten und setzt die einzelnen Folien erst danach darauf auf.

    gestaltendgenerierend

    Beschreibung

    Beispiel-Szenario

    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.

    Ablauf

    Jeder Schritt ist gekennzeichnet, wer ihn ausführt: Icon, Farbe und Beschriftung zeigen zusammen, ob ein Mensch handelt, ob es automatisch läuft, ob ein Ergebnis entsteht oder ob eine Freigabe nötig ist.

    01Mensch

    Markdown-Design-Guideline, Folienstruktur und HTML-Briefing werden bereitgestellt, CSS-Design-Tokens werden mitgegeben, falls bereits vorhanden.

    02Automatisch

    03Automatisch

    04Automatisch

    05Ergebnis

    Kennzeichnung
    MenschAutomatischErgebnisFreigabe

    Einsatz

    Markdown-Design-Guideline

    Pflicht

    Folienstruktur

    Pflicht

    HTML-Briefing

    Pflicht

    CSS-Design-Tokens

    Optional

    Exportziel

    Optional

    Technische Anforderungen an die Ausgabe

    Optional

    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.

    Skill-Text

    # BESCHREIBUNG
    Sie 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.
    
    # EINGABE
    - Markdown-Design-Guideline (Pflicht)
    - Folienstruktur (Pflicht)
    - HTML-Briefing (Pflicht)
    - CSS-Design-Tokens, falls bereits vorhanden (optional)
    - Exportziel, zum Beispiel Browser, PDF oder Präsentationsmodus (optional)
    - technische Anforderungen an die Ausgabe (optional)
    
    # AUSGABE
    - Preflight-Plan mit Folientypen, Komponenten und erkannten Risiken
    - vollständige, eigenständig nutzbare HTML-Datei
    - Anleitung zum lokalen Öffnen im Browser
    - Anleitung zum PDF-Export
    - Liste der Stellen, die eine Person zusätzlich prüfen sollte
    
    # KONTEXT
    - Designsystem vor Einzelfolie, Komponenten vor Sonderlösung: Eine bestehende Komponente wird wiederverwendet, bevor eine neue erfunden wird.
    - Eine Folie transportiert genau eine Aussage. Ist eine Folie zu voll, wird das im Preflight-Plan markiert statt sie stillschweigend zusammenzuquetschen.
    - PDF-Export wird von Beginn an mitgedacht, nicht nachträglich angeflickt.
    - 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.
    
    # ARBEITSANWEISUNG
    
    ## Schritt 1: Preflight-Plan erstellen
    Legen 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.
    
    ## Schritt 2: Designsystem in CSS übersetzen
    Legen 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.
    
    ## Schritt 3: Grundlayout bauen
    Erstellen 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.
    
    ## Schritt 4: Komponenten bauen
    Definieren 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.
    
    ## Schritt 5: Folien erzeugen
    Setzen 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.
    
    ## Schritt 6: PDF-Export absichern
    Ergänzen Sie Print-CSS mit fester Seitengröße, Seitenumbruch nach jeder Folie und gedruckten Hintergrundfarben, zum Beispiel:
    
    ```css
    @media print {
      @page {
        size: 16:9;
        margin: 0;
      }
      .slide {
        page-break-after: always;
        break-after: page;
      }
    }
    ```
    
    Prüfen Sie, dass keine Inhalte abgeschnitten werden und das Seitenverhältnis von 16:9 erhalten bleibt.
    
    ## Schritt 7: Qualitätskontrolle
    Prü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.
    
    # DEFINITION OF DONE
    [ ] Preflight-Plan wurde erstellt
    [ ] Design Tokens wurden in CSS übersetzt
    [ ] Wiederverwendbare Komponenten wurden angelegt
    [ ] Jede Folie nutzt einen passenden Folientyp
    [ ] Jede Folie transportiert genau eine Hauptaussage
    [ ] Print-CSS für den PDF-Export ist enthalten
    [ ] Keine Folie ist offensichtlich überladen
    [ ] Stellen für die menschliche Prüfung sind benannt
    [ ] Die HTML-Datei ist eigenständig nutzbar
    [ ] Annahmen sind ausdrücklich gekennzeichnet
    
    # GESPRÄCHSSTART
    Guten 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

    Schritt-für-Schritt-Anleitungen für ChatGPT, Claude, Copilot Studio und Langdock.

    ChatGPT

    OpenAI

    1. Kopieren Sie den Skill-Text oben über die Kopieren-Schaltfläche.
    2. Klicken Sie auf Ihr Profilbild und wählen Sie „Skills“.
    3. Klicken Sie auf „Skill erstellen“ und fügen Sie den kopierten Text als Anweisung ein.
    4. Passen Sie Eingaben, Ausgaben und Format an, wo es für Ihren Fall nötig ist.
    5. Speichern Sie den Skill. Er steht ab sofort in allen Chats zur Verfügung.
    Dokumentation

    Anthropic

    1. Kopieren Sie den Skill-Text oben über die Kopieren-Schaltfläche.
    2. Öffnen Sie claude.ai und gehen Sie in Ihrem Profil auf „Skills“.
    3. Legen Sie einen neuen Skill an und fügen Sie den kopierten Text als Anweisung ein.
    4. Der Skill arbeitet in claude.ai, in Claude Code und über die API.
    5. Verfügbar in den Tarifen Pro, Max, Team und Enterprise.
    Dokumentation

    Microsoft

    1. Kopieren Sie den Skill-Text oben über die Kopieren-Schaltfläche.
    2. Öffnen Sie Copilot Studio und legen Sie einen neuen Agent an.
    3. Fügen Sie den kopierten Text als Anweisung ein.
    4. Verbinden Sie bei Bedarf Wissensquellen und Werkzeuge.
    5. Veröffentlichen Sie den Agent für sich selbst oder für Ihre Organisation.
    Dokumentation

    1. Kopieren Sie den Skill-Text oben über die Kopieren-Schaltfläche.
    2. Öffnen Sie die Seitenleiste und klicken Sie auf „Skill hinzufügen“.
    3. Fügen Sie den kopierten Text direkt als Anweisung ein.
    4. Verbinden Sie den Skill bei Bedarf mit Integrationen, etwa Gmail oder Slack.
    5. Speichern Sie den Skill und geben Sie ihn für sich oder Ihr Team frei.
    Dokumentation

    Umsetzung

    1. Design-Grundlagen vorbereiten

      Design-Guideline und Folienstruktur liegen am besten vollständig vor dem Start bereit, sonst bleibt das Ergebnis generisch.

    2. Passendes Werkzeug wählen

      Der Skill-Text wird in ein KI-Tool eingesetzt, das sauberen, vollständigen HTML-Code ausgeben kann.

    3. Preflight-Plan durchsehen

      Folien mit zu viel Text oder einer unklaren Visual-Idee verdienen vor dem Weiterbau einen zweiten Blick.

    4. HTML im Browser öffnen

      Das fertige Deck wird lokal geöffnet und auf Layout, Lesbarkeit und Konsistenz der Komponenten geprüft.

    5. PDF-Export testen

      Ein einmaliger Testexport zeigt, ob Inhalte abgeschnitten werden oder Hintergrundfarben beim Druck fehlen.

    Stand:

    Im Workshop wird daraus Ihre Methode.

    Aus einem einzelnen Prompt wird eine wiederholbare Methode. Das zeigen wir im Workshop Vom Prompt zur Methode.

    Workshops ansehen

    Gespräch statt Pitch

    Erst verstehen, dann entscheiden. Wir nehmen uns Zeit für ein erstes Gespräch, ohne Verkaufsdruck, ohne Verpflichtung.

    Gespräch vereinbaren