SuperAPI AI 工具集

og-image-creator

设计与创作

查看项目

更新于 10-15 17:34

技能介绍

用途:为网站各路由生成与品牌一致的 Open Graph 分享图,而非套用通用社交卡片模板。

主要能力:先分析项目结构判断框架(Next.js、Astro、React 等),按框架约定自动发现路由并提取标题、描述等元数据,对页面分类(落地页、文章、产品、文档、关于等);同时提取品牌元素,包括 logo/图标(优先 SVG)、CSS/Tailwind 配色、字体与组件设计模式。随后按页面类型设计不同布局,用 Playwright 以 1200x630 尺寸渲染截图,输出到 public/og/ 等静态目录,并更新页面元数据引用图片。

使用方式:依赖 Playwright 与 sharp(或 Pillow),安装命令为 npm install playwright sharp 或 pip install playwright Pillow,并执行 playwright install chromium。脚本位于 scripts/ 目录,包括 analyze_codebase.py 与 generate_og_images.py。Next.js 可在 metadata 中设置 openGraph.images,Pages Router 用 meta 标签,Astro 在 head 中引用,React SPA 可用 react-helmet。

适用场景:需要为落地页、博客、产品页、文档等批量生成品牌化分享图的站点。

限制与注意:应避免通用模板、全站同一设计、占位文本、内容过密、忽略现有组件和逐张手工生成;建议文件小于 200KB,并用预览工具验证。资料未提供具体收费、平台支持范围与效果数据。