Umiejętność agenta generowania obrazów kart Twittera

Generator obrazów dla Karty Twittera

Generuj obrazy zoptymalizowane dla podglądów linków w X (Twitter) — karty, które pojawiają się na osi czasu, gdy ktoś udostępnia link. Karty Twittera mają inne wymiary obrazu i zachowanie renderowania niż standardowe Open Graph. Ta umiejętność obejmuje kompletny potok generowania dostosowany do proporcji 2:1 Twittera i specyficznych dla platformy osobliwości.

Wszystkie sześć podejść do generowania i wszystkie sześć stylów wizualnych z og-image-generator mają tu zastosowanie. Jedyne różnice to: wymiary wyjściowe (1200x675 zamiast 1200x630), adaptacje projektowe specyficzne dla X, strefowanie bezpieczne dla osi czasu i obsługa karty odtwarzacza.

Kiedy używać

• Użytkownik potrzebuje obrazów 1200×675px (2:1) dla podglądów linków X/Twitter, summary_large_image lub plakatów karty odtwarzacza
• Użytkownik wspomina twitter:image, Kartę Twittera, obraz podglądu X, podgląd tweeta lub projekt karty na osi czasu
• Użytkownik potrzebuje układów bezpiecznych w trybie ciemnym, stref zawartości w górnych 60% lub masek krawędzi 20px dla przycinania zaokrąglonych rogów X
• Użytkownik już korzysta z og-image-generator i chce wariantu dostosowanego do Twittera tych samych stylów i potoku

Kiedy NIE używać

• Ogólne obrazy OG (1200×630, 1,91:1) dla Facebooka, LinkedIn, Slacka itp. — zamiast tego użyj og-image-generator
• Tylko ustawianie znaczników meta HTML (nie tworzenie pliku obrazu) — użyj twitter-cards z marketing-skills
• Wyjście SVG — Twitter nie obsługuje SVG dla obrazów kart; użyj PNG lub JPG
• Edytor wizualny bez kodu lub hostowane API — użyj Oginify zamiast uruchamiania potoku agenta

Podczas wywoływania: Przy pierwszym użyciu rozpocznij od 1–2 zdań na temat tego, co obejmuje ta umiejętność i dlaczego jest ważna, a następnie dostarcz główne wyjście. Przy kolejnym użyciu lub gdy użytkownik poprosi o pominięcie, przejdź bezpośrednio do głównego wyjścia.

1. Jak Twitter konsumuje obrazy

Twitter odczytuje obrazy w następującej kolejności priorytetów:

1. twitter:image — jeśli jawnie ustawione, używane bezpośrednio
2. og:image — przechodzi do obrazu OG, jeśli nie istnieją znaczniki Karty Twittera
3. Brak obrazu — podgląd linku jako zwykły tekst

Kluczowy wniosek: Facebook i LinkedIn NIE odczytują twitter:image. Twitter jest jedyną platformą, która odczytuje znaczniki Karty Twittera. Oznacza to, że potrzebujesz OBU ścieżek obrazów w swoich metadanych, mimo że rzeczywisty potok renderowania może być współdzielony.

2. Specyfikacje obrazów Twittera

Typ karty określa wyświetlanie obrazu:

Dla większości przypadków użycia celuj w summary_large_image przy 1200x675px.

3. Sześć podejść do generowania (dostosowanych do Twittera)

Wszystkie sześć podejść z og-image-generator §1 działa dla obrazów Twittera. Jedyną różnicą są wymiary wyjściowe. Ta sekcja obejmuje adaptacje specyficzne dla Twittera — pełna dokumentacja potoku renderowania znajduje się w og-image-generator §1.

