Infographic-Generator

Infografik-Generator

Erstelle vollständige Infografik-Spezifikationen aus beliebigen Inhalten, Daten oder Themen. Ausgabe mit strukturiertem Layout + allen Texten + Datenpunkten + Farbschema – bereit zur Darstellung als HTML/CSS, mit Satori (serverseitig), in Canva, Figma oder jedem anderen Design-Tool.

LinkedIn-Beiträge mit Bildern erhalten 2-3x mehr Engagement. Dieses Skill verwandelt deine Inhalte in visuelle Assets – ganz ohne Designkenntnisse.

Inspiriert vom content-pipeline-Satori-Rendering: KI schreibt den Inhalt → strukturierte Spezifikation → gerendert als gebrandetes Bild.

Phase

Dieses Skill gehört zu Phase S2: Content

Verwendung

• Nach viral-post-writer einen LinkedIn-Beitrag erstellen – füge ein visuelles Element hinzu
• Nach content-research-brief Statistiken sammeln – visualisiere sie
• Beim Erstellen von Vergleichsinhalten – Feature-/Preisvergleichs-Chart
• Beim Teilen von Daten oder Statistiken – Statistik-Highlight-Karten
• Beim Erstellen eines Listicles – visuelle Checkliste oder nummerierte Liste
• Für jeden Social-Media-Beitrag, der von einem gebrandeten Bild profitiert

Eingabeschema

content: string                # (erforderlich) Zu visualisierender Inhalt – Beitragstext, Daten oder Artikel
infographic_type: string       # (optional, Standard: automatisch erkannt)
                               # "stat_highlight" – 1-3 Schlüsselzahlen, groß und fett
                               # "comparison" – Produkt-/Funktionsvergleich nebeneinander
                               # "process_flow" – Schritt-für-Schritt-Workflow oder Anleitung
                               # "checklist" – Liste von Elementen mit Häkchen
                               # "timeline" – chronologische Ereignisse
                               # "data_chart" – Balken-/Kreisdiagramm-Darstellung
                               # "quote_card" – Hervorgehobenes Zitat mit Quellenangabe
                               # "feature_grid" – Raster von Funktionen/Vorteilen mit Symbolen
platform: string               # (optional, Standard: "linkedin")
                               # "linkedin" – 1080×1350 (Hochformat, optimales Engagement)
                               # "instagram" – 1080×1080 (quadratisch)
                               # "twitter" – 1200×675 (Querformat)
                               # "facebook" – 1200×630
                               # "blog" – 1200×800 (Beitragsbild)
brand: object                  # (optional) Markenanpassung
  name: string                 # Firmen-/Personenmarkenname
  primary_color: string        # Hex – "#0066FF"
  secondary_color: string      # Hex – "#1A1A2E"
  accent_color: string         # Hex – "#FF6B35"
  font_style: string           # "modern" | "classic" | "bold" | "minimal"
  logo_text: string            # Textbasiertes Logo – "Affitor" | "@deinhandle"
output_format: string          # (optional, Standard: "spec")
                               # "spec" – strukturierte JSON-Spezifikation (für jeden Renderer)
                               # "html" – renderbares HTML/CSS (in sich geschlossen)
                               # "both" – Spezifikation + HTML

Arbeitsablauf

Schritt 1: Inhalt analysieren und Typ auswählen

Lies den Eingabeinhalt und erkenne den besten Infografik-Typ:

Inhaltsmuster	Automatisch erkannter Typ
Enthält 1-3 prominente Zahlen/Statistiken	stat_highlight
Enthält "vs", Vergleichsdaten	comparison
Enthält nummerierte Schritte oder einen Prozess	process_flow
Enthält eine Liste von Elementen (3-10)	checklist oder feature_grid
Enthält Daten oder chronologische Ereignisse	timeline
Enthält ein bemerkenswertes Zitat	quote_card
Enthält Prozentangaben oder Anteile	data_chart

Wenn infographic_type angegeben ist, verwende diesen. Andernfalls automatisch erkennen.

Schritt 2: Visuelle Daten extrahieren

Extrahiere aus dem Inhalt genau das, was in der Infografik erscheinen soll:

Für stat_highlight:

