Infografik

Redaktionelle Infografik

Referenzstil: Der Beitrag „Anthropic enters consulting.“ Dieser Beitrag enthält:

• eine fette zweizeilige Überschrift, die zweite Zeile in der Akzentfarbe;
• einen Dek: ein einfacher Satz, der beschreibt, was passiert ist;
• ein großes Hauptobjekt aus Teilen mit nummerierten Beschriftungen, die darauf zeigen;
• eine Randnotiz;
• eine „Warum es passiert“-Reihe mit drei Symbolspalten;
• eine Autorenzeile und eine Quellenzeile.

Der Punkt ist, eine Idee in etwa 10 Sekunden zu erklären.

Format

• Standard: ein einzelnes Standbild, 1080×1350 (4:5). Es eignet sich für LinkedIn- und Instagram-Feeds und ist gut speicherbar.
• Als Karussell-Folie: Die Größe entspricht den Karussells, sodass das PNG als {"type": "photo", "image": "images/x.png", "fit": "contain"} eingefügt oder als Cover verwendet werden kann.
• Als Präsentationsfolie: Das 4:5-Layout passt nicht auf 16:9. Erstelle ein separates 16:9-Layout, falls der Benutzer eines benötigt.

Bestandteile:

• Vorlage: pipeline/remotion/src/Infographic.tsx.
• Build: pipeline/build_infographic.py.
• Jede Infografik lebt in einem eigenen Ordner infographics/<slug>/ mit einer infographic.json und einem optionalen Unterordner images/.
• Ausgabe: out/infographics/<slug>.png.

1. Wähle eine Idee mit Bestandteilen

Gut geeignet:

• ein Schritt mit 2–4 Komponenten: „Anthropic enters consulting“ mit Strategie, Betrieb und Technologie;
• eine Architektur: die Quellen, Konnektoren, Zeitplan und Ausgaben des Morning Loop;
• ein Framework oder ein Vorher → Nachher.

Wenn die Idee eine einzelne Zahl ist, verwende eine Karussell-graphic-Folie oder einen Kurzbeitrag. Wenn mehr als 4 Teile nötig sind, erstelle ein Karussell.

2. Schreibe den Text (knapp)

• Überschrift: zwei Zeilen, 2–4 Wörter pro Zeile, mit einem Punkt am Ende der zweiten Zeile. Zeile 2 ist der Höhepunkt.
  • Beispiele: ["Anthropic enters", "consulting."], ["Your AI chief", "of staff."].
• Dek: ein Satz, höchstens 25 Wörter: Wer hat was getan und warum es wichtig ist.
• Callouts: 2–4 Elemente. Jedes hat einen title von 1–2 Wörtern und text von höchstens 12 Wörtern.
  • Sie werden von oben nach unten gelesen, ordne sie also als Sequenz oder als Schichten an (oben = am strategischsten).
• Randnotiz: optional. Eine auffällige Tatsache, höchstens 22 Wörter, z. B. „Ausbildung von 10.000 Ingenieuren bis 2027…“.
• Warum: ein Titel wie „Warum sie es tun“ oder „Warum eins bauen“, plus genau 3 Elemente. Jedes Element hat einen 2–3 Wörter umfassenden title und text von höchstens 7 Wörtern.
• Autorenzeile: {"name", "org"}. Quellen: die Veröffentlichungen, die Episode oder „Fringe Lines Podcast, “.

Ehrlichkeit:

• Jede Tatsache benötigt eine Quelle, die du in sources nennen kannst.
• Füge keine Zahlen hinzu, die die Quelle nicht angibt.
• Verwende Absicherungen („angeblich“, „laut S-1“), wenn nur ein Medium darüber berichtet hat.

3. Hauptbild

• Standard: der integrierte Blockstapel ("hero": {"label": "Anthropic"}). Er zeichnet einen isometrischen Akzentfarbblock pro Callout, abwechselnd versetzt, mit Führungslinien, die auf jedem Block enden, und dem Label auf dem obersten Block. Es ist keine Bilddatei erforderlich.
• Bild-Hauptbild: "hero": {"image": "images/hero.png", "fit": "contain"}. Verwende einen Produktscreenshot, ein Diagramm oder eine Folie aus der Bildschirmfreigabe der Episode oder ein bereitgestelltes Objekt-/Ortsbild. Niemals die Gastgeber oder echte Personen: keine Kameraaufnahmen oder Porträts.
• KI-generierte Bilder (wie die Beton-Render des Referenzbeispiels): nur wenn der Benutzer darum bittet, z. B. über den Canva-Konnektor. Keine echten Personen und keine gefälschten „Fotos“ von echten Ereignissen.

4. infographics/<slug>/infographic.json

{
  "headline": ["Your AI chief", "of staff."],
  "dek": "Quinns \"Morning Loop\"-Agent liest jeden Wochentag um 8 Uhr seine Arbeitswerkzeuge und übergibt ihm eine Zusammenfassung, bevor er seinen Laptop öffnet.",
  "hero": {"label": "Morning Loop"},
  "callouts": [
    {"title": "Quellen", "text": "Outlook-Mail, Kalender und To-Do, Slack, Asana, SharePoint."},
    {"title": "Konnektoren", "text": "Zugelassene Unternehmenskonnektoren greifen auf jede Quelle zu."}
  ],
  "side": {"title": "Den Kreis schließen", "text": "Am Ende des Tages antwortet er auf die Zusammenfassung…"},
  "why": {"title": "Warum eins bauen", "items": [
    {"icon": "clock", "title": "Starte voraus", "text": "Die Sichtung ist vor 9 erledigt."},
    {"icon": "check", "title": "Nichts entgeht", "text": "Es markiert, was du verpasst hast."},
    {"icon": "plug", "title": "Keine neuen Tools", "text": "Nutzt den Stack, den du bereits bezahlst."}
  ]},
  "byline": {"name": "Fringe Lines", "org": "Folge vom 30. Okt. 2026"},
  "sources": "Fringe Lines Podcast, 30. Okt. 2026.",
  "accent": "#FF5A1F"
}

• Symbole: chart rings target users bolt shield dollar clock globe check mail calendar plug brain. Füge bei Bedarf ein neues zur Icon-Map in Infographic.tsx hinzu: ein 36×36-Strich-Pfad.
• Akzentfarbe: Standardmäßig Fringe Lines Orange. Das Rot des Referenzbeispiels ist #C8231B.

5. Rendern und Qualitätssicherung

~/.shorts-skill/bin/python pipeline/build_infographic.py infographics/<slug>

Das Rendern dauert etwa 20 Sekunden. Öffne das PNG und überprüfe:

• Die Überschrift passt in 2 Zeilen. Wenn nicht, kürze sie; verkleinere sie nicht.

• Der Dek passt in 3 Zeilen oder weniger.

• Callout-Texte überschneiden sich nicht. Bei 4 Callouts muss jeder Text in 2 Zeilen oder weniger passen, also schneide Wörter.

• Jede Führungslinie endet auf ihrem Block.

• Die Randnotiz läuft nicht in das „Warum“-Feld.

• Die drei „Warum“-Spalten sind ausgeglichen (ähnliche Textlängen).

• Die Quellenzeile passt auf 2 Zeilen.

• Kein Gastgeber, Gast oder echte Person erscheint irgendwo.

Melde den PNG-Pfad, die verwendeten Quellen und alles, was einer Faktenprüfung bedarf.