og-image

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

This skill creates professional Open Graph images for social media sharing. It analyzes the existing codebase to match the project's design system, generates a dedicated OG image page, screenshots it, and configures all necessary meta tags.

本Skill可为社交分享创建专业的Open Graph图片。它会分析现有代码库以匹配项目的设计系统，生成专用的OG图片页面，对其进行截图，并配置所有必要的元标签。

Workflow

工作流程

Phase 1: Codebase Analysis

阶段1：代码库分析

Explore the project to understand:

Framework Detection
- Check
```
package.json
```
  for Next.js, Vite, Astro, Remix, etc.
- Identify the routing pattern (file-based, config-based)
- Find where to create the
```
/og-image
```
  route
Design System Discovery
- Look for Tailwind config (
```
tailwind.config.js/ts
```
  ) for color palette
- Check for CSS variables in global styles (
```
:root
```
  definitions)
- Find existing color tokens, font families, spacing scales
- Look for a theme or design tokens file
Branding Assets
- Find logo files in
```
/public
```
  ,
```
/assets
```
  ,
```
/src/assets
```
- Check for favicon, app icons
- Look for existing hero sections or landing pages with branding
Product Information
- Extract product name from
```
package.json
```
  , landing page, or meta tags
- Find tagline/description from existing pages
- Look for existing OG/meta configuration to understand current setup
Existing Components
- Find reusable UI components that could be leveraged
- Check for glass effects, gradients, or distinctive visual patterns
- Identify the overall aesthetic (dark mode, light mode, etc.)

探索项目以了解：

框架检测
- 检查
```
package.json
```
  以识别Next.js、Vite、Astro、Remix等框架
- 确定路由模式（基于文件、基于配置）
- 找到创建
```
/og-image
```
  路由的位置
设计系统发现
- 查找Tailwind配置文件（
```
tailwind.config.js/ts
```
  ）以获取调色板
- 检查全局样式中的CSS变量（
```
:root
```
  定义）
- 找到现有的颜色标记、字体族、间距比例
- 查找主题或设计标记文件
品牌资产
- 在
```
/public
```
  、
```
/assets
```
  、
```
/src/assets
```
  目录中查找Logo文件
- 检查网站图标、应用图标
- 查找带有品牌元素的现有首页或着陆页
产品信息
- 从
```
package.json
```
  、着陆页或元标签中提取产品名称
- 从现有页面中查找标语/描述
- 查找现有的OG/元配置以了解当前设置
现有组件
- 查找可复用的UI组件
- 检查玻璃效果、渐变或独特的视觉图案
- 确定整体视觉风格（深色模式、浅色模式等）

Phase 2: OG Image Page Creation

阶段2：OG图片页面创建

Create a dedicated route at

/og-image

(or equivalent for the framework):

Page Requirements:

Fixed dimensions: exactly 1200px wide × 630px tall
Self-contained styling (no external dependencies that might not render)
Hide any dev tool indicators with CSS:

css

[data-nextjs-dialog-overlay],
[data-nextjs-dialog],
nextjs-portal,
#__next-build-indicator {
  display: none !important;
}

Content Structure:

Product logo/icon (prominent placement)
Product name with distinctive typography
Tagline or value proposition
Visual representation of the product (mockup, illustration, or abstract design)
URL/domain at the bottom
Background that matches the project aesthetic (gradients, patterns, etc.)

Design Principles:

Use the project's existing color palette
Match the typography from the main site
Include visual elements that represent the product
Ensure high contrast for readability at small sizes (social previews are often small)
Test that text is readable when the image is scaled down to ~400px wide

创建一个专用路由

/og-image

（或对应框架的等效路由）：

页面要求：

固定尺寸：精确1200px宽 × 630px高
独立样式（不依赖可能无法渲染的外部资源）
使用CSS隐藏任何开发工具指示器：

css

[data-nextjs-dialog-overlay],
[data-nextjs-dialog],
nextjs-portal,
#__next-build-indicator {
  display: none !important;
}

内容结构：

产品Logo/图标（突出显示）
带有独特排版的产品名称
标语或价值主张
产品的视觉呈现（模型图、插图或抽象设计）
底部显示URL/域名
与项目视觉风格匹配的背景（渐变、图案等）

设计原则：

使用项目现有的调色板
匹配主站点的排版风格
包含代表产品的视觉元素
确保小尺寸下的可读性（社交预览图通常尺寸较小）
测试文本缩放到约400px宽时是否可读

Phase 3: Screenshot Capture

阶段3：截图捕获

Use Playwright to capture the OG image:

Navigate to the OG image page (typically
```
http://localhost:3000/og-image
```
or similar)
Resize viewport to exactly 1200×630
Wait for any animations to complete or fonts to load
Take a PNG screenshot
Save to the project's public folder as
```
og-image.png
```

Playwright Commands:

browser_navigate: http://localhost:{port}/og-image
browser_resize: width=1200, height=630
browser_take_screenshot: og-image.png (then copy to /public)

使用Playwright捕获OG图片：

导航到OG图片页面（通常为
```
http://localhost:3000/og-image
```
或类似地址）
将视口调整为精确1200×630
等待所有动画完成或字体加载完毕
拍摄PNG截图
保存到项目的
```
public
```
文件夹，命名为
```
og-image.png
```

Playwright命令：

browser_navigate: http://localhost:{port}/og-image
browser_resize: width=1200, height=630
browser_take_screenshot: og-image.png (then copy to /public)

Phase 4: Meta Tag Configuration

阶段4：元标签配置

Audit and update the project's meta tag configuration. For Next.js App Router, update

layout.tsx

. For other frameworks, update the appropriate location.

Required Meta Tags:

typescript

