用途
og-image-design 用于创建社交分享图片（Open Graph 图片），帮助页面在 Facebook、Twitter/X、LinkedIn、Discord、Slack、iMessage 等平台分享时呈现统一、可读的预览图。它同时覆盖 OG 元标签、Twitter 卡片、LinkedIn 预览等配置要点。
主要能力
- 提供各平台规格：Facebook 1200x630 px、Twitter/X summary_large_image 1200x628 px、Twitter/X summary 800x418 px、LinkedIn 1200x627 px、Discord 1200x630 px、Slack 1200x630 px、iMessage 1200x630 px，宽高比均为 1.91:1，并列出文件大小与格式限制。
- 给出通用安全尺寸：1200x630 px，PNG 或 JPG，小于 5 MB。
- 提供设计规则：标题字号 48-64px、副标题 20-28px、标题最多 60 字符、副标题最多 100 字符、标题行高 1.2-1.3、文字对比度至少满足 WCAG AA（4.5:1）。
- 提供安全区建议：四周至少 40px 内边距，关键文字不要放在外侧 5%。
- 提供配色建议：纯品牌色、渐变、照片叠加、深色背景，并指出深色背景在社交信息流中更突出。
- 提供按内容类型的模板：博客文章、产品/发布公告、教程/How-To，以及 AI 生成视觉 OG 图。
- 提供 OG 元标签与 Twitter 卡片类型参考，以及测试工具与常见错误清单。
使用方式
资料显示该技能通过 inference.sh CLI（belt）使用。安装命令为：npx skills add belt-sh/cli。使用前需登录：belt login。
生成 OG 图片示例（HTML 转图片）： 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>" }'
生成 AI 视觉 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 }'
研究 OG 调试工具示例： belt app run tavily/search-assistant --input '{ "query": "open graph image debugger preview tool test og:image" }'
适用场景
- 为博客文章、产品发布、教程等内容生成社交分享图。
- 为多页面站点建立一致的 OG 图片模板系统，保持背景、字体、布局、品牌位置一致，仅变化标题与分类徽章颜色。
- 配置 OG 元标签与 Twitter 卡片，确保分享预览正确。
- 使用测试工具检查 OG 图片效果，如 Facebook Debugger、Twitter Card Validator、LinkedIn Post Inspector、OpenGraph.xyz。
限制
资料未提供该技能的具体收费、价格、平台兼容性细节或效果保证。部分平台规格中的文件大小标注为“—”，表示资料未提供该数值。使用前需安装并登录 inference.sh CLI（belt）。生成图片依赖外部应用（infsh/html-to-image、falai/flux-dev-lora、tavily/search-assistant），其可用性、配额与限制资料未说明。