Twitter Card Image Generator Agent Skill

Twitter Card Image Generator

Generieren Sie Bilder, die für X (Twitter) Linkvorschauen optimiert sind – die Karten, die in der Timeline erscheinen, wenn jemand einen Link teilt. Twitter Cards haben spezifische Bildabmessungen und ein Rendering-Verhalten, das sich von standardmäßigen Open Graph unterscheidet. Diese Fähigkeit deckt die gesamte Generierungspipeline ab, die an das 2:1-Seitenverhältnis von Twitter und die plattformspezifischen Eigenheiten angepasst ist.

Alle sechs Generierungsansätze und alle sechs visuellen Stile von og-image-generator gelten hier. Die einzigen Unterschiede sind: Ausgabedimensionen (1200x675 statt 1200x630), X-spezifische Designanpassungen, timeline-sicheres Zoning und Unterstützung für Player Cards.

Wann zu verwenden

• Der Benutzer benötigt 1200×675px (2:1) Bilder für X/Twitter-Linkvorschauen, summary_large_image oder Player Card Poster
• Der Benutzer erwähnt twitter:image, Twitter Card, X Vorschaubild, Tweet-Vorschau oder Timeline-Kartendesign
• Der Benutzer benötigt dunkelmodussichere Layouts, Inhaltszonen in den oberen 60 % oder 20px-Kantenmasken für den abgerundeten Eckenausschnitt von X
• Der Benutzer verwendet bereits og-image-generator und möchte die Twitter-angepasste Variante derselben Stile und Pipeline

Wann NICHT zu verwenden

• Allgemeine OG-Bilder (1200×630, 1,91:1) für Facebook, LinkedIn, Slack usw. – verwenden Sie stattdessen og-image-generator
• Nur Setzen von HTML-Meta-Tags (nicht das Erstellen der Bilddatei) – verwenden Sie twitter-cards aus marketing-skills
• SVG-Ausgabe – Twitter unterstützt kein SVG für Kartenbilder; verwenden Sie PNG oder JPG
• No-Code visueller Editor oder gehostete API – verwenden Sie Oginify anstatt eine Agent-Pipeline auszuführen

Bei Aufruf: Beim ersten Gebrauch beginnen Sie mit 1–2 Sätzen darüber, was diese Fähigkeit abdeckt und warum sie wichtig ist, und liefern dann die Hauptausgabe. Bei nachfolgender Verwendung oder wenn der Benutzer überspringen möchte, gehen Sie direkt zur Hauptausgabe.

1. Wie Twitter Bilder konsumiert

Twitter liest Bilder in dieser Prioritätsreihenfolge:

1. twitter:image – falls explizit gesetzt, direkt verwendet
2. og:image – fällt auf OG-Bild zurück, wenn keine Twitter-Card-Tags vorhanden sind
3. Kein Bild – reine Textlink-Vorschau

Wichtige Erkenntnis: Facebook und LinkedIn lesen KEIN twitter:image. Twitter ist die einzige Plattform, die Twitter-Card-Tags liest. Das bedeutet, Sie benötigen BEIDE Bildpfade in Ihren Metadaten, auch wenn die eigentliche Rendering-Pipeline geteilt werden kann.

2. Twitter-Bildspezifikationen

Kartentyp bestimmt die Bildanzeige:

In den meisten Anwendungsfällen zielen Sie auf summary_large_image mit 1200x675px.

3. Sechs Generierungsansätze (Twitter-angepasst)

Alle sechs Ansätze aus og-image-generator §1 funktionieren für Twitter-Bilder. Der einzige Unterschied sind die Ausgabedimensionen. Dieser Abschnitt behandelt Twitter-spezifische Anpassungen – siehe og-image-generator §1 für die vollständige Rendering-Pipeline-Dokumentation.