// Open Graph
openGraph: {
  title: "Product Name - Short Description",
  description: "Compelling description for social sharing",
  url: "https://yourdomain.com",
  siteName: "Product Name",
  locale: "en_US",
  type: "website",
  images: [{
    url: "/og-image.png",  // or absolute URL
    width: 1200,
    height: 630,
    alt: "Descriptive alt text for accessibility",
    type: "image/png",
  }],
},

// Twitter/X
twitter: {
  card: "summary_large_image",
  title: "Product Name - Short Description",
  description: "Compelling description for Twitter",
  creator: "@handle",  // if provided
  images: [{
    url: "/og-image.png",
    width: 1200,
    height: 630,
    alt: "Descriptive alt text",
  }],
},

// Additional
other: {
  "theme-color": "#000000",  // match brand color
  "msapplication-TileColor": "#000000",
},

appleWebApp: {
  title: "Product Name",
  statusBarStyle: "black-translucent",
  capable: true,
},

Ensure
metadataBase
is set for relative URLs to resolve correctly:

typescript

metadataBase: new URL("https://yourdomain.com"),

审核并更新项目的元标签配置。对于Next.js App Router，更新

layout.tsx

。对于其他框架，更新相应位置。

必填元标签：

typescript

// Open Graph
openGraph: {
  title: "Product Name - Short Description",
  description: "Compelling description for social sharing",
  url: "https://yourdomain.com",
  siteName: "Product Name",
  locale: "en_US",
  type: "website",
  images: [{
    url: "/og-image.png",  // or absolute URL
    width: 1200,
    height: 630,
    alt: "Descriptive alt text for accessibility",
    type: "image/png",
  }],
},

// Twitter/X
twitter: {
  card: "summary_large_image",
  title: "Product Name - Short Description",
  description: "Compelling description for Twitter",
  creator: "@handle",  // if provided
  images: [{
    url: "/og-image.png",
    width: 1200,
    height: 630,
    alt: "Descriptive alt text",
  }],
},

// Additional
other: {
  "theme-color": "#000000",  // match brand color
  "msapplication-TileColor": "#000000",
},

appleWebApp: {
  title: "Product Name",
  statusBarStyle: "black-translucent",
  capable: true,
},

**确保设置

metadataBase

**以正确解析相对URL：

typescript

metadataBase: new URL("https://yourdomain.com"),

Phase 5: Verification & Output

阶段5：验证与输出

Verify the image exists at the public path
Check meta tags are correctly rendered in the HTML
Provide cache-busting instructions:
- Facebook/LinkedIn: https://developers.facebook.com/tools/debug/
- Twitter/X: https://cards-dev.twitter.com/validator
- LinkedIn: https://www.linkedin.com/post-inspector/
Summary output:
- Path to generated OG image
- URL to preview the OG image page locally
- List of meta tags added/updated
- Links to social preview debuggers

验证图片存在于指定的公共路径
检查元标签是否在HTML中正确渲染
提供缓存清除说明：
- Facebook/LinkedIn: https://developers.facebook.com/tools/debug/
- Twitter/X: https://cards-dev.twitter.com/validator
- LinkedIn: https://www.linkedin.com/post-inspector/
总结输出：
- 生成的OG图片路径
- 本地预览OG图片页面的URL
- 添加/更新的元标签列表
- 社交预览调试工具链接

Prompting for Missing Information

缺失信息提示

Only ask the user if these cannot be determined from the codebase:

Domain/URL - If not found in existing config, ask: "What's your production domain? (e.g., https://example.com)"
Twitter/X handle - If adding twitter:creator, ask: "What's your Twitter/X handle for attribution? (optional)"
Tagline - If no clear tagline found, ask: "What's a short tagline for social previews? (1 sentence)"

仅当无法从代码库中确定以下信息时，才询问用户：

域名/URL - 如果在现有配置中未找到，询问：“你的生产域名是什么？（例如：https://example.com）”
Twitter/X 账号 - 如果要添加twitter:creator标签，询问：“你的Twitter/X账号是什么？（可选）”
标语 - 如果未找到明确的标语，询问：“用于社交预览的简短标语是什么？（一句话）”

Framework-Specific Notes

框架特定说明

Next.js App Router:

Create
```
/app/og-image/page.tsx
```
Update metadata in
```
/app/layout.tsx
```
Use
```
'use client'
```
directive for the OG page

Next.js Pages Router:

Create
```
/pages/og-image.tsx
```
Update
```
_app.tsx
```
or use
```
next-seo
```

Vite/React:

Create route via router config
Update
```
index.html
```
meta tags or use
```
react-helmet
```

Astro:

Create
```
/src/pages/og-image.astro
```
Update layout with meta tags

Next.js App Router：

创建
```
/app/og-image/page.tsx
```
在
```
/app/layout.tsx
```
中更新元数据
为OG页面使用
```
'use client'
```
指令

Next.js Pages Router：

创建
```
/pages/og-image.tsx
```
更新
```
_app.tsx
```
或使用
```
next-seo
```

Vite/React：

通过路由配置创建路由
更新
```
index.html
```
元标签或使用
```
react-helmet
```

Astro：

创建
```
/src/pages/og-image.astro
```
使用元标签更新布局

og-image

Original

Translation

Workflow

工作流程

Phase 1: Codebase Analysis

阶段1：代码库分析

Phase 2: OG Image Page Creation

阶段2：OG图片页面创建

Phase 3: Screenshot Capture

阶段3：截图捕获

Phase 4: Meta Tag Configuration

阶段4：元标签配置

Phase 5: Verification & Output

阶段5：验证与输出

Prompting for Missing Information

缺失信息提示

Framework-Specific Notes

框架特定说明

Quality Checklist

质量检查清单