stats:
  - number: "30%"        # Die große Zahl
    label: "Provision"   # Was sie misst
    context: "wiederkehrend"  # Zusätzlicher Kontext
  - number: "60"
    label: "Cookie-Tage"
    context: "Branchendurchschnitt: 30"

Für comparison:

items:
  - name: "HeyGen"
    features:
      - label: "Provision"
        value: "30% wiederkehrend"
        highlight: true         # Gewinner für diese Zeile
      - label: "Cookie"
        value: "60 Tage"
        highlight: true
  - name: "Synthesia"
    features:
      - label: "Provision"
        value: "25% einmalig"
        highlight: false
      - label: "Cookie"
        value: "30 Tage"
        highlight: false

Für process_flow:

steps:
  - number: 1
    title: "Recherche"
    description: "Finde erfolgreiche Programme"
    icon: "🔍"
  - number: 2
    title: "Erstellen"
    description: "Schreibe Inhalte, die konvertieren"
    icon: "✍️"

Für checklist:

items:
  - text: "Wiederkehrende Provision"
    checked: true
  - text: "60+ Tage Cookie"
    checked: true
  - text: "Kostenlose Testversion verfügbar"
    checked: true
  - text: "Dedizierter Affiliate-Manager"
    checked: false

Schritt 3: Layout entwerfen

Basierend auf Typ + Plattform das Layout definieren:

Plattformabmessungen:

Plattform	Breite	Höhe	Seitenverhältnis
LinkedIn	1080	1350	4:5 (Hochformat)
Instagram	1080	1080	1:1 (Quadrat)
Twitter	1200	675	16:9 (Querformat)
Facebook	1200	630	~2:1
Blog	1200	800	3:2

Layout-Struktur (alle Typen):

┌─────────────────────────────┐
│         KOPFZEILE            │  10-15% Höhe
│    Überschrift / Titel       │
├─────────────────────────────┤
│                             │
│         HAUPTTEIL           │  70-80% Höhe
│    Daten / Inhalt           │
│    (typspezifisches Layout) │
│                             │
├─────────────────────────────┤
│         FUSSZEILE           │  10% Höhe
│    Marke / CTA / Quelle     │
└─────────────────────────────┘

Schritt 4: Farbschema generieren

Wenn Markenfarben angegeben sind: Verwende sie direkt.

Wenn keine Markenfarben: Generiere eine professionelle Palette:

# Optionen für die Standard-Palette
palettes:
  dark_modern:       # Dunkler Hintergrund, helle Schrift
    bg: "#1A1A2E"
    text: "#FFFFFF"
    accent: "#0066FF"
    secondary: "#16213E"
    
  light_clean:       # Heller Hintergrund, dunkle Schrift
    bg: "#FFFFFF"
    text: "#1A1A2E"
    accent: "#0066FF"
    secondary: "#F0F4F8"
    
  warm_bold:         # Warme Töne
    bg: "#FFF8F0"
    text: "#2D2D2D"
    accent: "#FF6B35"
    secondary: "#FFE8D6"
    
  dark_gradient:     # Verlaufsdunkel
    bg: "linear-gradient(135deg, #1A1A2E, #16213E)"
    text: "#FFFFFF"
    accent: "#00D4AA"
    secondary: "#2A2A4A"

Automatisch basierend auf Plattform auswählen:

• LinkedIn → dark_modern oder light_clean (professionell)
• Twitter → dark_gradient oder warm_bold (aufmerksamkeitsstark)
• Instagram → Beliebig (meiste visuelle Flexibilität)

Schritt 5: Alle Texte generieren

Schreibe jeden Text, der in der Infografik erscheint:

copy:
  headline: string          # Haupttitel – fett, kurz (max. 8 Wörter)
  subheadline: string       # Optionale unterstützende Zeile
  body_items: string[]      # Datenbeschriftungen, Beschreibungen usw.
  cta: string               # Call-to-Action-Text – "Link in Bio" | "Siehe Kommentare für Link"
  footer: string            # Markenname oder @handle
  source: string            # "Daten: openaffiliate.dev" oder Quellenangabe

Textregeln:

