og-image-design

用途

og-image-design 用于创建社交分享图片（Open Graph 图片），帮助页面在 Facebook、Twitter/X、LinkedIn、Discord、Slack、iMessage 等平台被分享时呈现统一、可读的预览图。它同时覆盖 OG meta 标签、Twitter Card 与 LinkedIn 预览的配置参考。

主要能力

平台规格参考：列出各平台所需的尺寸、宽高比、文件大小上限与支持格式。
设计规则：给出标题与副标题字号范围、最大字符数、行高、字重、对比度要求（WCAG AA 最低 4.5:1）。
安全区规则：建议四周至少 40px 内边距，关键文字不要放在外侧 5%。
配色建议：纯品牌色、渐变、照片叠加、深色背景等适用场景。
内容类型模板：博客文章、产品/发布公告、教程/How-To 三类 HTML 模板示例。
AI 生成视觉图：可调用 falai/flux-dev-lora 生成无文字的视觉 OG 图。
OG meta 标签与 Twitter Card 参考：包含 og:title、og:description、og:image、og:url、og:type、twitter:card 等标签写法。
一致性系统：为多页面站点提供模板化建议，保持背景、字体、布局、Logo 位置一致，仅变化标题与分类徽章颜色。
测试工具清单：Facebook Debugger、Twitter Card Validator、LinkedIn Post Inspector、OpenGraph.xyz。
常见错误清单：无 OG 图、文字过小、浅色背景、文字过多、图片过大、无安全边距、每平台不同图、HTTP 图片 URL、相对路径等问题及修复建议。

使用方式

该技能依赖 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>"
}'

使用 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
}'

浏览所有应用：

belt app list

适用场景

博客文章、产品发布公告、教程类内容的社交分享图制作。
需要为多页面站点建立统一 OG 图模板体系的场景。
需要参考各平台规格与 OG meta 标签配置的开发者或设计人员。

限制

该技能依赖 inference.sh CLI（belt）及相应应用（infsh/html-to-image、falai/flux-dev-lora）。
资料未提供具体收费、价格或额度信息。
资料未提供除已列平台外的其他平台规格。
资料未提供该技能自身的安装命令（仅提供 belt CLI 安装命令与相关技能安装命令）。

技能介绍

用途

主要能力

使用方式

适用场景

限制