og-image-design

用途

og-image-design 用于创建社交媒体分享图（Open Graph 图片），并覆盖配套的 OG meta 标签、Twitter Card、LinkedIn 预览等分享场景。当页面被分享到 Facebook、Twitter/X、LinkedIn、Discord、Slack、iMessage 等平台时，这些图片决定预览卡片的视觉呈现。

主要能力

1. 平台规格：列出各平台所需尺寸、宽高比、文件大小与格式，例如 Facebook 1200 x 630 px、<8 MB、JPG/PNG；Twitter/X summary_large_image 1200 x 628 px、<5 MB；LinkedIn 1200 x 627 px、<5 MB；Discord、Slack、iMessage 多为 1200 x 630 px。通用建议为 1200 x 630 px、PNG 或 JPG、5 MB 以内。
2. 版式规则：标题字号 48-64px、副标题 20-28px、标题最多 60 字符、副标题最多 100 字符、行高 1.2-1.3、对比度满足 WCAG AA（4.5:1），四周保留至少 40px 安全边距，关键文字不放入外侧 5%。
3. 配色指导：提供纯色品牌色、渐变、照片叠加、深色背景的适用场景，并指出深色背景在社交信息流中更醒目。
4. 内容类型模板：提供博客文章、产品/发布公告、教程/How-To 三类 HTML 模板，以及使用图像模型生成纯视觉 OG 图的方式。
5. 标签参考：给出 og:title、og:description、og:image、og:url、og:type 以及 twitter:card、twitter:title、twitter:description、twitter:image、og:image:width、og:image:height 的示例。
6. 一致性系统：建议背景风格、字体、布局、Logo 位置保持一致，仅按分类改变徽章颜色与标题内容。
7. 测试工具：列出 Facebook Debugger、Twitter Card Validator、LinkedIn Post Inspector、OpenGraph.xyz 等调试工具地址。
8. 常见错误清单：涵盖未设置 OG 图、文字过小、浅色背景、文字过多、图片过大、缺少安全边距、每平台单独图片、使用 HTTP、使用相对路径等问题及修复方式。

使用方式

需先安装 inference.sh CLI（belt）：

npx skills add belt-sh/cli

登录：

belt login

通过 HTML 转图片生成 OG 图：

belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;align-items:center;padding:60px;font-family:system-ui;color:white\"><div><h1 style=\"font-size:56px;margin:0;line-height:1.2\">How We Reduced Build Times by 80%</h1><p style=\"font-size:24px;opacity:0.8;margin-top:20px\">engineering.yourcompany.com</p></div></div>"
}'

生成纯视觉 OG 图：

belt app run falai/flux-dev-lora --input '{
  "prompt": "clean professional social sharing card, dark gradient background, abstract geometric shapes, modern tech aesthetic, minimal, no text, 1200x630 equivalent aspect ratio",
  "width": 1200,
  "height": 630
}'

相关技能安装：

npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@landing-page-design
npx skills add inference-sh/skills@prompt-engineering

查看所有应用：

belt app list

适用场景

适用于博客、产品发布、教程文章、网站页面等需要社交分享预览图的场景，尤其适合希望统一风格、批量生成或需要遵循各平台规格的开发者与设计者。

限制

使用依赖 inference.sh CLI（belt）环境，需先安装并登录；具体账号要求、调用额度与费用资料暂未提供。平台规格与推荐值来自资料，实际平台行为可能变化，应以各平台最新文档与调试工具验证为准。