Twitter 卡片图片生成器智能体技能

推特卡片图片生成器

生成针对 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 而非运行代理流水线

调用时：首次使用时，先用 1-2 句话说明本技能涵盖的内容及其重要性，再提供主要输出。后续使用或用户要求跳过时，直接提供主要输出。

1. 推特如何消费图片

推特按以下优先级读取图片：

1. twitter:image ——若明确设置，则直接使用
2. og:image ——若无推特卡片标签，则回退至 OG 图片
3. 无图片——纯文本链接预览

关键洞察：脸书和领英不会读取 twitter:image。推特是唯一读取推特卡片标签的平台。这意味着你需要在元数据中同时提供两个图片路径，即使实际渲染流水线可以共享。

2. 推特图片规格

卡片类型决定图片显示方式：

在大多数情况下，应使用 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。

// 共享端点同时服务于 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）和流水线选择，请参阅 内容策略.md 和 流水线指南.md。

4. X 平台专属设计考量

推特的图片渲染方式与脸书/领英不同。设计时请注意以下几点：

深色模式（约 40% 用户）：图片以内联形式显示在信息流中，四周环绕推文。深色背景自然融入；浅色背景虽突出，但在深色模式下可能显得刺眼。每个模板都应提供深色变体或深色友好的默认风格。在 6 种风格中，终端/命令行、午夜墨杂志和粗野主义（黑色背景）天然适合深色模式。瑞士极简和报纸风格则应配备深色模式替代方案。

时间线裁剪（移动端）：在移动端，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 和 参考资料/风格系统 v3.md 相同的 16 种视觉风格。所有模板均可用于推特——只需将画布高度改为 675px 即可。

X 平台效果最佳者：终端、粗野主义、新粗野主义、深色渐变、蒸汽波——高对比度+深色背景是 X 时间线上的最优选择。X 平台应避免：缺乏深色变体的过于企业化的品牌风格；深色模式时间线中的纯白色背景。

7. 字体与排版

与 OG 规则相同。请参阅 og-image-generator 参考资料/排版.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（营销技能）：twitter:card、twitter:site、twitter:creator 的 HTML 元标签配置及验证。负责如何设置标签；本技能负责如何创建图片。
• open-graph（营销技能）：og:title、og:image、og:url 的 HTML 元标签配置及平台测试工具
• social-share-generator（营销技能）：分享按钮 UI，当用户将链接分享到 X 平台时使用推特卡片数据