3.1 KI-Bildgenerierung (Kern #1)

Dieselbe dreiteilige Prompt-Strategie wie bei OG, aber mit Twitter-spezifischem Rahmen:

Teil 1 – Visuelle Beschreibung: Hintergrund, Komposition, Stimmung
Teil 2 – Textspezifikation: EXAKTER Text, in Anführungszeichen, mit Größenvorschlägen
Teil 3 – Twitter-Beschränkungen: "1200x675px, 2:1 Seitenverhältnis, Schlüsseltext in
         den oberen 60 %, dunkler Hintergrund bevorzugt für den Dark Mode"

Hybrider Ansatz (empfohlen): KI erzeugt den Hintergrund/die Atmosphäre; Satori legt den Text darüber. Entscheidend für chinesischen Text, wo KI-Modelle noch Probleme haben – und Twitters ~40 % Dark-Mode-Nutzung macht die Textgenauigkeit noch sichtbarer.

Siehe og-image-generator §1.1 für die vollständige Vergleichstabelle der KI-Tools (GPT Image 2.0, Flux, Nano Banana, DALL-E 3, Midjourney).

3.2 Agent-nativer inhaltsbewusster Workflow (Kern #2)

Derselbe 6-Schritte-Workflow wie bei OG (§1.2): Inhalt lesen → Stil zuordnen → Visuelle Elemente extrahieren → Generierung auswählen → Generieren → Validieren. Twitter-spezifische Ergänzungen in jedem Schritt:

Schritt 2 (Stil zuordnen) – Berücksichtigung des Twitter-Dark-Mode: bevorzugen Sie Stile mit dunklem Hintergrund (Terminal/CLI, Midnight Ink Magazine, Brutalist Dark Mode) oder Stile mit dunklen Varianten für X.

Schritt 3 (Visuelle Elemente extrahieren) – Twitters Timeline-Crop auf ~1:1 auf Mobilgeräten bedeutet, dass das wichtigste visuelle Element innerhalb eines Quadrats funktionieren muss. Ein horizontales Datenband, das bei 1200x675 funktioniert, kann im quadratischen Ausschnitt unsichtbar sein. Extrahieren Sie mindestens ein Element, das bei 1:1 gut lesbar ist.

Schritt 4 (Generierung auswählen) – Gleicher Entscheidungsbaum. Für KI-Generierung fügen Sie hinzu: "Wird der Text Twitters ~260px mobile Renderbreite überleben?"

Schritt 6 (Validieren) – Führen Sie sowohl OG-Prüfungen ALS AUCH Twitter-spezifische Prüfungen durch (§8).

3.3 Satori + resvg (Code-basiert)

Dieselbe Pipeline wie bei OG. Ändern Sie die Höhe von 630 auf 675. Siehe og-image-generator §1.3 für die vollständige Implementierung.

// Geteilter Endpunkt bedient sowohl OG als auch Twitter:
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') ?? 'Default';
  const platform = searchParams.get('platform') ?? 'og'; // 'og' | 'twitter'

  const width = 1200;
  const height = platform === 'twitter' ? 675 : 630;

  return new ImageResponse(
    <OgTemplate title={title} height={height} />,
    { width, height },
  );
}

Dann in den Seiten-Metadaten:

const ogUrl = `/og?title=${encodeURIComponent(title)}`;
const twitterUrl = `/og?title=${encodeURIComponent(title)}&platform=twitter`;

export const metadata: Metadata = {
  openGraph: {
    images: [{ url: ogUrl, width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    images: [twitterUrl],  // Twitter-spezifisch 1200x675
  },
};

3.4 Puppeteer, Managed Services, JSON-Konfiguration

Wie bei OG – setzen Sie Viewport/Höhe auf 675 statt 630. Siehe og-image-generator §1.4–1.6. Für das v3-Seitenprioritätssystem (S/A/B/C) und die Pipeline-Auswahl siehe content-strategy.md und pipeline-guide.md.

4. X-spezifische Designüberlegungen

Twitter rendert Bilder anders als Facebook/LinkedIn. Gestalten Sie mit diesen Punkten im Hinterkopf:

Dark Mode (~40 % der Nutzer): Bilder erscheinen inline im Feed, umgeben von Tweets. Dunkle Hintergründe fügen sich natürlich ein; helle Hintergründe fallen auf, können aber im Dark Mode störend wirken. Jede Vorlage sollte eine dunkle Variante oder einen dunkel-freundlichen Standard haben. Unter den 6 Stilen sind Terminal/CLI, Midnight Ink Magazine und Brutalist (schwarzer Hintergrund) von Natur aus dark-mode-freundlich. Swiss Minimal und Newspaper sollten mit einer Dark-Mode-Alternative ausgeliefert werden.

Timeline-Zuschnitt (Mobil): Auf Mobilgeräten werden summary_large_image-Bilder in der Timeline auf ~1:1 zugeschnitten, bis der Tweet erweitert wird. Das vollständige 2:1-Bild ist nur beim Antippen sichtbar. Platzieren Sie den wichtigsten Inhalt (Titel, primäres Bild) in den oberen 60 % des Bildes – dem zentralen Quadrat, das den Zuschnitt überlebt. Setzen Sie niemals kritischen Text in die unteren 20 %.

Textlesbarkeit bei kleinen Größen: Timeline-Bilder werden auf mobilen Feeds mit ~260px Breite angezeigt. Testen Sie Ihre Vorlage bei 1/4-Skalierung (~300px Breite), um sicherzustellen, dass der Text lesbar bleibt. Dies ist strenger als OGs ~500px Desktop-Feed-Größe.

Kantenmaske: Twitter wendet eine subtile abgerundete Eckenmaske auf Kartenbilder an. Logos und kritische Elemente, die innerhalb von 20px vom Rand platziert werden, laufen Gefahr, teilweise abgeschnitten zu werden.

Empfohlene Vorlagenanpassungen für Twitter (pro Stil):

5. Player Card Posters

Für Video-/Audioinhalte erfordert der player-Kartentyp ein Posterbild:

<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://example.com/player.html">
<meta name="twitter:player:width" content="480">
<meta name="twitter:player:height" content="480">
<meta name="twitter:image" content="https://example.com/poster.jpg">

Das Posterbild wird angezeigt, bevor der Nutzer auf Play tippt. Gestalten Sie es als ansprechendes Thumbnail – fügen Sie eine Play-Button-Überlagerung (zentriertes Dreieck in einem Kreis), den Videotitel und einen Frame aus dem Inhalt hinzu. Dieselbe 2:1-Verhältnisempfehlung gilt. Der Play-Button sollte das größte Element in der zentralen quadratischen Zone sein.

Für KI-generierte Poster: promp ten Sie nach "Video-Thumbnail mit zentriertem Play-Button, Titeltext im oberen Drittel, dunkler Hintergrund, 1200x675px."

6. Stilsystem (gemeinsam mit OG – 16 Stile)

Twitter-Bilder verwenden dieselben 16 visuellen Stile aus og-image-generator §3 und references/style-system-v3.md. Alle Vorlagen funktionieren für Twitter – ändern Sie einfach die Canvas-Höhe auf 675px.

X-Top-Performer: Terminal, Brutalist, Neo-Brutalism, Dark Gradient, Vaporwave – hoher Kontrast + dunkler Hintergrund sind optimal für die X-Timeline. X vermeiden: übermäßig angepasste Corporate-Styles ohne dunkle Variante; rein weiße Hintergründe in der Dark-Mode-Timeline.

7. Schrift & Typografie

Dieselben Regeln wie bei OG. Siehe og-image-generator references/typography.md.

Twitter-spezifische Ergänzung: Da Timeline-Bilder mit ~260px Breite (im Vergleich zu OGs ~500px Desktop-Feed) gerendert werden, erhöhen Sie die minimale Schriftgröße um 4px – verwenden Sie mindestens 28px statt 24px.

8. Agent YAML-Checks

checks:
  # P0 — muss bestehen
  - id: dimensions-twitter
    description: twitter:image ist 1200x675px (2:1) oder 1200x628px (plattformübergreifend)
  - id: card-type-match
    description: twitter:card ist summary_large_image, wenn ein großes Bild verwendet wird
  - id: absolute-url
    description: twitter:image URL ist absolut (https://) und öffentlich zugänglich
  - id: format
    description: Bildformat ist PNG, JPG oder WebP (nicht SVG)

  # P1 — sollte bestehen
  - id: og-fallback
    description: og:image ist ebenfalls gesetzt (als Fallback für Plattformen, die twitter:image nicht lesen)
  - id: timeline-safe-zone
    description: Kritischer Text und primärer visueller Anker befinden sich in den oberen 60 %; nichts Kritisches in den unteren 20 %
  - id: square-crop-survival
    description: Das wichtigste visuelle Element liest sich in einem 1:1-Zentrumsausschnitt korrekt (mobile Timeline)
  - id: dark-mode
    description: Die Vorlage enthält eine dunkle Hintergrundvariante oder verwendet einen dunkel-freundlichen Standard-Stil
  - id: edge-mask-clearance
    description: Logos und kritische Elemente sind ≥20px von allen Rändern entfernt (abgerundete Eckenmaske von Twitter)

  # P2 — nice to have
  - id: cross-platform-compatible
    description: Dasselbe Bild mit 1200x628px funktioniert sowohl für OG als auch für Twitter ohne separate Generierung
  - id: ai-text-validated
    description: Falls KI-generiert, wurde der gesamte Text anhand der Quelle validiert — keine halluzinierten oder falsch geschriebenen Texte
  - id: player-poster
    description: Player-Card-Seiten haben ein dediziertes Posterbild mit Play-Button
  - id: content-aware-twitter
    description: Das Bild spiegelt den seiten-spezifischen Inhalt wider, nicht nur einen Titel in einer Twitter-großen Vorlage

9. Häufige Fehler

1. Falsches Seitenverhältnis: Verwenden von OGs 1200x630 (1,91:1) ohne Anpassung. Obwohl Twitter es toleriert, füllt 1200x675 (2:1) die Karte besser und vermeidet Letterboxing.
2. Fehlender twitter:image-Tag: Sich ausschließlich auf OG-Fallback verlassen – ohne explizites twitter:image verlieren Sie die Kontrolle darüber, welches Bild Twitter auswählt.
3. Text in den unteren 20 %: Twitter schneidet Bilder auf Mobilgeräten auf ~1:1 zu. Kritischer Text in der Nähe des unteren Randes wird in der Timeline abgeschnitten.
4. Keine Berücksichtigung des Dark Mode: Bilder mit hellem Hintergrund sehen in Twitters Dark-Mode-Timeline, die von ~40 % der Nutzer aktiviert ist, grell aus.
5. Verwendung von SVG: Twitter unterstützt kein SVG für Kartenbilder. Geben Sie immer PNG oder JPG aus.
6. GIF ohne statischen ersten Frame: Twitter zeigt nur den ersten Frame von GIFs an. Stellen Sie sicher, dass Frame 1 ein aussagekräftiges Standbild ist.
7. KI-Texthalluzination in der 260px-Ansicht: KI-generierter Text, der in voller Größe korrekt aussieht, kann bei kleiner Darstellung verstümmelte Zeichen zeigen. Validieren Sie in 1/4-Skalierung.
8. Logos berühren Ränder: Twitters abgerundete Eckenmaske schneidet ~10px von den Rändern ab. Halten Sie Logos ≥20px von den Rändern entfernt.

10. Testen

• Card Validator: https://cards-dev.twitter.com/validator – zeigt genau, wie die Karte gerendert wird. Fügen Sie eine beliebige URL ein, um eine Vorschau zu sehen.
• Manueller Test: Twittern Sie einen Link von einem Testkonto und überprüfen Sie dann die Timeline + erweiterte Ansichten.
• Dark-Mode-Test: Überprüfen Sie die Karte sowohl in hellen als auch dunklen Twitter-Clients.
• Cache-Leeren: Twitter speichert Kartendaten aggressiv (bis zu 7 Tage). Verwenden Sie nach Änderungen den Card Validator, um ein erneutes Scrapen zu erzwingen.
• Mobiler Zuschneidetest: Machen Sie einen Screenshot der Karte im 1:1-Seitenverhältnis (auf 675x675 zentriert zuschneiden), um zu überprüfen, ob der quadratische Ausschnitt immer noch den Seiteninhalt kommuniziert.

11. Verwandte Fähigkeiten

Diese Fähigkeiten sind optional – diese Fähigkeit funktioniert eigenständig. Installieren Sie sie, wenn Sie zusätzliche Funktionen benötigen:

Gleiches Repo (immer zusammen installiert):

• og-image-generator: OG-Bildgenerierung (1200x630, 1,91:1) – die vollständige Rendering-Pipeline, alle 6 Stile, Seed-Vorlagen, Typografieleitfaden, Satori-Einschränkungen. Dieser Twitter-Card-Generator verwendet seine gesamte Infrastruktur wieder.

Separate Repos (können installiert sein oder nicht):

• twitter-cards (marketing-skills): HTML-Meta-Tag-Konfiguration für twitter:card, twitter:site, twitter:creator, Validierung. Behandelt, wie der Tag GESETZT wird; diese Fähigkeit behandelt, wie das Bild ERSTELLT wird.
• open-graph (marketing-skills): HTML-Meta-Tag-Konfiguration für og:title, og:image, og:url, Plattform-Testtools
• social-share-generator (marketing-skills): Share-Button-UI, die Twitter-Card-Daten verwendet, wenn Nutzer Links zu X teilen