mcpField
O
og-image-design

og-image-design

github.com/inference-sh设计与 UI7891.0k 次安装2 周前更新
代码仓库

关于 og-image-design

通过 inference.sh CLI 制作社交分享用 Open Graph 图片的设计技能，适用于博客、产品发布和教程页面。提供平台尺寸参考、版式规则与 HTML 转图像示例，也展示 AI 生成视觉的用法。

主要功能

  1. 01使用 HTML 转换为图像
  2. 02参考各平台图片规格
  3. 03规划文字、色彩与安全边距
  4. 04提供不同内容类型的版式示例
  5. 05展示 AI 生成视觉方案

适用场景

  1. 01为博客文章制作分享预览图
  2. 02设计产品发布或教程配图
  3. 03为网站页面建立一致的 OG 图片模板

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/inference-sh/skills --skill og-image-design

安装后在 Claude Code 中输入/og-image-design确认已加载。

详细介绍

安装 belt CLI 技能： npx skills add belt-sh/cli

OG 图片设计

通过 inference.sh CLI 创建社交分享图片（Open Graph）。

快速开始

需要 inference.sh CLI（belt）。安装说明

belt login

# Generate an OG image with HTML-to-image
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>"
}'

平台规格

平台尺寸宽高比文件大小格式
Facebook1200 x 630 px1.91:1< 8 MBJPG, PNG
Twitter/X (summary_large_image)1200 x 628 px1.91:1< 5 MBJPG, PNG, WEBP, GIF
Twitter/X (summary)800 x 418 px1.91:1< 5 MBJPG, PNG
LinkedIn1200 x 627 px1.91:1< 5 MBJPG, PNG
Discord1200 x 630 px1.91:1< 8 MBJPG, PNG
Slack1200 x 630 px1.91:1—JPG, PNG
iMessage1200 x 630 px1.91:1—JPG, PNG

通用的稳妥选择：1200 x 630 px、PNG 或 JPG，且小于 5 MB。

黄金布局

┌──────────────────────────────────────────────────┐
│                                                  │
│  ┌─────────────────────────────────┐  ┌───────┐  │
│  │                                 │  │       │  │
│  │  Title Text (max 60 chars)      │  │ Logo/ │  │
│  │  ───────────────────            │  │ Visual│  │
│  │  Subtitle (max 100 chars)       │  │       │  │
│  │                                 │  │       │  │
│  │  author / site name             │  └───────┘  │
│  └─────────────────────────────────┘             │
│                                                  │
└──────────────────────────────────────────────────┘
  1200 x 630 px

设计规则

文本
规则数值
标题字号48-64px
副标题字号20-28px
标题最大长度60 个字符（部分平台会截断）
副标题最大长度100 个字符
行高标题为 1.2-1.3
字重标题用粗体/特粗体，副标题用常规体
文本对比度至少符合 WCAG AA（4.5:1 比率）
安全区域
┌──────────────────────────────────────────────────┐
│  ┌──────────────────────────────────────────────┐│
│  │ 40px padding from all edges                  ││
│  │                                              ││
│  │  Content lives here                          ││
│  │                                              ││
│  │                                              ││
│  └──────────────────────────────────────────────┘│
└──────────────────────────────────────────────────┘
  • 距离所有边缘至少留出 40px 内边距
  • 部分平台会裁切边缘或添加圆角
  • 关键文本绝不要放在最外侧的 5% 区域内
颜色
背景类型使用场景
品牌纯色系列内容保持一致、企业用途
渐变现代、醒目
带叠加层的照片博客文章、编辑内容
深色背景对比度更高，在信息流中更醒目

深色背景在社交信息流中的效果优于浅色背景——大多数信息流背景是白色或浅色，因此深色 OG 图片更醒目。

按内容类型分类的模板

