chongdashu/cc-skills

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检查器）
• 确保文件大小合理（首选<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

将OG标签添加到 public/index.html 或使用react-helmet：

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

应避免的反模式

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

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

❌ 一刀切：不要对每种页面类型使用相同的OG图像设计

• 为什么不好：错失根据上下文进行适当呈现的机会
• 更好的做法：为落地页、文章、产品等设置不同的布局

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

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

❌ 过度拥挤：不要塞入太多文字、太多图像或复杂布局

• 为什么不好：在社交信息流中缩小时难以辨认
• 更好的做法：专注于1-2个关键元素，并留有大量留白

❌ 忽略组件：不要从头创建OG图像，如果有现有组件的话

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

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

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

变化指南

重要提示：OG图像应根据页面上下文而变化，而不是收敛于单一设计。

可变化的维度：

• 布局：居中与左对齐、单列与分栏、文字为主与视觉为主
• 颜色重点：主要品牌色与中性色、渐变与纯色
• 内容层级：大标题与平衡的标题+描述
• 视觉元素：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图像，从而增强而非削弱网站的身份。