og-image-skill
自动生成与项目设计风格匹配的社交媒体预览图并配置元标签。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：og-image-skill。 它的用途是：自动生成与项目设计风格匹配的社交媒体预览图并配置元标签。 完整的 Skill 内容见：https://321skill.com/skills/og-image-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'/og-image'，它会自动扫描你的 Next.js 项目，理解你的 Tailwind 配色方案和字体，生成一个具有你品牌风格的社交媒体预览图，并更新 `layout.tsx` 文件，添加所有必要的 `og:image` 和 `twitter:card` 等元标签。整个过程无需你手动设计图片或编写任何元标签代码。
介绍
OG Image Skill 解决了网站在社交媒体分享时预览图缺失、风格不统一或尺寸不匹配的问题。它通过分析项目代码库中的设计系统（如颜色、字体、组件），自动创建一个专用的 /og-image 页面，并使用 Playwright 截图生成符合标准的 1200x630 预览图像，同时自动配置所有必要的 Open Graph 和 Twitter 等元标签。
使用非常简单，在项目根目录下运行 /og-image 命令即可。技能会自动探索你的代码，生成匹配你项目美学的预览图，并保存到 public/ 文件夹，同时更新布局文件中的元标签配置。
这个技能非常适合前端开发、全栈开发和内容创作者，他们需要快速为网站或博客文章生成专业、统一的社交媒体分享卡片，而无需手动设计图片或编写复杂的元标签代码。
使用前请确保已安装 Playwright MCP Server 并启动本地开发服务器。生成后，建议使用各社交平台的调试工具刷新缓存，以确保新图片生效。
核心特点
与同类工具相比，它能深度分析项目现有代码库的设计系统（如 Tailwind 配置、CSS 变量、组件库），生成与项目视觉风格完全一致的预览图，而非使用通用模板。同时，它一站式完成从页面创建、截图到元标签配置的全流程，无需手动整合多个工具。
注意事项
不适合没有运行本地开发服务器的静态项目，或设计系统过于复杂导致技能无法准确解析的项目。
常见问题
生成的图片是空白的怎么办？
请确保在运行技能前，你的本地开发服务器（如 `npm run dev`）已经成功启动。
如何让社交媒体平台显示新生成的图片？
生成后，需要使用 Facebook、Twitter/X 等平台的官方调试工具提交 URL 以刷新其缓存。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/og-image-skill/raw/index.md 读取 og-image-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/og-image-skill/raw/index.md（查看排版版本）