推特卡片圖片生成器代理技能

推特卡片圖片生成器

生成針對 X（推特）連結預覽優化的圖片——即在有人分享連結時出現在時間線上的卡片。推特卡片的圖片尺寸和渲染行為與標準的 Open Graph 不同。此技能涵蓋了針對推特 2:1 比例和平台特定特性進行調整的完整生成管線。

所有六種生成方法和 og-image-generator 中的所有六種視覺風格均適用於此。唯一的區別在於：輸出尺寸（1200x675 而非 1200x630）、X 特定的設計調整、時間線安全區域以及播放器卡片支援。

使用時機

• 使用者需要針對 X/推特連結預覽、summary_large_image 或播放器卡片海報的 1200×675px（2:1） 圖片
• 使用者提到 twitter:image、推特卡片、X 預覽圖片、推文預覽或時間線卡片設計
• 使用者需要深色模式安全的佈局、上方 60% 的內容區域，或針對 X 的圓角裁切保留 20px 邊緣遮罩
• 使用者已經在使用 og-image-generator，並希望獲得相同風格和管線的推特調整版本

不使用的時機

• 通用的 OG 圖片（1200×630，1.91:1） 用於 Facebook、LinkedIn、Slack 等——請改用 og-image-generator
• 僅設定 HTML 中繼標籤（而非創建圖片檔案）——請使用 marketing-skills 中的 twitter-cards
• SVG 輸出——推特不支援 SVG 作為卡片圖片；請使用 PNG 或 JPG
• 無程式碼視覺編輯器或託管 API——請改用 Oginify 而非運行代理管線

呼叫時：在第一次使用時，先用 1 到 2 句話說明此技能涵蓋的內容及其重要性，然後提供主要輸出。在後續使用或使用者要求跳過時，直接提供主要輸出。

1. 推特如何讀取圖片

推特按以下優先順序讀取圖片：

1. twitter:image——如果明確設定，則直接使用
2. og:image——如果沒有推特卡片標籤，則退回到 OG 圖片
3. 無圖片——純文字連結預覽

關鍵見解：Facebook 和 LinkedIn 不會讀取 twitter:image。推特是唯一讀取推特卡片標籤的平台。這意味著您在元數據中需要同時包含兩種圖片路徑，即使實際的渲染管線可以共享。

2. 推特圖片規格

卡片類型決定圖片顯示方式：

對於大多數使用情況，請以 1200x675px 的 summary_large_image 為目標。

3. 六種生成方法（推特調整版）

og-image-generator 第 1 節中的全部六種方法都適用於推特圖片。唯一的區別是輸出尺寸。本節涵蓋推特特定的調整——請參閱 og-image-generator 第 1 節以獲取完整的渲染管線文件。

3.1 AI 圖片生成（核心 #1）

與 OG 相同的三部分提示策略，但加上推特特定框架：

第 1 部分——視覺描述：背景、構圖、氛圍
第 2 部分——文字規格：精確的文字，放在引號中，加上大小提示
第 3 部分——推特限制：「1200x675px，2:1 比例，關鍵文字放置在上方 60%，深色背景在深色模式下更佳」

混合方法（建議）：AI 生成背景/氛圍；Satori 疊加文字。對於 AI 模型仍處理不佳的中文文字至關重要——且推特約 40% 的深色模式使用率使文字準確性更加明顯。

請參閱 og-image-generator 第 1.1 節以獲取完整的 AI 工具比較表（GPT Image 2.0、Flux、Nano Banana、DALL-E 3、Midjourney）。

3.2 代理原生內容感知工作流程（核心 #2）

與 OG（第 1.2 節）相同的 6 步驟工作流程：讀取內容 → 匹配風格 → 提取視覺元素 → 選擇生成 → 生成 → 驗證。每個步驟中的推特特定添加：

步驟 2（匹配風格）——推特深色模式考量：偏好深色背景風格（終端機/CLI、午夜墨水雜誌、粗野主義深色模式）或具有深色變體的風格用於 X。

步驟 3（提取視覺元素）——推特在行動裝置上將圖片裁切至約 1:1 的時間線裁切，意味著最重要的視覺元素必須在正方形內有效。在 1200x675 下有效的水平數據條可能在正方形裁切中消失。提取至少一個在 1:1 下易讀的元素。

