og-image by stevysmith/og-image-skill
npx skills add https://github.com/stevysmith/og-image-skill --skill og-image此技能可为社交媒体分享创建专业的 Open Graph 图像。它会分析现有代码库以匹配项目的设计系统,生成专用的 OG 图像页面,对其进行截图,并配置所有必要的元标签。
探索项目以了解:
package.json 以识别 Next.js、Vite、Astro、Remix 等。
* 识别路由模式(基于文件、基于配置)
* 找到创建 /og-image 路由的位置tailwind.config.js/ts) 以获取调色板
* 检查全局样式中的 CSS 变量(:root 定义)
* 查找现有的颜色标记、字体族、间距比例
* 查找主题或设计标记文件/public、/assets、/src/assets 中查找徽标文件
* 检查 favicon、应用图标
* 查找包含品牌信息的现有英雄区域或着陆页广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
package.json在 /og-image(或框架对应的路径)创建一个专用路由:
页面要求:
[data-nextjs-dialog-overlay],
[data-nextjs-dialog],
nextjs-portal,
#__next-build-indicator {
display: none !important;
}
内容结构:
设计原则:
使用 Playwright 捕获 OG 图像:
http://localhost:3000/og-image 或类似地址)og-image.pngPlaywright 命令:
browser_navigate: http://localhost:{port}/og-image
browser_resize: width=1200, height=630
browser_take_screenshot: og-image.png (then copy to /public)
审核并更新项目的元标签配置。对于 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"),
仅当无法从代码库中确定以下信息时才询问用户:
Next.js App Router:
/app/og-image/page.tsx/app/layout.tsx 中更新元数据'use client' 指令Next.js Pages Router:
/pages/og-image.tsx_app.tsx 或使用 next-seoVite/React:
index.html 元标签或使用 react-helmetAstro:
/src/pages/og-image.astro完成前,请验证:
每周安装量
118
代码仓库
GitHub 星标数
59
首次出现
2026年1月27日
安全审计
已安装于
opencode92
gemini-cli90
codex84
claude-code82
cursor81
github-copilot75
This skill creates professional Open Graph images for social media sharing. It analyzes the existing codebase to match the project's design system, generates a dedicated OG image page, screenshots it, and configures all necessary meta tags.
Explore the project to understand:
Framework Detection
package.json for Next.js, Vite, Astro, Remix, etc./og-image routeDesign System Discovery
tailwind.config.js/ts) for color palette:root definitions)Branding Assets
/public, /assets, /src/assetsProduct Information
package.json, landing page, or meta tagsExisting Components
Create a dedicated route at /og-image (or equivalent for the framework):
Page Requirements:
Fixed dimensions: exactly 1200px wide × 630px tall
Self-contained styling (no external dependencies that might not render)
Hide any dev tool indicators with CSS:
[data-nextjs-dialog-overlay], [data-nextjs-dialog], nextjs-portal, #__next-build-indicator { display: none !important; }
Content Structure:
Design Principles:
Use Playwright to capture the OG image:
http://localhost:3000/og-image or similar)og-image.pngPlaywright Commands:
browser_navigate: http://localhost:{port}/og-image
browser_resize: width=1200, height=630
browser_take_screenshot: og-image.png (then copy to /public)
Audit and update the project's meta tag configuration. For Next.js App Router, update layout.tsx. For other frameworks, update the appropriate location.
Required Meta Tags:
// 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,
},
EnsuremetadataBase is set for relative URLs to resolve correctly:
metadataBase: new URL("https://yourdomain.com"),
Verify the image exists at the public path
Check meta tags are correctly rendered in the HTML
Provide cache-busting instructions:
Summary output:
Only ask the user if these cannot be determined from the codebase:
Domain/URL - If not found in existing config, ask: "What's your production domain? (e.g., https://example.com)"
Twitter/X handle - If adding twitter:creator, ask: "What's your Twitter/X handle for attribution? (optional)"
Tagline - If no clear tagline found, ask: "What's a short tagline for social previews? (1 sentence)"
Next.js App Router:
/app/og-image/page.tsx/app/layout.tsx'use client' directive for the OG pageNext.js Pages Router:
/pages/og-image.tsx_app.tsx or use next-seoVite/React:
index.html meta tags or use react-helmetAstro:
/src/pages/og-image.astroBefore completing, verify:
Weekly Installs
118
Repository
GitHub Stars
59
First Seen
Jan 27, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode92
gemini-cli90
codex84
claude-code82
cursor81
github-copilot75
GitHub Actions 官方文档查询助手 - 精准解答 CI/CD 工作流问题
40,500 周安装