用途:为 X(Twitter)链接预览卡片生成图片,即分享链接时在时间线出现的卡片图。Twitter Card 的尺寸与渲染行为不同于标准 Open Graph,本技能覆盖适配 2:1 比例与平台特性的完整生成流程。
主要能力:沿用 og-image-generator 的六种生成方式与十六种视觉风格,差异在于输出尺寸改为 1200×675(而非 1200×630)、X 专属设计适配、时间线安全分区与 player 卡片海报支持。规格方面:官方比例 2:1,实际渲染约 1.91:1;推荐 1200×675,跨平台可用 1200×628;最小 300×157,最大 4096×4096;文件小于 5MB;支持 JPG、PNG、WebP、GIF(仅首帧),不支持 SVG。卡片类型决定图片展示:summary_large_image 为全宽大图,summary 为 100×100 缩略图,player 为播放前海报帧,app 为应用图标加推广图。
使用方式:六种生成方式包括 AI 图像生成、智能体内容感知工作流、Satori + resvg 代码生成、Puppeteer、托管服务与 JSON 配置。代码方式中把高度从 630 改为 675,并可在同一端点按 platform 参数区分输出。元数据需同时设置 og:image 与 twitter:image,因为 Facebook、LinkedIn 不读取 twitter:image。player 卡片需设置 twitter:card、twitter:player、twitter:player:width、twitter:player:height 与 twitter:image。
适用场景:需要 1200×675 的 X 链接预览图、summary_large_image 或 player 海报;需要深色模式安全布局、内容置于上方 60%、边缘留 20px 以避开圆角裁剪;已使用 og-image-generator 并想要其 Twitter 适配版本。
限制与注意:通用 OG 图(1200×630)应改用 og-image-generator;仅设置 HTML 元标签应使用 marketing-skills 的 twitter-cards;不支持 SVG 输出;无代码可视化编辑器或托管 API 应改用 Oginify。移动端时间线会裁剪为约 1:1,关键内容须置于上方 60%,底部 20% 不放关键文字;约 40% 用户使用深色模式,模板宜有深色变体;时间线图片约 260px 宽,最小字号建议 28px;Twitter 缓存最长约 7 天,可用 Card Validator 强制重新抓取。字体规则与 OG 相同,Twitter 专属调整是最小字号加 4px。
验证:可用 https://cards-dev.twitter.com/validator 预览渲染效果,并做手动、深色模式与 1:1 裁剪测试。相关技能包括同仓库的 og-image-generator,以及可选的 twitter-cards、open-graph、social-share-generator。