3.1 Generowanie obrazów AI (Rdzeń #1)

Ta sama trzyczęściowa strategia promptu co w OG, ale z ramkami specyficznymi dla Twittera:

Część 1 — Opis wizualny: tło, kompozycja, nastrój
Część 2 — Specyfikacja tekstu: DOKŁADNY tekst, w cudzysłowie, ze wskazówkami rozmiaru
Część 3 — Ograniczenia Twittera: "1200x675px, proporcje 2:1, kluczowy tekst w
         górnych 60%, ciemne tło preferowane dla trybu ciemnego"

Podejście hybrydowe (zalecane): AI generuje tło/atmosferę; Satori nakłada tekst. Kluczowe dla tekstu chińskiego, gdzie modele AI wciąż mają trudności — a użycie trybu ciemnego przez ~40% użytkowników Twittera sprawia, że dokładność tekstu jest jeszcze bardziej widoczna.

Zobacz og-image-generator §1.1 dla pełnej tabeli porównawczej narzędzi AI (GPT Image 2.0, Flux, Nano Banana, DALL-E 3, Midjourney).

3.2 Natywny dla agenta przepływ pracy świadomy treści (Rdzeń #2)

Ten sam 6-krokowy przepływ pracy co w OG (§1.2): Odczytaj treść → Dopasuj styl → Wyodrębnij elementy wizualne → Wybierz generowanie → Generuj → Weryfikuj. Dodatki specyficzne dla Twittera na każdym kroku:

Krok 2 (Dopasuj styl) — uwzględnienie trybu ciemnego Twittera: preferuj style z ciemnym tłem (Terminal/CLI, Midnight Ink Magazine, Brutalist dark mode) lub style z ciemnymi wariantami dla X.

Krok 3 (Wyodrębnij elementy wizualne) — przycinanie na osi czasu Twittera do ~1:1 na urządzeniach mobilnych oznacza, że najważniejszy element wizualny musi działać wewnątrz kwadratu. Poziomy pasek danych, który działa przy 1200x675, może być niewidoczny w kwadratowym przycięciu. Wyodrębnij co najmniej jeden element, który dobrze się czyta przy 1:1.

Krok 4 (Wybierz generowanie) — To samo drzewo decyzyjne. Dla generowania AI dodaj: "Czy tekst przetrwa mobilną szerokość renderowania Twittera ~260px?"

Krok 6 (Weryfikuj) — Przeprowadź zarówno kontrole OG, jak i kontrole specyficzne dla Twittera (§8).

3.3 Satori + resvg (Oparte na kodzie)

Ten sam potok co OG. Zmień wysokość z 630 na 675. Zobacz og-image-generator §1.3 dla pełnej implementacji.

// Shared endpoint serves both OG and 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 },
  );
}

Następnie w metadanych strony:

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-specific 1200x675
  },
};

3.4 Puppeteer, Usługi zarządzane, Konfiguracja JSON

Tak samo jak OG — ustaw viewport/wysokość na 675 zamiast 630. Zobacz og-image-generator §1.4–1.6. Dla systemu priorytetów stron v3 (S/A/B/C) i wyboru potoku zobacz content-strategy.md i pipeline-guide.md.

4. Rozważania projektowe specyficzne dla X

Twitter renderuje obrazy inaczej niż Facebook/LinkedIn. Projektuj mając na uwadze:

Tryb ciemny (~40% użytkowników): Obrazy pojawiają się w linii w kanale, otoczone tweetami. Ciemne tła wtapiają się naturalnie; jasne tła wyróżniają się, ale mogą wyglądać rażąco w trybie ciemnym. Każdy szablon powinien mieć wariant ciemny lub domyślnie przyjazny dla trybu ciemnego. Spośród 6 stylów, Terminal/CLI, Midnight Ink Magazine i Brutalist (czarne tło) są naturalnie przyjazne trybowi ciemnemu. Swiss Minimal i Newspaper powinny być dostarczane z alternatywą dla trybu ciemnego.

Przycinanie na osi czasu (mobilne): Na urządzeniach mobilnych obrazy summary_large_image są przycinane do ~1:1 na osi czasu, dopóki tweet nie zostanie rozwinięty. Pełny obraz 2:1 jest widoczny dopiero po dotknięciu. Umieść najważniejszą zawartość (tytuł, główny element wizualny) w górnych 60% obrazu — centralnym kwadracie, który przetrwa przycinanie. Nigdy nie umieszczaj krytycznego tekstu w dolnych 20%.

