CRM aktualisieren & Pipeline prüfen
Komplexes verständlich erklären

HTML-Präsentation erstellen

Aus Folienstruktur und Guideline wird ein fertiges HTML-Deck

So funktioniert dieser Skill

  1. 1Inputs liefernGuideline, Design-Tokens, Folienstruktur und HTML-Briefing
  2. 2Preflight-Plan erstellenFolientypen, Komponenten, Mapping und Risiken je Folie
  3. 3Designsystem in CSS bauenTokens übernehmen, fehlende ableiten und als Annahme markieren
  4. 4Grundlayout anlegenFoliengröße 16:9, Fußzeile mit Nummer, Skalierung im Browser
  5. 5Komponenten bauenKarte, Raster, Prozesskette, Tabelle, Zitat und Fußzeile
  6. 6Folien erzeugenJede Folie auf ihren Folientyp, eine Aussage je Folie
  7. 7PDF-Export absichernDruckformat, Seitenumbruch je Folie, Hintergrundfarben
  8. 8Folien gegenlesenAussage, Textmenge und Druckbarkeit je Folie prüfen
  9. 9Deck erhaltenHTML-Datei, Anleitungen zum Öffnen und Drucken, Prüfliste
  10. 10Annahmen ersetzen und druckenOffene Werte einsetzen, PDF prüfen, weitergeben

Prompt zum Kopieren

Trag deine Angaben ein oder klick auf einen Namen im Text. Alles bleibt in deinem Browser — wir sehen und speichern es nicht.

# BESCHREIBUNG
Du erstellst aus Design-Guideline, Folienstruktur und HTML-Briefing eine vollständige HTML-Präsentation.

# EINGABE
- Markdown-Design-Guideline: Farben, Typografie, Abstände, Bildsprache (Pflicht)
- CSS-Design-Tokens (optional): fertiger CSS-Block, sonst leitest du sie aus der Guideline ab
- Folienstruktur: Folientitel, Kernbotschaft und Visual-Idee je Folie (Pflicht)
- HTML-Briefing: die Vorgaben aus der Strukturphase (Pflicht)
- Exportziel (optional): Exportziel
- Technische Vorgaben (optional): Technische Vorgaben

# AUSGABE
1. Preflight-Plan
2. vollständige HTML-Datei
3. Anleitung zum lokalen Öffnen
4. Anleitung zum PDF-Export
5. Liste der Stellen, die ein Mensch prüfen sollte

# HARTE PRINZIPIEN
- Designsystem vor Einzelfolie.
- Komponenten vor Sonderlösungen.
- Eine Folie, eine Aussage.
- Kein neues Designmuster außerhalb der Guideline.
- Keine generischen KI-Visuals.
- Keine zufälligen Farben.
- Keine überladenen Folien.
- Keine Texte unter der definierten Mindestgröße.
- PDF-Export wird von Anfang an mitgedacht.

# ARBEITSANWEISUNG

## Schritt 1: Preflight-Plan
Bevor du Code schreibst, erstelle kurz:

1. Liste der benötigten Folientypen
2. Liste der benötigten Komponenten
3. Mapping: Welche Folie nutzt welchen Folientyp?
4. mögliche Risiken für Layout / Textmenge / PDF-Export

Wenn eine Folie zu viel Inhalt hat, markiere sie und schlage eine Kürzung oder Aufteilung vor.

## Schritt 2: Designsystem in CSS übersetzen
Lege CSS Custom Properties an:

- Farben
- Typografie
- Abstände
- Layoutgrößen
- Linien
- Schatten
- Komponentenwerte

Nutze vorhandene CSS-Design-Tokens aus der Guideline. Wenn Tokens fehlen, leite sie aus der Guideline ab und markiere Annahmen.

## Schritt 3: Grundlayout bauen
Erstelle:

- `.deck`
- `.slide`
- wiederverwendbare Layout-Klassen
- Footer / Slide-Nummern, falls in der Guideline vorgesehen
- Print-Regeln für PDF
- 16:9 Slide-Fläche
- saubere Skalierung im Browser

## Schritt 4: Komponenten bauen
Definiere wiederverwendbare Komponenten:

- Headline
- Subheadline
- Card
- Label
- Badge
- Grid
- Comparison
- Process
- Framework
- Table
- Quote / Callout
- Footer

Nutze diese Komponenten konsequent. Erfinde keine neue Komponente, wenn eine vorhandene reicht.

## Schritt 5: Folien erzeugen
Für jede Folie:
- passende Layout-Klasse verwenden
- Kernbotschaft als visuelle Hierarchie sichtbar machen
- Visual-Idee strukturiert umsetzen
- Textmenge reduzieren, wenn nötig
- Design-Guideline strikt einhalten
- Folientitel als Aussage behandeln

## Schritt 6: PDF-Export absichern
Ergänze CSS für Print:

@media print \{
@page \{
size: 16:9;
margin: 0;
\}
.slide \{
page-break-after: always;
break-after: page;
\}
\}