• Überschriften: 3-8 Wörter, kühne Behauptung oder konkrete Zahl
• Alle Texte müssen auf mobiler Skalierung lesbar sein (nicht zu klein)
• Nicht mehr als 50 Wörter auf der Infografik (weniger = besser)
• Daten > Adjektive (zeige Zahlen, nicht "erstaunlich" oder "unglaublich")

Schritt 6: Ausgabe

Spezifikationsausgabe (Standard):

Vollständige strukturierte Spezifikation, die jeder Renderer verwenden kann:

infographic_spec:
  type: string
  platform: string
  dimensions:
    width: number
    height: number
  colors:
    background: string
    text: string
    accent: string
    secondary: string
  layout:
    header: object
    body: object
    footer: object
  data: object              # Typspezifische Daten (Statistiken, Vergleichselemente, Schritte usw.)
  copy:
    headline: string
    subheadline: string
    body_items: string[]
    cta: string
    footer: string
    source: string

HTML-Ausgabe (wenn output_format "html" oder "both" ist):

Generiere eine in sich geschlossene HTML-Datei mit inline CSS, die die Infografik in exakten Abmessungen rendert. Diese kann:

• Im Browser geöffnet und als Screenshot aufgenommen werden
• Serverseitig mit Satori oder Puppeteer gerendert werden
• Als Ausgangspunkt für Designiterationen verwendet werden

<!-- In sich geschlossen, keine externen Abhängigkeiten -->
<div style="width: 1080px; height: 1350px; ...">
  <!-- Kopfzeile -->
  <!-- Hauptteil (typspezifisch) -->
  <!-- Fußzeile -->
</div>

Schritt 7: Selbstvalidierung

Überprüfe vor der Präsentation der Ausgabe:

• Gesamtwortzahl auf der Infografik ≤ 50 Wörter
• Alle Texte bei 50% Zoom lesbar (minimale effektive Schriftgröße)
• Farbkontrast erfüllt Barrierefreiheitsanforderungen (WCAG AA: 4.5:1-Verhältnis)
• Datenpunkte sind korrekt und mit Quellenangabe versehen
• Layout wirkt nicht überladen – Weißraum ist beabsichtigt
• Plattformabmessungen sind korrekt

Wenn eine Prüfung fehlschlägt, korrigiere vor der Auslieferung.

Ausgabeformat

## Infografik: [Überschrift]

### Spezifikation
- **Typ:** [stat_highlight]
- **Plattform:** [LinkedIn] — 1080×1350
- **Farben:** [dark_modern] — bg: #1A1A2E, accent: #0066FF

### Vorschau (Textdarstellung)

┌─────────────────────────────────┐
│                                 │
│     HeyGen vs Synthesia         │
│     Der echte Vergleich         │
│                                 │
│  ┌──────────┐  ┌──────────┐    │
│  │  HeyGen  │  │Synthesia │    │
│  │          │  │          │    │
│  │ 30% wie. │  │ 25% einm.│    │
│  │ 60 Tage  │  │ 30 Tage  │    │
│  │ ★ 127    │  │ ★ 84     │    │
│  └──────────┘  └──────────┘    │
│                                 │
│     🏆 Gewinner: HeyGen         │
│                                 │
│  ───────────────────────────    │
│  @deinhandle · openaffiliate.dev │
└─────────────────────────────────┘

### Daten

[Strukturierte Spezifikation als YAML oder JSON]

### HTML (falls angefordert)

[In sich geschlossener HTML/CSS-Codeblock]

### Nächste Schritte
- Veröffentliche auf [Plattform] mit deinem viralen Beitrag von `viral-post-writer`
- Erstelle Variationen für andere Plattformen: `--platform instagram`
- Generiere weitere Infografiken aus verschiedenen Daten deines `content-research-brief`

Fehlerbehandlung