Czytelność tekstu przy małych rozmiarach: Obrazy na osi czasu wyświetlają się przy szerokości ~260px na kanałach mobilnych. Przetestuj swój szablon w skali 1/4 (~300px szerokości), aby upewnić się, że tekst pozostaje czytelny. Jest to bardziej rygorystyczne niż rozmiar ~500px kanału na pulpicie w OG.

Maska krawędzi: Twitter stosuje subtelną maskę zaokrąglonych rogów do obrazów kart. Loga i krytyczne elementy umieszczone w odległości mniejszej niż 20px od jakiejkolwiek krawędzi mogą zostać częściowo przycięte.

Zalecane adaptacje szablonów dla Twittera (według stylu):

5. Plakaty karty odtwarzacza

Dla zawartości wideo/audio typ karty player wymaga obrazu plakatu:

<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">

Obraz plakatu jest wyświetlany przed dotknięciem odtwarzania przez użytkownika. Zaprojektuj go jako przekonującą miniaturę — dołącz nakładkę przycisku odtwarzania (wyśrodkowany trójkąt w okręgu), tytuł wideo i klatkę z zawartości. Obowiązuje to samo zalecenie proporcji 2:1. Przycisk odtwarzania powinien być największym elementem w centralnej strefie kwadratowej.

Dla plakatów generowanych przez AI: promptuj "miniatura wideo z wyśrodkowanym przyciskiem odtwarzania, tekst tytułu w górnej jednej trzeciej, ciemne tło, 1200x675px."

6. System stylów (współdzielony z OG — 16 stylów)

Obrazy Twittera używają tych samych 16 stylów wizualnych z og-image-generator §3 i references/style-system-v3.md. Wszystkie szablony działają dla Twittera — wystarczy zmienić wysokość płótna na 675px.

Najlepiej radzące sobie na X: Terminal, Brutalist, Neo-Brutalism, Dark Gradient, Vaporwave — wysoki kontrast + ciemne tło są optymalne dla osi czasu X. Unikaj na X: zbyt korporacyjnych stylów zgodnych z marką bez ciemnego wariantu; czysto białe tła w osi czasu trybu ciemnego.

7. Czcionka i typografia

Te same zasady co w OG. Zobacz og-image-generator references/typography.md.

Dodatek specyficzny dla Twittera: ponieważ obrazy na osi czasu renderują się przy szerokości ~260px (w porównaniu z ~500px kanału na pulpicie OG), zwiększ minimalny rozmiar czcionki o 4px — użyj minimum 28px zamiast 24px.

8. Kontrole YAML agenta

