SuperAPI AI 工具集

og-image

设计与创作

查看项目

更新于 10-16 01:17

技能介绍

用途:生成 Open Graph / Twitter Card 社交分享预览图(unfurler image),主尺寸 1200×630(OG 1.91:1),可选 1080×1080 方形与 2:1 Twitter Card summary_large_image。输出为 PNG 或 JPEG,小于 5MB,通过绝对 HTTPS URL 提供且无需认证头。

主要能力与架构:默认基于模板、不使用扩散模型。排版引擎为 Satori(把 JSX 或 HTML+CSS 转成带真实字体排版的 SVG)与 @resvg/resvg-js(将 SVG 确定性地栅格化为 PNG)。若需求写明“with illustration”,可选叠加 hero 层:先用扩散模型生成 1200×630 背景,再合成 Satori 渲染的文字层。在 Next.js/Vercel 环境中可参考 @vercel/og。提供模板:centered_hero、left_title、minimal、quote、product_card,模板以 JSX/TSX 字符串放在 packages/mcp-server/src/templates/og/*.tsx。

用法:输入 brief 与品牌包,选择模板后填充 title(必填)、subtitle、logo.svg、强调色与背景(纯色/渐变/图片),经 satori(jsx) 转 SVG,再由 resvg.render(svg) 输出 1200×630 PNG,最后校验。

文案与校验:标题≤8 词、64–96pt;副标题≤15 词、28–36pt;标题与背景对比度达 WCAG AA 最低 4.5:1;外沿 60px 内不放文字;包含 logo 时最小渲染 60×60px。输出目录含 og.png、og.jpg、可选 og-2x.png 及 meta.json。

限制:必须使用真实字体做确定性排版,不要用扩散模型采样 OG 卡片文字,以免标题乱码;尺寸需精确为 1200×630,文件小于 5MB。其余如具体安装命令、价格与性能数据暂未提供。