步驟 4（選擇生成）——相同的決策樹。對於 AI 生成，加上：「文字能否在推特約 260px 的行動裝置渲染寬度下存活？」

步驟 6（驗證）——同時執行 OG 檢查和推特特定檢查（第 8 節）。

3.3 Satori + resvg（基於程式碼）

與 OG 相同的管線。將高度從 630 改為 675。請參閱 og-image-generator 第 1.3 節以獲取完整實作。

// 共享端點同時服務 OG 和推特：
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 },
  );
}

然後在頁面元數據中：

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],  // 推特特定的 1200x675
  },
};

3.4 Puppeteer、託管服務、JSON 配置

與 OG 相同——將視口/高度設為 675 而非 630。請參閱 og-image-generator 第 1.4–1.6 節。關於 v3 頁面優先級系統（S/A/B/C）和管線選擇，請參閱 content-strategy.md 和 pipeline-guide.md。

4. X 特定的設計考量

推特渲染圖片的方式與 Facebook/LinkedIn 不同。設計時請牢記以下幾點：

深色模式（約 40% 使用者）：圖片內嵌在動態中，周圍是推文。深色背景自然融合；淺色背景則顯得突兀，但在深色模式下可能看起來不和諧。每個模板都應該有深色變體或深色友好的預設值。在 6 種風格中，終端機/CLI、午夜墨水雜誌和粗野主義（黑色背景）天然適合深色模式。瑞士極簡和報紙應提供深色模式替代方案。

時間線裁切（行動裝置）：在行動裝置上，summary_large_image 圖片在時間線中被裁切至約 1:1，直到推文被展開。只有在點擊後才能看到完整的 2:1 圖片。將最重要的內容（標題、主要視覺元素）放在圖片的上方 60%——即能避免裁切的中央正方形區域。絕不要將關鍵文字放在底部 20%。

小尺寸下的文字可讀性：時間線中的圖片在行動裝置動態中顯示寬度約為 260px。將您的模板縮小到 1/4 比例（約 300px 寬）進行測試，以確保文字仍可讀取。這比 OG 的約 500px 桌面動態尺寸要求更嚴格。

邊緣遮罩：推特對卡片圖片套用微妙的圓角遮罩。距離任何邊緣 20px 以內的標誌和關鍵元素有可能被部分裁切。

建議的推特模板調整（每種風格）：

5. 播放器卡片海報

對於影片/音訊內容，player 卡片類型需要一張海報圖片：

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

海報圖片在使用者點擊播放前顯示。將其設計為引人注目的縮圖——包含一個播放按鈕覆蓋層（圓形中的三角形居中）、影片標題，以及來自內容的幀。同樣建議使用 2:1 比例。播放按鈕應是中央正方形區域中最大的元素。

對於 AI 生成的海報：提示詞為「帶有居中播放按鈕的影片縮圖、標題文字在上方三分之一處、深色背景、1200x675px。」

6. 風格系統（與 OG 共享——16 種風格）

推特圖片使用與 og-image-generator 第 3 節和 references/style-system-v3.md 相同的 16 種視覺風格。所有模板都適用於推特——只需將畫布高度改為 675px。

X 上表現最佳：終端機、粗野主義、新粗野主義、深色漸層、蒸氣波——高對比 + 深色背景是 X 時間線的最佳選擇。X 上應避免：過於企業品牌風格且沒有深色變體的圖片；在深色模式時間線中純白色的背景。

7. 字體與排版

與 OG 規則相同。請參閱 og-image-generator references/typography.md。

推特特定新增：由於時間線圖片渲染寬度約為 260px（相較於 OG 的約 500px 桌面動態），最低字體大小增加 4px——使用 28px 而非 24px 作為最低標準。

8. 代理 YAML 檢查