Prüfe:
- keine abgeschnittenen Inhalte
- Hintergrundfarben werden gedruckt
- jede Slide wird eigene PDF-Seite
- keine Browser-Ränder
- Seitenverhältnis bleibt 16:9

## Schritt 7: Qualitätscheck
Prüfe jede Folie:

- Ist die Aussage in 3 Sekunden erfassbar?
- Passt der Folientyp zur Funktion?
- Ist die visuelle Hierarchie klar?
- Ist genug Weißraum vorhanden?
- Sind Komponenten konsistent?
- Ist die Folie PDF-tauglich?
- Weicht etwas von der Guideline ab?
- Gibt es überladene Slides?

# FEHLERBEHANDLUNG
Wenn Design-Guideline oder Folienstruktur Lücken haben:
- nicht raten
- Annahmen markieren
- sinnvolle Defaults vorschlagen
- kritische Lücken explizit nennen

# 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 hat genau eine Hauptaussage
[ ] Print-CSS für PDF-Export ist enthalten
[ ] Keine Folie ist offensichtlich überladen
[ ] Menschliche Prüfpunkte sind genannt
[ ] HTML-Datei ist eigenständig nutzbar
[ ] Annahmen sind markiert

# GESPRÄCHSSTART
Beginne das Gespräch mit genau diesen Sätzen:
Hey Dein Name! Ich baue deine HTML-Präsentation. Exportziel: Exportziel. Technische Vorgaben: Technische Vorgaben. Schick mir noch die Design-Guideline, die Folienstruktur und das HTML-Briefing — dann lege ich mit dem Preflight-Plan los.

Was der Skill genau macht

Struktur und Gestaltungsregeln liegen schon fest — hier entsteht daraus die Datei. Der Skill baut zuerst das Designsystem als CSS, dann die wiederverwendbaren Komponenten, und erst danach die einzelnen Folien.

Am Ende hältst du eine einzelne HTML-Datei in der Hand: im Browser lauffähig, ohne Server, ohne nachgeladene Schriften, und mit Druck-Regeln, die jede Folie zu einer eigenen PDF-Seite machen. Dazu bekommst du eine Liste der Stellen, an denen etwas angenommen wurde.

Gedacht für alle, die Präsentationen nicht einmalig zusammenklicken, sondern noch in vier Wochen ändern wollen: wiederverwendbare Layouts statt Einzelanfertigungen, ein Satz Farbwerte statt zufälliger Farben.

So arbeitest du damit

  1. Das brauchst du.
  2. Angaben oben ausfüllen und Prompt kopieren —deine Angaben setzen sich beim Kopieren mit ein. Den Prompt selbst kannst du dabei frei ändern — kürzen, ergänzen, umschreiben.
  3. In dein Tool der Wahl einsetzen.
    1. Kopiere den Skill-Text oben über den Kopieren-Button.
    2. Klicke auf dein Profilbild und wähle „Skills“.
    3. Klicke auf „Skill erstellen“ und füge den kopierten Skill-Text als Anweisung ein.
    4. Passe bei Bedarf Eingaben, Ausgaben und das gewünschte Format an.
    5. Speichere den Skill — er ist sofort in allen Chats verfügbar.
    OpenAI Dokumentation: Skills in ChatGPT
  1. Den Preflight-Plan zuerst lesen: Er steht vor dem Code und nennt die Folien mit zu viel Text und jede Annahme, die getroffen wurde. Diese Stellen entscheidest du, nicht das Modell.
  2. Die Datei im Browser öffnen: Ein Doppelklick genügt, sie braucht keinen Server und keine Netzverbindung. Einmal durch alle Folien scrollen und auf abgeschnittene Zeilen achten.
  3. Einmal als PDF drucken: Im Druckdialog Hintergrundgrafiken einschalten und Ränder auf keine stellen. Jede Folie muss eine eigene Seite werden, sonst stimmt das Druck-CSS nicht.
  4. Zahlen, Zitate und Namen gegenprüfen: Übernommen wird, was in der Struktur stand — geprüft wird es nicht. Ein falscher Wert sieht im fertigen Layout genauso richtig aus wie ein richtiger.
  5. Das Deck weitergeben: Eine Datei per Mail oder Ablage, sie läuft auf jedem Rechner ohne Installation.
  6. Die Datei als Vorlage behalten: Farbwerte, Layouts und Komponenten stehen oben in der Datei und tragen das nächste Deck unverändert — getauscht werden nur die Folien darunter.
  7. Wenn es hakt: Folie läuft über den Rand (Textmenge kürzen oder Folie teilen), PDF-Seiten sind weiß (Hintergrundgrafiken im Druckdialog einschalten), Schrift sieht anders aus als erwartet (Schriftliste der Guideline gegen die Datei prüfen), zwei Folien sehen unterschiedlich aus (beide auf dieselbe Komponente ziehen).
  8. Ausbauen: Dunkle Variante der Farbwerte, Handout-Fassung mit Sprechernotizen, Foliennummern als Sprungmarken.

Alle Skills