checks:
  # P0 — must pass
  - id: dimensions-twitter
    description: twitter:image is 1200x675px (2:1) or 1200x628px (cross-platform)
  - id: card-type-match
    description: twitter:card is summary_large_image when using a large image
  - id: absolute-url
    description: twitter:image URL is absolute (https://) and publicly accessible
  - id: format
    description: Image format is PNG, JPG, or WebP (not SVG)

  # P1 — should pass
  - id: og-fallback
    description: og:image is also set (as fallback for platforms that don't read twitter:image)
  - id: timeline-safe-zone
    description: Critical text and primary visual anchor are in the top 60%; nothing critical in bottom 20%
  - id: square-crop-survival
    description: The most important visual element reads correctly in a 1:1 center crop (mobile timeline)
  - id: dark-mode
    description: Template includes a dark-background variant or uses a dark-friendly default style
  - id: edge-mask-clearance
    description: Logos and critical elements are ≥20px from all edges (Twitter rounded corner mask)

  # P2 — nice to have
  - id: cross-platform-compatible
    description: Same image at 1200x628px works for both OG and Twitter without separate generation
  - id: ai-text-validated
    description: If AI-generated, all text was validated against source — no hallucinated or misspelled text
  - id: player-poster
    description: Player card pages have a dedicated poster image with play button
  - id: content-aware-twitter
    description: Image reflects page-specific content, not just a title in a Twitter-sized template

9. Częste błędy

1. Zły współczynnik proporcji: Używanie 1200x630 (1,91:1) z OG bez dostosowania. Chociaż Twitter to toleruje, 1200x675 (2:1) lepiej wypełnia kartę i unika listów.
2. Brak znacznika twitter:image: Poleganie wyłącznie na awaryjnym OG — bez jawnego twitter:image tracisz kontrolę nad tym, który obraz wybierze Twitter.
3. Tekst w dolnych 20%: Twitter przycina obrazy do ~1:1 na urządzeniach mobilnych. Krytyczny tekst w pobliżu dołu zostaje odcięty na osi czasu.
4. Brak uwzględnienia trybu ciemnego: Obrazy z jasnym tłem wyglądają ostro na osi czasu Twittera w trybie ciemnym, który ma włączone ~40% użytkowników.
5. Używanie SVG: Twitter nie obsługuje SVG dla obrazów kart. Zawsze wyjście jako PNG lub JPG.
6. GIF bez statycznej pierwszej klatki: Twitter pokazuje tylko pierwszą klatkę GIF-ów. Upewnij się, że klatka 1 jest znaczącym nieruchomym obrazem.
7. Halucynacja tekstu AI w widoku 260px: Tekst generowany przez AI, który wygląda poprawnie w pełnym rozmiarze, może pokazywać zniekształcone znaki przy małym renderowaniu. Weryfikuj w skali 1/4.
8. Loga dotykające krawędzi: Maska zaokrąglonych rogów Twittera przycina ~10px od krawędzi. Trzymaj loga w odległości ≥20px od krawędzi.

10. Testowanie

• Walidator kart: https://cards-dev.twitter.com/validator — pokazuje dokładnie, jak karta będzie renderowana. Wklej dowolny URL, aby zobaczyć podgląd.
• Test ręczny: Opublikuj tweeta z linkiem z konta testowego, a następnie sprawdź oś czasu + widoki rozwinięte.
• Test trybu ciemnego: Sprawdź kartę w klientach Twittera zarówno w trybie jasnym, jak i ciemnym.
• Obejście pamięci podręcznej: Twitter agresywnie buforuje dane kart (do 7 dni). Po zmianach użyj Walidatora kart, aby wymusić ponowne skrobanie.
• Test przycinania mobilnego: Zrób zrzut ekranu karty przy proporcjach 1:1 (przytnij do środkowego 675x675), aby zweryfikować, czy kwadratowe przycięcie nadal komunikuje zawartość strony.

11. Powiązane umiejętności

Te umiejętności są opcjonalne — ta umiejętność działa samodzielnie. Zainstaluj je, jeśli potrzebujesz dodatkowych możliwości:

To samo repozytorium (zawsze instalowane razem):

• og-image-generator: Generowanie obrazów OG (1200x630, 1,91:1) — pełny potok renderowania, wszystkie 6 stylów, szablony startowe, przewodnik typografii, ograniczenia Satori. Ten generator Kart Twittera ponownie wykorzystuje całą swoją infrastrukturę.

Oddzielne repozytoria (mogą być lub nie być zainstalowane):

• twitter-cards (marketing-skills): Konfiguracja znaczników meta HTML dla twitter:card, twitter:site, twitter:creator, walidacja. Obsługuje jak USTAWIĆ znacznik; ta umiejętność obsługuje jak UTWORZYĆ obraz.
• open-graph (marketing-skills): Konfiguracja znaczników meta HTML dla og:title, og:image, og:url, narzędzia do testowania platform
• social-share-generator (marketing-skills): Interfejs przycisku udostępniania, który konsumuje dane Karty Twittera, gdy użytkownicy udostępniają linki do X