checks:
  # P0——必須通過
  - id: dimensions-twitter
    description: twitter:image 為 1200x675px（2:1）或 1200x628px（跨平台）
  - id: card-type-match
    description: 使用大型圖片時，twitter:card 為 summary_large_image
  - id: absolute-url
    description: twitter:image URL 是絕對路徑（https://）且可公開存取
  - id: format
    description: 圖片格式為 PNG、JPG 或 WebP（非 SVG）

  # P1——應該通過
  - id: og-fallback
    description: og:image 也已設定（作為不讀取 twitter:image 的平台的後備）
  - id: timeline-safe-zone
    description: 關鍵文字和主要視覺錨點位於上方 60%；底部 20% 無關鍵內容
  - id: square-crop-survival
    description: 最重要的視覺元素在 1:1 中央裁切（行動裝置時間線）中能正確傳達
  - id: dark-mode
    description: 模板包含深色背景變體或使用深色友好的預設風格
  - id: edge-mask-clearance
    description: 標誌和關鍵元素距離所有邊緣 ≥20px（推特圓角遮罩）

  # P2——加分項
  - id: cross-platform-compatible
    description: 同一張 1200x628px 圖片可同時用於 OG 和推特，無需分別生成
  - id: ai-text-validated
    description: 若為 AI 生成，所有文字已對照來源驗證——無幻覺或拼寫錯誤的文字
  - id: player-poster
    description: 播放器卡片頁面有專用的海報圖片，包含播放按鈕
  - id: content-aware-twitter
    description: 圖片反映頁面特定內容，而不僅僅是放在推特尺寸模板中的標題

9. 常見錯誤

1. 錯誤的比例：使用 OG 的 1200x630（1.91:1）而未調整。雖然推特能容忍，但 1200x675（2:1）能更好地填滿卡片並避免出現黑邊。
2. 缺少 twitter:image 標籤：僅依賴 OG 後備——沒有明確的 twitter:image，您將失去對推特選擇哪張圖片的控制。
3. 文字在底部 20%：推特在行動裝置上將圖片裁切至約 1:1。靠近底部的關鍵文字會在時間線中被裁掉。
4. 未考慮深色模式：淺色背景圖片在推特的深色模式時間線中看起來刺眼，約 40% 使用者啟用了該模式。
5. 使用 SVG：推特不支援 SVG 作為卡片圖片。務必輸出 PNG 或 JPG。
6. 使用 GIF 但無靜態第一幀：推特僅顯示 GIF 的第一幀。確保第一幀是有意義的靜態圖片。
7. 在 260px 視圖中 AI 文字幻覺：全尺寸下看起來正確的 AI 生成文字，在小尺寸渲染時可能顯示亂碼。以 1/4 比例驗證。
8. 標誌觸碰到邊緣：推特的圓角遮罩會裁切邊緣約 10px。保持標誌距離邊緣 ≥20px。

10. 測試

• 卡片驗證器：https://cards-dev.twitter.com/validator——顯示卡片實際渲染的樣子。貼上任何 URL 以預覽。
• 手動測試：從測試帳號發布一條連結推文，然後查看時間線和展開視圖。
• 深色模式測試：在淺色和深色模式下的推特客戶端中檢查卡片。
• 快取清除：推特會積極快取卡片數據（最多 7 天）。更改後，使用卡片驗證器強制重新抓取。
• 行動裝置裁切測試：將卡片截圖裁切為 1:1 比例（裁切為 675x675 中央），驗證正方形裁切後仍能傳達頁面內容。

11. 相關技能

這些技能為選用——此技能可獨立運作。若需要額外功能，請安裝它們：

相同儲存庫（通常一起安裝）：

• og-image-generator：OG 圖片生成（1200x630，1.91:1）——完整的渲染管線、所有 6 種風格、種子模板、排版指南、Satori 限制。此推特卡片生成器重複使用了其整個基礎設施。

獨立儲存庫（可能已安裝或未安裝）：

• twitter-cards（marketing-skills）：twitter:card、twitter:site、twitter:creator 的 HTML 中繼標籤配置，以及驗證。處理如何設定標籤；此技能處理如何創建圖片。
• open-graph（marketing-skills）：og:title、og:image、og:url 的 HTML 中繼標籤配置，以及平台測試工具
• social-share-generator（marketing-skills）：分享按鈕 UI，在用戶分享連結到 X 時使用推特卡片數據