# 推特卡片圖片生成器代理技能
> 生成經過優化的推特卡片（X）連結預覽圖片，採用正確的 2:1 比例和平台特定的限制。此技能可確保您的推文預覽看起來完美，幫助您吸引觀眾注意力並提高互動率。
- Canonical: https://nanoskill.ai/tw/skills/twitter-card-image-generator
- Markdown: https://nanoskill.ai/tw/skills/twitter-card-image-generator.md
- Author: kostja94
- Published: 2026-06-09T06:00:00.000Z
- Updated: 2026-07-25T04:19:51.168Z
- Language: zh-TW
- Source type: github
- Popularity signal: 244
## Sources
- https://github.com/kostja94/social-cards-skills
## Install
```shell
npx skills add https://github.com/kostja94/social-cards-skills/tree/main/twitter-card-image-generator
```
## About
此推特卡片圖片生成器技能讓用戶能夠創建針對 X（推特）連結預覽完美優化的圖片，確保其內容在時間線上產生強烈的視覺衝擊。與一般的 Open Graph 圖片不同，此工具特別針對推特獨特的 2:1 比例（1200x675 像素）和平台特定的渲染特性進行調整，幫助內容創作者、行銷人員和開發者提升社交媒體存在感並促進互動。
利用六種不同的生成方法和 16 種多功能的視覺風格，該技能為圖片創建提供了全面的選項。它融合了先進的功能，如用於背景的 AI 圖片生成、內容感知工作流程以及 Satori/resvg 管線整合。關鍵設計考量如深色模式相容性、行動版時間線裁切和邊緣遮罩均已內建，確保圖片在所有使用者體驗中既美觀又實用。
除了標準的連結預覽外，此生成器還支援為推特播放器卡片創建引人注目的海報圖片，非常適合影片和音訊內容。透過整合的 YAML 檢查和常見錯誤的指導，用戶可以自信地製作出符合技術規格並最大化點擊率的高品質推特卡片圖片，使其分享的連結更有效且專業。
## Key features
- **針對 X（推特）連結預覽優化**: 生成專為推特 2:1 比例（1200x675px）和獨特渲染行為設計的圖片，確保您的內容在時間線中脫穎而出。
- **六種生成方法和 16 種視覺風格**: 利用六種不同的生成方法，包括 AI 圖片生成和內容感知工作流程，跨 16 種視覺風格，創建多樣化且引人入勝的推特卡片圖片。
- **深色模式和行動裝置裁切調整**: 設計在推特深色模式下表現良好且能經受行動裝置時間線裁切的圖片，將關鍵內容放在安全區域以獲得最大可見性。
- **播放器卡片海報生成**: 為推特播放器卡片創建引人注目的海報圖片，包含播放按鈕覆蓋層和影片標題，以吸引用戶參與您的多媒體內容。
- **全面的驗證檢查**: 受益於內建的 YAML 檢查，可驗證圖片尺寸、卡片類型、URL 格式，以及時間線安全區域和深色模式相容性等設計考量。
## Use cases
- **為部落格文章生成推特卡片圖片**: 自動為新部落格文章創建視覺吸引人的 1200x675px 推特卡片圖片，確保在 X 上分享時看起來專業且引人入勝。
- **為影片設計播放器卡片海報**: 為您在推特上分享的影片內容製作優化的海報圖片，在影片播放前就提高點擊率。
- **確保社交分享的深色模式相容性**: 調整現有的 Open Graph 圖片或使用深色模式友好的設計生成新圖片，確保您的推特卡片圖片在所有使用者看來都很好，無論他們的顯示設定如何。
## Result preview
探索由此技能驅動的高效能推特卡片圖片。
## Result walkthrough
### 安裝
將推特卡片圖片生成器技能添加到您的 AI 代理中。
### 描述內容
分享您的內容細節、品牌識別和偏好的視覺方向。
### 生成成果
創建一個針對平台優化、具有強大視覺層次和專注於提高互動率的設計改進的推特卡片圖片。
## Skill definition
# 推特卡片圖片生成器
生成針對 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](https://oginify.com) 而非運行代理管線
**呼叫時**：在**第一次使用**時，先用 1 到 2 句話說明此技能涵蓋的內容及其重要性，然後提供主要輸出。在**後續使用**或使用者要求跳過時，直接提供主要輸出。
## 1. 推特如何讀取圖片
推特按以下優先順序讀取圖片：
1. `twitter:image`——如果明確設定，則直接使用
2. `og:image`——如果沒有推特卡片標籤，則退回到 OG 圖片
3. 無圖片——純文字連結預覽
**關鍵見解**：Facebook 和 LinkedIn **不**會讀取 `twitter:image`。推特是唯一讀取推特卡片標籤的平台。這意味著您在元數據中**需要同時**包含兩種圖片路徑，即使實際的渲染管線可以共享。
## 2. 推特圖片規格
| 屬性 | 規格 |
|------|------|
| **比例** | 2:1（官方）；推特實際渲染約為 1.91:1 |
| **建議尺寸** | 1200x675px（2:1）；1200x628px（跨平台與 OG 兼容） |
| **最小尺寸** | 300x157px |
| **最大尺寸** | 4096x4096px |
| **檔案大小** | 低於 5MB |
| **格式** | JPG、PNG、WebP、GIF（僅第一幀）；不支援 SVG |
**卡片類型決定圖片顯示方式：**
| 卡片類型 | 圖片行為 |
|---------|---------|
| `summary_large_image` | 全寬突出的圖片（建議大多數頁面使用） |
| `summary` | 小縮圖（100x100px 正方形） |
| `player` | 影片/音訊嵌入；圖片是播放前的海報幀 |
| `app` | 應用程式圖示；圖片是應用程式圖示 + 促銷圖片 |
對於大多數使用情況，請以 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 節以獲取完整實作。
```tsx
// 共享端點同時服務 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(
,
{ width, height },
);
}
```
**然後在頁面元數據中：**
```tsx
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](../og-image-generator/references/content-strategy.md) 和 [pipeline-guide.md](../og-image-generator/references/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 以內的標誌和關鍵元素有可能被部分裁切。
**建議的推特模板調整（每種風格）：**
| OG 模板 | 推特調整 |
|--------|--------|
| 終端機/CLI | 將視窗裝飾向下移動（推特的圓角會裁切掉左上角的點）；使用強調色來增加深色模式的對比 |
| 雜誌編輯 | 使用午夜墨水預設（專為 X 設計的深色變體）；將照片區域向上移（放在上方 50% 而非下方） |
| 瑞士極簡 | 新增深色模式變體：背景 `#0a0a0a` 並保留強調色，白色文字；數據條在 1:1 裁切下表現良好 |
| 像素復古 | 天然的深色背景——NES/街機/CGA 預設已為 X 準備就緒；將 HUD 元素縮小 10% 以避開邊緣遮罩 |
| 粗野主義 | 黑色背景變體已原生支援深色模式；不對稱標題區塊預設位於上方 60% 區域 |
| 報紙 | 新增背景 `#1a1a1a` 的深色變體；多區塊佈局應針對正方形裁切區域進行垂直堆疊 |
## 5. 播放器卡片海報
對於影片/音訊內容，`player` 卡片類型需要一張海報圖片：
```html
```
海報圖片在使用者點擊播放前顯示。將其設計為引人注目的縮圖——包含一個播放按鈕覆蓋層（圓形中的三角形居中）、影片標題，以及來自內容的幀。同樣建議使用 2:1 比例。播放按鈕應是中央正方形區域中最大的元素。
對於 AI 生成的海報：提示詞為「帶有居中播放按鈕的影片縮圖、標題文字在上方三分之一處、深色背景、1200x675px。」
## 6. 風格系統（與 OG 共享——16 種風格）
推特圖片使用與 **og-image-generator** 第 3 節和 [references/style-system-v3.md](../og-image-generator/references/style-system-v3.md) 相同的 16 種視覺風格。所有模板都適用於推特——只需將畫布高度改為 675px。
| # | 風格 | 深色模式 | X 點擊率潛力 | 模板 |
|---|------|--------|------------|------|
| 1 | 終端機 / CLI | 始終深色 | ★★★★★ | [terminal.tsx](../og-image-generator/templates/terminal.tsx) |
| 2 | 雜誌編輯 | 午夜墨水 | ★★★ | [magazine.tsx](../og-image-generator/templates/magazine.tsx) |
| 3 | 瑞士極簡 | 需要變體 | ★★ | [swiss.tsx](../og-image-generator/templates/swiss.tsx) |
| 4 | 像素復古 | 全部深色 | ★★★★ | [pixel.tsx](../og-image-generator/templates/pixel.tsx) |
| 5 | 粗野主義 | 黑色背景 | ★★★★★ | [brutalist.tsx](../og-image-generator/templates/brutalist.tsx) |
| 6 | 報紙 | 需要變體 | ★★★ | [newspaper.tsx](../og-image-generator/templates/newspaper.tsx) |
| 7 | 新粗野主義 | 是 | ★★★★★ | [neo-brutalism.tsx](../og-image-generator/templates/neo-brutalism.tsx) |
| 8 | 便當網格 | 深色基底 | ★★★★ | [bento-grid.tsx](../og-image-generator/templates/bento-grid.tsx) |
| 9 | 新瑞士漸變 | 淺色 | ★★ | [neo-swiss-gradient.tsx](../og-image-generator/templates/neo-swiss-gradient.tsx) |
| 10 | 深色漸層+紋理 | 始終深色 | ★★★★★ | [dark-gradient-texture.tsx](../og-image-generator/templates/dark-gradient-texture.tsx) |
| 11 | 文字覆蓋 | 視背景而定 | ★★★★ | [text-overlay-hybrid.tsx](../og-image-generator/templates/text-overlay-hybrid.tsx) |
| 12 | 電影感 | 深色友好 | ★★★ | [cinematic.tsx](../og-image-generator/templates/cinematic.tsx) |
| 13 | 拼貼 | 變化 | ★★★★ | [collage.tsx](../og-image-generator/templates/collage.tsx) |
| 14 | 孔版印刷 | 紙張基底 | ★★★ | [risograph.tsx](../og-image-generator/templates/risograph.tsx) |
| 15 | 蒸氣波 | 深色霓虹 | ★★★★★ | [vaporwave.tsx](../og-image-generator/templates/vaporwave.tsx) |
| 16 | 垃圾搖滾/頹廢 | 褪色深色 | ★★★★ | [grunge.tsx](../og-image-generator/templates/grunge.tsx) |
**X 上表現最佳**：終端機、粗野主義、新粗野主義、深色漸層、蒸氣波——高對比 + 深色背景是 X 時間線的最佳選擇。**X 上應避免**：過於企業品牌風格且沒有深色變體的圖片；在深色模式時間線中純白色的背景。
## 7. 字體與排版
與 OG 規則相同。請參閱 **og-image-generator** [references/typography.md](../og-image-generator/references/typography.md)。
推特特定新增：由於時間線圖片渲染寬度約為 260px（相較於 OG 的約 500px 桌面動態），最低字體大小增加 4px——使用 28px 而非 24px 作為最低標準。
## 8. 代理 YAML 檢查
```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 時使用推特卡片數據
## FAQ
### 什麼是推特卡片圖片生成器？
推特卡片圖片生成器是一種工具或技能，專門創建針對 X（推特）連結預覽優化的圖片。這些圖片遵循推特獨特的長寬比（2:1，1200x675 像素）和設計考量，確保在平台上分享連結時能正確且美觀地顯示。
### 此生成器與通用的 Open Graph (OG) 圖片生成器有何不同？
雖然它與 OG 圖片生成器共享基礎設施，但此技能特別將輸出尺寸調整為推特的 1200x675px（2:1）比例，納入 X 特定的設計調整，考量時間線安全區域，並支援播放器卡片需求。通用的 OG 圖片通常為 1200x630px（1.91:1）。
### 推特卡片圖片的建議尺寸為何？
推特卡片圖片的建議尺寸為 1200x675 像素，提供 2:1 的長寬比。這可確保圖片有效填滿卡片並避免上下黑邊。
### 我可以為推特卡片使用 SVG 圖片嗎？
不可以，推特不支援 SVG 作為卡片圖片。您應該使用 PNG、JPG 或 WebP 格式。若使用 GIF，只會顯示第一幀。
### 此生成器如何處理推特卡片圖片的深色模式？
生成器透過偏好深色背景風格或為模板提供深色模式變體，來考量推特的深色模式使用情況。這確保圖片能自然地融入深色模式時間線，並為約 40% 的推特用戶保持視覺吸引力。
### 什麼是「時間線安全區域」，為什麼它對推特卡片圖片很重要？
「時間線安全區域」指的是圖片上方 60% 的區域，關鍵內容（標題、主要視覺元素）應放置於此。這至關重要，因為推特在行動裝置時間線中會將圖片裁切至約 1:1，直到推文被展開，這意味著底部 20% 的內容可能會被裁掉。