og-image

用途

og-image 技能用于为项目生成专业的社交媒体分享预览图（Open Graph 图片），并同步配置对应的 meta 标签。它不会脱离项目单独设计图片，而是基于现有代码库的设计系统来生成与站点风格一致的 OG 页面并截图。

工作流程

第一阶段：代码库分析

技能会先探索项目以了解以下信息：

框架检测：检查 package.json 中的 Next.js、Vite、Astro、Remix 等；识别路由模式（基于文件或基于配置）；确定 /og-image 路由的创建位置。
设计系统发现：查找 Tailwind 配置（tailwind.config.js/ts）中的配色；检查全局样式中的 CSS 变量（:root 定义）；查找现有颜色 token、字体系列、间距比例；寻找主题或设计 token 文件。
品牌资源：在 /public、/assets、/src/assets 中查找 logo 文件；检查 favicon、应用图标；查找带品牌信息的现有 hero 区域或落地页。
产品信息：从 package.json、落地页或 meta 标签中提取产品名称；从现有页面查找标语/描述；查看现有 OG/meta 配置以了解当前设置。
现有组件：查找可复用的 UI 组件；检查毛玻璃效果、渐变或特色视觉模式；识别整体美学风格（深色/浅色模式等）。

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

在 /og-image（或对应框架的等效路径）创建专用路由。页面要求：

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

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

内容结构：

产品 logo/图标（显著位置）
产品名称，使用有辨识度的字体
标语或价值主张
产品的视觉呈现（mockup、插画或抽象设计）
底部展示 URL/域名
与项目美学匹配的背景（渐变、图案等）

设计原则：使用项目现有配色；与主站字体保持一致；包含代表产品的视觉元素；确保在小尺寸下高对比度可读（社交预览通常很小）；测试图片缩放到约 400px 宽时文字是否可读。

第三阶段：截图捕获

使用 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（然后复制到 /public）

第四阶段：Meta 标签配置

审计并更新项目的 meta 标签配置。Next.js App Router 更新 layout.tsx；其他框架更新相应位置。

必需的 meta 标签：

// 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",  // 或绝对 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",  // 如提供
  images: [{
    url: "/og-image.png",
    width: 1200,
    height: 630,
    alt: "Descriptive alt text",
  }],
},

// 附加
other: {
  "theme-color": "#000000",  // 匹配品牌色
  "msapplication-TileColor": "#000000",
},

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

确保设置 metadataBase 以便相对 URL 正确解析：

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

第五阶段：验证与输出

验证图片存在于 public 路径
检查 meta 标签在 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
新增/更新的 meta 标签列表
社交预览调试器链接

缺失信息询问

仅当无法从代码库确定时才询问用户：

域名/URL：若现有配置中未找到，询问生产域名
Twitter/X 账号：若要添加 twitter:creator，询问用于署名的账号（可选）
标语：若未找到明确标语，询问用于社交预览的简短标语（1 句话）

框架特定说明

Next.js App Router：创建 /app/og-image/page.tsx；在 /app/layout.tsx 更新 metadata；OG 页面使用 'use client' 指令。
Next.js Pages Router：创建 /pages/og-image.tsx；更新 _app.tsx 或使用 next-seo。
Vite/React：通过路由配置创建路由；更新 index.html 的 meta 标签或使用 react-helmet。
Astro：创建 /src/pages/og-image.astro；在 layout 中更新 meta 标签。

质量检查清单

完成前验证：

OG 图片在 1200×630 下正确渲染
截图中无开发工具指示器
图片已保存到 public 文件夹
Meta 标签包含 og:image 且具备绝对 URL 能力
Meta 标签包含 twitter:card 为 summary_large_image
Meta 标签包含尺寸（宽/高）
Meta 标签包含用于无障碍的 alt 文本
theme-color 已设为匹配品牌色
用户已获知缓存刷新 URL

限制

具体收费、价格与平台支持信息暂未提供。该技能依赖 Playwright 进行截图，并假定项目可通过本地开发服务器访问 OG 图片路由。