Back to Details

og-card

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

/og-card

/og-card

vs /og-hero-image

与/og-hero-image的对比

  • /og-hero-image: AI creative via Gemini. Use for one-off hero art.
  • /og-card: consistent templates via Satori. Use for branded systems.
  • /og-hero-image：通过Gemini生成AI创意内容。用于一次性的主视觉图创作。
  • /og-card：通过Satori使用一致性模板。用于品牌化系统。

Templates

模板

  • blog: title + author + date + brand colors
  • product: logo + tagline + screenshot
  • changelog: version + highlights
  • comparison: product vs competitor
  • blog：标题 + 作者 + 日期 + 品牌配色
  • product：Logo + 标语 + 截图
  • changelog：版本号 + 亮点
  • comparison：产品 vs 竞品

Process

流程

  1. Read 
    brand-profile.yaml
    for colors/fonts when present.
  2. Select a template and pass required fields.
  3. Render via 
    skills/og-card/scripts/generate-card.ts
    .
  4. Emit a 1200x630 PNG.
  1. 若存在
    brand-profile.yaml
    ，读取其中的配色/字体信息。
  2. 选择一个模板并传入所需字段。
  3. 通过
    skills/og-card/scripts/generate-card.ts
    进行渲染。
  4. 输出一张1200x630的PNG图片。

Prerequisites

前置条件

pnpm add @vercel/og satori sharp
pnpm add @vercel/og satori sharp

Usage

使用方法

/og-card blog "Title" by Author
/og-card product for heartbeat
/og-card blog "Title" by Author
/og-card product for heartbeat

Output

输出

og-[template]-[slug].png
at 1200x630
生成1200x630尺寸的
og-[template]-[slug].png
文件