安装命令
npx skills add https://github.com/0juano/agent-skills --skill x-image-cards🇨🇳中文介绍
X 图片卡片
创建看起来像图片而非营销横幅的 X 卡片。让视觉内容本身成为主体——X 已在卡片 UI 中显示你的标题和描述。
X 平台特定要求
| 规格 | 数值 | 原因 |
|---|---|---|
| 尺寸 | 2400×1200 物理像素（1200×600 逻辑像素） | 为视网膜屏提供 2 倍分辨率，2:1 宽高比 |
| 安全边距 | 50-56px 内边距（以 1 倍尺寸计） | X 在移动端会裁剪边缘 |
| URL 格式 | /og/page.png 而非 /og/page?format=png | X 偏好显式文件扩展名 |
| 颜色 | 主色 #FFFFFF，避免使用微妙的灰色 | 缩略图尺寸非常小 |
零宽空格技巧
X 会将 og:title 以白色文字叠加在图片上。使用零宽空格来隐藏它：
<meta property="og:title" content="​" />
在 JSX 中：content={"\u200B"}
你的页面 <title> 保持描述性以利于 SEO——只有 og:title 使用此技巧。
Meta 标签
<meta property="og:image" content="https://example.com/og/page.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="600" />
<meta property="og:title" content="​" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og/page.png" />
动态生成
使用 @vercel/og 并设置 2 倍缩放和安全边距：
import { ImageResponse } from '@vercel/og';
const OG_SCALE = 2;
export async function GET(request: Request) {
return new ImageResponse(
(
<div style={{
width: '100%',
height: '100%',
display: 'flex',
backgroundColor: '#0a0f1c',
padding: 100, // 安全边距：50px * 2
}}>
{/* 你的视觉内容放在这里 */}
</div>
),
{ width: 1200 * OG_SCALE, height: 600 * OG_SCALE }
);
}
Express
app.get('/og/:slug.png', async (req, res) => {
const image = new ImageResponse(/* ... */);
const buffer = await image.arrayBuffer();
res.setHeader('Content-Type', 'image/png');
res.setHeader('Cache-Control', 'public, max-age=86400');
res.send(Buffer.from(buffer));
});
动态路由（可选）
对于每个页面的 OG 图片，有两种方法：
按需生成
在爬虫请求图片时生成：
/og/[slug].png → 收到请求时生成图片
风险： X 爬虫大约 5 秒后超时。冷启动可能超过此时间，导致预览图空白。
预先生成（推荐）
在内容创建时生成并存储图片：
// 在内容创建时
const imageBuffer = await generateOgImage(data);
await db.insert({ ogImageData: imageBuffer }); // 存储为 BYTEA
// 收到请求时 - 即时响应
app.get('/og/:id.png', (req, res) => {
const { ogImageData } = await db.get(req.params.id);
res.setHeader('Content-Type', 'image/png');
res.send(ogImageData);
});
预生成确保了对爬虫的即时响应。
检查清单
- 2400×1200（2 倍视网膜分辨率）
- 2:1 宽高比
- 50-56px 安全边距
- 高对比度颜色
- URL 中使用
.png扩展名 og:title中使用零宽空格- 测试：https://cards-dev.twitter.com/validator
为 BondTerminal 构建。查看实际效果：示例 X 帖子。
每周安装数
9
代码仓库
首次出现
2026 年 1 月 30 日
安全审计
Gen Agent Trust HubPassSocketPassSnykPass
安装于
opencode9
gemini-cli9
claude-code9
codex8
replit7
cursor7
🇺🇸English
X Image Cards
Create X cards that look like images, not marketing banners. Let the visual be the content — X already shows your title and description in the card UI.
X-Specific Requirements
| Spec | Value | Why |
|---|---|---|
| Dimensions | 2400×1200 physical (1200×600 logical) | 2x for retina, 2:1 aspect ratio |
| Safe margins | 50-56px padding (at 1x) | X clips edges on mobile |
| URL format | /og/page.png not /og/page?format=png | X prefers explicit extensions |
| Colors | #FFFFFF primary, avoid subtle grays | Thumbnails are tiny |
Zero-Width Space Trick
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
