# Twitter 卡片图片生成器智能体技能
> 生成经过优化的 Twitter 卡片（X）链接预览图片，具有正确的 2:1 宽高比和特定于平台的约束。此技能可确保您的推文预览完美呈现，帮助您吸引受众注意力并提升参与度。
- Canonical: https://nanoskill.ai/zh/skills/twitter-card-image-generator
- Markdown: https://nanoskill.ai/zh/skills/twitter-card-image-generator.md
- Author: kostja94
- Published: 2026-06-09T06:00:00.000Z
- Updated: 2026-07-25T04:19:51.168Z
- Language: zh-CN
- 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
这项 Twitter 卡片图片生成技能使用户能够为 X（Twitter）链接预览创建完美优化的图片，确保其内容在时间线上产生强烈的视觉冲击。与通用的 Open Graph 图片不同，该工具专门适应 Twitter 独特的 2:1 宽高比（1200x675px）和特定于平台的渲染特性，帮助内容创作者、营销人员和开发者增强他们的社交媒体影响力并推动参与度。
该技能利用六种不同的生成方法和 16 种多功能的视觉样式，为图片创作提供了全面的选项。它集成了高级功能，如用于背景的 AI 图像生成、内容感知工作流以及 Satori/resvg 管道集成。内置了暗模式兼容性、移动端时间线裁剪和边缘遮罩等关键设计考量，确保图片在各种用户体验中都具有视觉吸引力和功能性。
除了标准的链接预览，该生成器还支持为 Twitter 播放器卡片创建引人注目的海报图片，非常适合视频和音频内容。通过集成的 YAML 检查和常见错误指导，用户可以自信地制作出符合技术规格并最大化点击率的高质量 Twitter 卡片图片，使他们的分享链接更有效、更专业。
## Key features
- **针对X（推特）链接预览进行优化**: 生成专为推特的2:1宽高比（1200×675像素）和独特渲染行为设计的图片，确保您的内容在时间线中脱颖而出。
- **六种生成方法和16种视觉风格**: 利用六种不同的生成方法，包括AI图片生成和内容感知工作流程，跨16种视觉风格创建多样化且引人入胜的推特卡片图片。
- **深色模式与移动端裁剪适配**: 设计在推特深色模式下表现良好并能应对移动端时间线裁剪的图片，将关键内容放置在安全区域以获得最大可见度。
- **播放器卡片海报生成**: 为推特播放器卡片创建引人注目的海报图片，包含播放按钮叠加和视频标题，吸引用户与您的多媒体内容互动。
- **全面验证检查**: 受益于内置的YAML检查，可验证图片尺寸、卡片类型、URL格式以及时间线安全区域和深色模式兼容性等设计考虑因素。
## Use cases
- **为博客文章生成推特卡片图片**: 自动为新博客文章创建视觉上吸引人的1200×675像素推特卡片图片，确保在X上分享时看起来专业且吸引人。
- **为视频设计播放器卡片海报**: 为在推特上分享的视频内容制作优化的海报图片，在视频播放前就提高点击率。
- **确保社交分享的深色模式兼容性**: 调整现有的Open Graph图片，或使用深色模式友好的设计生成新图片，确保您的推特卡片图片在所有用户的显示设置下都看起来很棒。
## Result preview
探索由该技能提供支持的高性能 Twitter 卡片图片。
## Result walkthrough
### 安装
将 Twitter 卡片图片生成器技能添加到您的 AI 代理中。
### 描述内容
分享您的内容详情、品牌标识和首选的视觉方向。
### 生成结果
创建经过平台优化的 Twitter 卡片图片，具有强烈的视觉层次感和以参与度为中心的设计改进。
## Skill definition
# 推特卡片图片生成器
生成针对 X（原推特）链接预览优化的图片——即当有人分享链接时，时间线上出现的卡片。推特卡片具有独特的图像尺寸和渲染行为，与标准开放图谱不同。本技能涵盖了完整的生成流水线，适配推特的 2:1 宽高比和平台特定的细节。
来自 **og-image-generator** 的所有六种生成方法和六种视觉风格在此处均适用。唯一的区别在于：输出尺寸（1200x675 而非 1200x630）、针对 X 的设计调整、时间线安全区域以及播放器卡片支持。
## 何时使用
- 用户需要 **1200×675px（2:1）** 的图片，用于 X/推特链接预览、`summary_large_image` 或播放器卡片海报
- 用户提及 `twitter:image`、推特卡片、X 预览图片、推文预览或时间线卡片设计
- 用户需要兼容深色模式的布局、上方 60% 内容区域，或针对 X 的圆角裁剪预留 20px 边缘安全区
- 用户已使用 **og-image-generator**，并希望获得相同风格和流水线的推特适配版本
## 何时不应使用
- **通用 OG 图片（1200×630，1.91:1）** 用于脸书、领英、Slack 等——请改用 **og-image-generator**
- **仅设置 HTML 元标签**（而非创建图片文件）——请使用营销技能中的 **twitter-cards**
- **SVG 输出** ——推特不支持将 SVG 用作卡片图片；请使用 PNG 或 JPG
- **无代码可视化编辑器或托管 API** ——请使用 [Oginify](https://oginify.com) 而非运行代理流水线
**调用时**：**首次使用**时，先用 1-2 句话说明本技能涵盖的内容及其重要性，再提供主要输出。**后续使用**或用户要求跳过时，直接提供主要输出。
## 1. 推特如何消费图片
推特按以下优先级读取图片：
1. `twitter:image` ——若明确设置，则直接使用
2. `og:image` ——若无推特卡片标签，则回退至 OG 图片
3. 无图片——纯文本链接预览
**关键洞察**：脸书和领英不会读取 `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` | 应用图标；图片为应用图标+宣传图片 |
在大多数情况下，应使用 `summary_large_image` 并采用 1200x675px。
## 3. 六种生成方式（推特适配版）
来自 **og-image-generator** §1 的所有六种方式均可用于推特图片。唯一的区别在于输出尺寸。本节介绍推特专属的适配 —— 完整的渲染流水线文档请参阅 **og-image-generator** §1。
### 3.1 AI 图片生成（核心方式 #1）
与 OG 相同的三部分提示策略，但加入了推特专属的限定：
```
第一部分 —— 视觉描述：背景、构图、氛围
第二部分 —— 文本规范：精确文本，用引号括起，并包含大小提示
第三部分 —— 推特约束：“1200x675px，2:1 宽高比，关键文本置于
上方 60%，建议深色背景以适配深色模式”
```
**混合方式（推荐）**：AI 生成背景/氛围；Satori 覆盖文本。这对于中文文本尤为关键，因为 AI 模型在处理中文时仍有不足——而推特约 40% 的深色模式使用率使得文本准确性更加重要。
完整的 AI 工具对比表（GPT Image 2.0、Flux、Nano Banana、DALL-E 3、Midjourney）请参阅 **og-image-generator** §1.1。
### 3.2 代理原生内容感知工作流（核心方式 #2）
与 OG (§1.2) 相同的 6 步工作流：读取内容 → 匹配风格 → 提取视觉元素 → 选择生成方式 → 生成 → 验证。每一步中增加了推特专属的考量：
**步骤 2（匹配风格）** ——考虑推特深色模式：优先选择深色背景风格（终端/命令行、午夜墨杂志、粗野主义深色模式）或为 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）和流水线选择，请参阅 [内容策略.md](../og-image-generator/references/content-strategy.md) 和 [流水线指南.md](../og-image-generator/references/pipeline-guide.md)。
## 4. X 平台专属设计考量
推特的图片渲染方式与脸书/领英不同。设计时请注意以下几点：
**深色模式（约 40% 用户）**：图片以内联形式显示在信息流中，四周环绕推文。深色背景自然融入；浅色背景虽突出，但在深色模式下可能显得刺眼。每个模板都应提供深色变体或深色友好的默认风格。在 6 种风格中，终端/命令行、午夜墨杂志和粗野主义（黑色背景）天然适合深色模式。瑞士极简和报纸风格则应配备深色模式替代方案。
**时间线裁剪（移动端）**：在移动端，`summary_large_image` 的图片在时间线中被裁剪为约 1:1，直到推文展开。只有在点击后，完整的 2:1 图片才会显示。将最重要的内容（标题、主视觉元素）放在图片上方 60% 区域内——即裁剪后保留下来的中心正方形区域。切勿将关键文字放在底部 20% 处。
**小尺寸下的文字可读性**：在移动信息流中，时间线图片的显示宽度约为 260px。请将模板缩小至 1/4（约 300px 宽）进行测试，确保文字依然可读。这比 OG 在桌面信息流中约 500px 的尺寸更为严格。
**边缘遮罩**：推特会对卡片图片应用轻微的圆角遮罩。放置在任何边缘 20px 以内的徽标和关键元素，有被部分裁剪的风险。
**推荐的推特模板适配（按风格）：**
| OG 模板 | 推特适配 |
|-------------|-------------------|
| 终端/命令行 | 将窗口控件下移（推特的圆角会裁剪左上角的圆点）；使用强调色以增强深色模式对比度 |
| 杂志编辑 | 使用“午夜墨”预设（为 X 设计的深色变体）；将图片区域上移（放在上方 50% 而非较低位置） |
| 瑞士极简 | 增加深色模式变体：`#0a0a0a` 背景，保持强调色，白色文字；数据行在 1:1 裁剪下表现良好 |
| 像素复古 | 天然深色背景——NES/Arcade/CGA 预设已适合 X 平台；将 HUD 元素缩小 10% 以避开边缘遮罩 |
| 粗野主义 | 黑色背景变体已原生支持深色模式；不对称标题块默认位于上方 60% 区域 |
| 报纸 | 增加 `#1a1a1a` 背景深色变体；多栏布局应改为垂直堆叠，以适应方形裁剪区域 |
## 5. 播放器卡片海报
对于视频/音频内容，`player` 卡片类型需要一张海报图片：
```html
```
海报图片在用户点击播放前显示。将其设计为引人注目的缩略图——包含一个播放按钮覆盖层（圆圈内的居中三角形）、视频标题以及内容中的一帧画面。同理建议使用 2:1 比例。播放按钮应为中心正方形区域内最大的元素。
对于 AI 生成的海报：提示词使用“视频缩略图，居中播放按钮，标题文字在上三分之一处，深色背景，1200x675px”。
## 6. 风格系统（与 OG 共享——16 种风格）
推特图片使用与 **og-image-generator** §3 和 [参考资料/风格系统 v3.md](../og-image-generator/references/style-system-v3.md) 相同的 16 种视觉风格。所有模板均可用于推特——只需将画布高度改为 675px 即可。
| # | 风格 | 深色模式 | X 平台点击率潜力 | 模板 |
|---|-------|-----------|----------------|----------|
| 1 | 终端 / 命令行 | 始终深色 | ★★★★★ | [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** [参考资料/排版.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**（营销技能）：`twitter:card`、`twitter:site`、`twitter:creator` 的 HTML 元标签配置及验证。负责如何设置标签；本技能负责如何创建图片。
- **open-graph**（营销技能）：`og:title`、`og:image`、`og:url` 的 HTML 元标签配置及平台测试工具
- **social-share-generator**（营销技能）：分享按钮 UI，当用户将链接分享到 X 平台时使用推特卡片数据
## FAQ
### 什么是推特卡片图片生成器？
推特卡片图片生成器是一种工具或技能，可创建专为X（推特）链接预览优化的图片。这些图片遵循推特独特的宽高比（2:1，1200×675像素）和设计考虑因素，确保在平台上分享链接时能够正确、美观地显示。
### 这个生成器与通用的Open Graph（OG）图片生成器有何不同？
尽管它与OG图片生成器共享基础架构，但该技能专门将输出尺寸适配为推特的1200×675像素（2:1）宽高比，融入了X特定的设计调整，考虑了时间线安全区域划分，并支持播放器卡片的要求。通用的OG图片通常为1200×630像素（1.91:1）。
### 推特卡片图片的推荐尺寸是多少？
推特卡片图片的推荐尺寸是1200×675像素，提供2:1的宽高比。这可以确保图片有效填充卡片并避免出现黑边。
### 我可以为推特卡片使用SVG图片吗？
不，推特不支持卡片图片使用SVG格式。您应该使用PNG、JPG或WebP格式。如果使用GIF，则只会显示第一帧。
### 这个生成器如何处理推特卡片图片的深色模式？
生成器通过优先选择深色背景样式或为模板提供深色模式变体，来考虑推特的深色模式使用情况。这确保图片自然地融入深色模式时间线，并为大约40%的推特用户保持视觉吸引力。
### 什么是“时间线安全区域”，为什么它对推特卡片图片很重要？
“时间线安全区域”指的是图片顶部60%的区域，应放置关键内容（标题、主要视觉元素）。这一点至关重要，因为推特在移动端时间线中会将图片裁剪为近似1:1的比例，直到推文展开，这意味着底部20%的内容可能会被裁剪掉。