博客文章
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;padding:60px;font-family:system-ui,sans-serif;color:white\"><div style=\"flex:1\"><p style=\"font-size:18px;text-transform:uppercase;letter-spacing:2px;opacity:0.8;margin:0\">Engineering Blog</p><h1 style=\"font-size:52px;margin:16px 0 0;line-height:1.2;font-weight:800\">How We Reduced Build Times by 80%</h1><p style=\"font-size:22px;opacity:0.9;margin-top:16px\">A deep dive into our CI/CD optimization</p></div></div>"
}'
产品/发布公告
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1200px;height:630px;background:#0f0f0f;display:flex;align-items:center;justify-content:center;font-family:system-ui;color:white;text-align:center\"><div><p style=\"font-size:20px;color:#22c55e;text-transform:uppercase;letter-spacing:3px\">Now Available</p><h1 style=\"font-size:64px;margin:12px 0;font-weight:900\">DataFlow 2.0</h1><p style=\"font-size:24px;opacity:0.7\">Automated reports. Zero configuration.</p></div></div>"
}'
教程/操作指南
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1200px;height:630px;background:linear-gradient(to right,#1a1a2e,#16213e);display:flex;align-items:center;padding:60px;font-family:system-ui;color:white\"><div><div style=\"display:inline-block;background:#e74c3c;color:white;padding:8px 16px;border-radius:4px;font-size:16px;font-weight:bold;margin-bottom:16px\">TUTORIAL</div><h1 style=\"font-size:48px;margin:0;line-height:1.2\">Build a REST API in 10 Minutes with Node.js</h1><p style=\"font-size:20px;opacity:0.7;margin-top:16px\">Step-by-step guide with code examples</p></div></div>"
}'
AI 生成的视觉 OG 图片
# When you want a striking visual instead of text-based
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 Meta 标签参考


<meta property="og:title" content="Title here (60 chars max)" />
<meta property="og:description" content="Description (155 chars max)" />
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="article" />


<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Title here" />
<meta name="twitter:description" content="Description" />
<meta name="twitter:image" content="https://yoursite.com/og-image.png" />


<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Twitter 卡片类型
卡片类型图片尺寸使用场景
summary800 x 418（小缩略图）简短更新、链接
summary_large_image1200 x 628（全宽）博客文章、长文、公告

请始终使用 summary_large_image，除非有特定理由不这样做——大图能显著提高点击量。

一致性系统

对于包含许多页面的博客或网站，请创建模板系统：

元素保持一致变化内容
背景样式使用相同的渐变或品牌颜色—
字体系列使用相同字体—
布局保持相同位置—
Logo/品牌标识保持相同位置（角落）—
分类徽章保持相同样式按分类调整颜色
标题文本保持相同字号/字重内容变化

测试 OG 图片

工具URL
Facebook Debuggerdevelopers.facebook.com/tools/debug/
Twitter Card Validatorcards-dev.twitter.com/validator
LinkedIn Post Inspectorlinkedin.com/post-inspector/
OpenGraph.xyzopengraph.xyz
# Research OG debugging tools
belt app run tavily/search-assistant --input '{
  "query": "open graph image debugger preview tool test og:image"
}'

常见错误

错误问题修正方法
完全没有 OG 图片平台会显示随机页面元素或什么都不显示始终设置 og:image
文字太小在移动端预览中难以阅读在 1200px 宽度下，标题至少为 48px
背景太浅在白色或浅色信息流中不显眼使用深色或饱和背景
文字太多内容杂乱、令人应接不暇最多包含标题 + 副标题 + 品牌
图片太大（>5MB）有些平台无法加载尽量优化至 1MB 以下
没有安全边距某些平台会裁切文字距离所有边缘留出 40px 边距
各平台使用不同图片分享体验不一致所有平台统一使用 1200x630
使用 HTTP 图片 URL许多平台要求使用 HTTPS始终通过 HTTPS 提供 OG 图片
使用相对图片路径分享时无法解析使用完整的绝对 URL

相关技能

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

评论

支持 Markdown