AISkills - 智能 OG 图片生成器

OG 图片生成器

通过先理解你的代码库，然后使用 Playwright 和现有组件为每个路由生成上下文相关且与品牌一致的 Open Graph 图片。

理念：真实优于模板

生成 OG 图片前，请先了解：

• 该网站的品牌标识是什么（颜色、字体、Logo、设计语言）？
• 存在哪些路由/页面，它们的用途是什么？
• 哪些组件和资产可以复用以保证一致性？
• 不同的页面类型需要何种不同的视觉处理？

核心原则：

1. 先研究再生成：在创建任何内容之前，先了解代码库结构、路由和品牌
2. 真实优于模板：使用真实的品牌颜色、字体和组件，而不是通用的社交卡片模板
3. 上下文感知设计：落地页、文章、产品和文档需要不同的视觉方法
4. 智能自动化：自动检测路由并提取品牌信息，但允许用户自定义

工作流程

1. 发现与分析

路由发现：

• 分析项目结构以确定框架（Next.js、Astro、React 等）
• 根据框架约定自动检测路由：
  • Next.js: app/*/page.tsx 或 pages/*.tsx
  • Astro: src/pages/*.astro
  • React Router: 分析路由配置
• 从页面中提取路由元数据（标题、描述）
• 对页面类型进行分类（落地页、文章、产品、关于等）

品牌提取：

• 查找 Logo/图标文件（优先 SVG）
• 从 CSS/Tailwind 配置中提取调色板
• 从样式表或配置中识别主要字体
• 从现有组件中捕获设计模式

使用 scripts/analyze_codebase.py 自动化发现过程。

2. 设计策略

为每种页面类型确定合适的布局：

• 落地页：大胆、简约，强调价值主张
• 文章/博客文章：标题 + 摘要，如相关可包含日期/作者
• 产品页：产品名称、关键特性，如有素材可包含视觉元素
• 文档：主题 + 描述，感觉有条理/结构化
• 关于/公司：品牌优先，专业

布局原则：

• 充足的留白（避免杂乱）
• 分享时高对比度以确保可读性
• 品牌颜色作为点缀，而非主导
• 与网站匹配的排版层级
• 1200x630px（标准 OG 尺寸）

3. 生成图片

基于组件的生成：

• 尽可能复用 React 组件以保证一致性
• 使用 Playwright 将组件渲染为图片
• 应用品牌颜色、字体和素材
• 注入实际的页面元数据（非占位符）

技术方法：

1. 创建包含品牌样式的最小 HTML 模板
2. 为每个路由生成页面特定的标记
3. 使用 Playwright 截取 1200x630 的屏幕截图
4. 保存到 public/og/ 或合适的静态目录
5. 更新页面元数据以引用 OG 图片

使用 scripts/generate_og_images.py 进行自动化。

4. 验证与优化

• 验证 HTML 中的 OG 图片元数据
• 使用 OG 预览工具测试（opengraph.xyz, linkedin inspector）
• 确保文件大小合理（首选 <200KB）
• 检查不同缩放比例下的图片外观

框架特定指南

Next.js

App Router：

// app/page.tsx
export const metadata = {
  openGraph: {
    images: ['/og/home.png'],
  },
}

Pages Router：

// pages/index.tsx
<Head>
  <meta property="og:image" content="/og/home.png" />
</Head>

动态 OG 图片：考虑使用 Next.js OG 图片生成（@vercel/og）处理动态内容，但为保持品牌一致性，建议使用静态生成。

Astro

---
// src/pages/index.astro
const ogImage = '/og/home.png';
---
<head>
  <meta property="og:image" content={ogImage} />
</head>

React SPA

在 public/index.html 中添加 OG 标签，或使用 react-helmet：

<Helmet>
  <meta property="og:image" content="/og/home.png" />
</Helmet>

应避免的反模式

❌ 通用模板：不要使用忽略网站品牌的现成社交卡片模板

• 为什么不好：造成网站与社交分享体验之间的脱节
• 更好做法：提取实际品牌颜色、字体并一致地使用它们

❌ 一刀切：不要对所有页面类型使用相同的 OG 图片设计

• 为什么不好：错失了进行上下文相关展示的机会
• 更好做法：为落地页、文章、产品等采用不同布局

❌ 占位符内容：不要使用“Lorem ipsum”或通用文本

• 为什么不好：违背了预览图片的目的
• 更好做法：使用元数据中的实际页面标题和描述

❌ 过度拥挤：不要塞入过多文本、过多图片或复杂布局

• 为什么不好：在社交信息流中缩放后难以辨认
• 更好做法：聚焦于 1-2 个关键元素，并留有充足留白

❌ 忽略组件：不要从零创建 OG 图片，如果已有可用组件

• 为什么不好：破坏了与网站的视觉一致性
• 更好做法：复用组件中的按钮样式、卡片布局和排版

❌ 手动生成：不要逐个手动创建 OG 图片

• 为什么不好：不可扩展，难以保持一致性
• 更好做法：将生成过程脚本化，以处理所有路由

变化指南

重要：OG 图片应根据页面上下文而变化，而非趋同于单一设计。

可变化的维度：

• 布局：居中 vs 左对齐，单栏 vs 分栏，文字为主 vs 视觉为主
• 颜色重点：主品牌色 vs 中性色，渐变 vs 纯色
• 内容层级：大标题 vs 平衡的标题+描述
• 视觉元素：Logo 大小/位置、装饰元素、图标
• 排版：字号比例、字重分布、字体配对

避免趋同于：

• 所有内容使用相同的渐变背景
• 相同的“标题 + Logo”布局
• 单一字体大小比例
• 固定的 Logo 位置

上下文驱动变化：

• 技术文档 → 整洁、有条理、基于图标
• 营销落地页 → 大胆、多彩、注重价值
• 博客文章 → 读者友好，提供作者/日期上下文
• 产品页面 → 突出视觉产品

技术要求

依赖项（按需安装）：

npm install playwright sharp
# 或
pip install playwright Pillow

Playwright 设置：

playwright install chromium

文件结构：

project/
├── public/og/          # 生成的 OG 图片
│   ├── home.png
│   ├── about.png
│   └── ...
└── scripts/            # 生成脚本
    ├── analyze_codebase.py
    └── generate_og_images.py

请记住

OG 图片是品牌的延伸，而非通用社交卡片。

研究代码库以理解设计语言。提取品牌标识。使用实际的组件和内容。创建与网站浑然一体的、上下文相关的图片。

当有人分享你的页面时，OG 图片应该感觉像是一个自然的预览，而不是随便贴上去的模板。

你有能力创建精致且与品牌一致的 OG 图片，提升而非削弱网站的身份认同。