og-image

此技能可为社交媒体分享创建专业的 Open Graph 图片。它会分析现有代码库，以匹配项目的设计系统，生成专用的 OG 图片页面并截取屏幕截图，同时配置所有必需的元标签。

工作流

第 1 阶段：代码库分析

探索项目，了解以下内容：

1. 框架检测

   • 检查 package.json，确认项目使用 Next.js、Vite、Astro、Remix 等框架
   • 确定路由模式（基于文件或基于配置）
   • 找到创建 /og-image 路由的位置

2. 设计系统探索

   • 查找 Tailwind 配置文件（tailwind.config.js/ts），了解配色方案
   • 检查全局样式中的 CSS 变量（:root 定义）
   • 查找现有的颜色令牌、字体系列和间距比例
   • 查找主题或设计令牌文件

3. 品牌素材

   • 在 /public、/assets、/src/assets 中查找徽标文件
   • 检查 favicon 和应用图标
   • 查找带有品牌元素的现有 Hero 区块或落地页

4. 产品信息

   • 从 package.json、落地页或元标签中提取产品名称
   • 从现有页面查找标语或描述
   • 查找现有的 OG/元标签配置，了解当前设置

5. 现有组件

   • 查找可复用的 UI 组件
   • 检查是否有玻璃效果、渐变或鲜明的视觉风格
   • 确定整体视觉风格（深色模式、浅色模式等）

第 2 阶段：创建 OG 图片页面

在 /og-image 路径（或该框架的等效路径）创建专用路由：

页面要求：

• 固定尺寸：宽 1200px × 高 630px，精确无误
• 样式自包含（不依赖可能无法渲染的外部资源）
• 使用 CSS 隐藏所有开发工具指示器：

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

内容结构：

• 产品徽标/图标（置于醒目位置）
• 产品名称，采用独特的排版
• 标语或价值主张
• 产品的视觉呈现（模型图、插画或抽象设计）
• 底部显示 URL/域名
• 符合项目视觉风格的背景（渐变、图案等）

设计原则：

• 使用项目现有的配色方案
• 与主站的排版风格保持一致
• 添加能够体现产品特色的视觉元素
• 确保在小尺寸下也有较高对比度，便于阅读（社交媒体预览通常较小）
• 测试图片缩放到约 400px 宽时，文字是否仍清晰可读

第 3 阶段：截取屏幕截图

使用 Playwright 截取 OG 图片：

1. 导航到 OG 图片页面（通常为 http://localhost:3000/og-image 或类似地址）
2. 将视口调整为精确的 1200×630
3. 等待动画完成或字体加载完毕
4. 截取 PNG 格式的屏幕截图
5. 将图片保存到项目的公共目录，命名为 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)

第 4 阶段：配置元标签

检查并更新项目的元标签配置。对于 Next.js App Router，更新 layout.tsx。对于其他框架，则更新相应位置。

必需的元标签：

// 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：

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

第 5 阶段：验证并输出

1. 确认图片存在于公共路径

2. 检查元标签是否已正确渲染到 HTML 中

3. 提供缓存刷新说明：

   • Facebook/LinkedIn：https://developers.facebook.com/tools/debug/
   • Twitter/X：https://cards-dev.twitter.com/validator
   • LinkedIn：https://www.linkedin.com/post-inspector/

4. 输出摘要：

   • 生成的 OG 图片路径
   • 本地预览 OG 图片页面的 URL
   • 已添加/更新的元标签列表
   • 社交媒体预览调试工具链接

缺少信息时的提问

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

1. 域名/URL - 如果现有配置中没有，询问：“你的生产环境域名是什么？（例如：https://example.com）”

2. Twitter/X 用户名 - 如果要添加 twitter:creator，询问：“用于署名的 Twitter/X 用户名是什么？（可选）”

3. 标语 - 如果找不到明确的标语，询问：“用于社交媒体预览的简短标语是什么？（1 句话）”

框架特定说明

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 图片以 1200×630 的尺寸正确渲染
• 截图中没有可见的开发工具指示标记
• 图片已保存到 public 文件夹
• 元标签包含支持绝对 URL 的 og:image
• 元标签包含值为 summary_large_image 的 twitter:card
• 元标签包含尺寸（width/height）
• 元标签包含用于无障碍访问的替代文本
• theme-color 已设置为与品牌相匹配的颜色
• 已告知用户使用缓存失效 URL

---

致谢与署名

此技能基于 Stevy Smith 的出色成果。

原始仓库：https://github.com/stevysmith/og-image-skill

特别感谢 Stevy Smith 慷慨贡献开源成果，助力打造了此技能集合。 由 webconsulting.at 为此技能集合改编