用途：为项目生成专业的社交媒体分享预览图（Open Graph 图片），并配置相应的 meta 标签，使链接在社交平台分享时展示统一品牌视觉。
主要能力：先分析代码库，检测框架（Next.js、Vite、Astro、Remix 等）与路由方式，发现设计系统（Tailwind 配置、CSS 变量、颜色令牌、字体、间距）、品牌资源（logo、favicon、图标）与产品信息（名称、标语、现有 meta 配置），并识别可复用组件与整体视觉风格。随后创建专用 OG 图片路由页面，要求固定尺寸 1200×630 像素、样式自包含，并用 CSS 隐藏开发工具指示器（如 nextjs-portal、#__next-build-indicator 等）。页面内容通常包含 logo、产品名、标语、产品视觉呈现与底部域名，配色与排版沿用项目现有设计系统，并保证缩小到约 400px 宽时文字仍可读。
使用方式：用 Playwright 打开本地 OG 页面，将视口调整为 1200×630，等待动画与字体加载完成后截图，保存为 public 目录下的 og-image.png。随后更新 meta 标签配置：Next.js App Router 改 layout.tsx，Pages Router 改 _app.tsx 或使用 next-seo，Vite/React 改 index.html 或使用 react-helmet，Astro 改布局文件。需配置 openGraph（title、description、url、siteName、locale、type、images 含宽高与 alt）、twitter（card 为 summary_large_image 等）、theme-color、appleWebApp，并设置 metadataBase 以便相对 URL 正确解析。
适用场景：需要为网站或产品生成社交分享预览图并统一 meta 标签的前端项目。
限制：仅依据资料整理，未提供具体收费、价格或效果保证；若代码库中无法确定域名、Twitter/X 账号或标语，需向用户询问。完成后建议用 Facebook、Twitter/X、LinkedIn 的调试工具刷新缓存。该技能基于 Stevy Smith 的开源工作（https://github.com/stevysmith/og-image-skill），由 webconsulting.at 适配。