• Inhalt hat keine extrahierbaren Daten: Generiere stattdessen einen quote_card- oder checklist-Typ. Hinweis: "Keine numerischen Daten gefunden. Stattdessen wurde eine [Typ]-Infografik erstellt."
• Zu viele Daten für eine Infografik: Wähle die 3-5 wirkungsvollsten Datenpunkte aus. Hinweis: "Der Inhalt enthält [X] Datenpunkte. Für die visuelle Klarheit wurden die [Y] wirkungsvollsten ausgewählt. Erwäge die Erstellung mehrerer Infografiken."
• Keine Markenfarben: Verwende Standardpalette. Hinweis: "Keine Markenfarben angegeben. Verwende [Palettenname]. Füge Markenfarben für ein konsistentes Branding hinzu."
• HTML-Ausgabe zu komplex: Vereinfache das Layout. Infografiken sollten einfach sein – Komplexität beeinträchtigt die visuelle Wirkung.

Beispiele

Beispiel 1: Benutzer: "Erstelle eine Infografik, die HeyGen mit Synthesia für LinkedIn vergleicht" → Typ: comparison, Plattform: linkedin (1080×1350) → Extrahiere: Provision, Cookie, Bewertung, Preis für jeden → Ausgabe: Side-by-Side-Vergleichskarte mit hervorgehobenem Gewinner → Dunkle moderne Palette, fette Zahlen

Beispiel 2: Benutzer: "Erstelle eine Statistik-Karte aus meinem Research-Brief, die die wichtigsten Zahlen von HeyGen zeigt" → Typ: stat_highlight, Plattform: linkedin → Extrahiere: "$60M eingesammelt", "40K Unternehmen", "30% Provision" → Ausgabe: 3 große Zahlen mit Beschriftungen und Kontext

Beispiel 3: Benutzer: "Visualisiere die Schritte des Affiliate-Funnels als Infografik" → Typ: process_flow, Plattform: blog (1200×800) → Schritte: Recherche → Inhalt → Landingpage → Bereitstellen → Verfolgen → Optimieren → Ausgabe: horizontaler Ablauf mit Symbolen und kurzen Beschreibungen

Feedback & Problemberichte

Wenn dieses Skill unerwartete, unvollständige oder falsche Ausgaben produziert, generiere einen skill_feedback-Block (siehe shared/references/feedback-protocol.md für das vollständige Schema).

Skillspezifische Fehlermodi:

• Keine extrahierbaren Daten aus dem Inhalt: Der Inhalt ist rein narrativ, keine Statistiken/Zahlen. Melde als data_quality.
• HTML-Ausgabe rendert nicht korrekt: CSS-Probleme, falsche Abmessungen, Textüberlauf. Melde als wrong_output mit dem HTML.
• Zu viele Wörter auf der Infografik: >50 Wörter macht sie unlesbar. Melde als wrong_output.

Auto-Erkennungsauslöser:

• infographic_spec.data hat <2 Datenpunkte
• Gesamtwortzahl in allen Kopierfeldern > 60
• Abmessungen entsprechen nicht der deklarierten Plattform

Probleme melden: GitHub Issues | Diskussionen

Referenzen

• shared/references/social-data-providers.md — Datenquellen für Infografik-Inhalte
• shared/references/platform-rules.md — Plattformspezifische Bildanforderungen
• shared/references/flywheel-connections.md — Haupt-Flywheel-Verbindungskarte
• shared/references/feedback-protocol.md — Standard für Problemerkennung und -meldung

Flywheel-Verbindungen

Speist ein in

• social-media-scheduler (S5) — Infografik bereit zur Planung mit Beitrag
• landing-page-creator (S4) — Infografik als Hero-Bild oder Abschnittsvisual
• email-drip-sequence (S5) — Infografik als visueller E-Mail-Inhalt
• bio-link-deployer (S5) — Infografik im Link-Hub

Gespeist von

• content-research-brief (S2) — Schlüsselstatistiken und Daten zur Visualisierung
• viral-post-writer (S2) — Beitragsinhalt zum Erstellen eines begleitenden visuellen Elements
• affiliate-blog-builder (S3) — Blogdaten für Infografik als Beitragsbild
• trending-content-scout (S1) — Engagement-Daten für Benchmark-Visuals
• traffic-analyzer (S1) — Verkehrsdaten für Vergleichsinfografiken
• comparison-post-writer (S3) — Vergleichsdaten für visuelles Format
• commission-calculator (S1) — Provisionsdaten für Statistik-Highlights

Rückkopplungsschleife

• S6-Beiträge mit Infografiken vs. ohne → `performance-…

... (gekürzt für Übersetzung)