og-image-design

Name: og-image-design
Author: magentosh

github.com/magentosh设计与 UI443 次安装12 周前更新

代码仓库

关于 og-image-design

这是一项通过 inference.sh 创建 Open Graph 社交分享图片的 belt CLI 技能，为内容创作者和网站团队提供平台尺寸、版式及生成流程指南。

主要功能

01使用 HTML-to-image 生成图片
02参照平台专属图片尺寸
03遵循文字、对比度与安全区规则
04按内容类型制作图片模板
05统一多页面图片风格

适用场景

01制作博客文章分享卡片
02设计产品发布图片
03准备教程预览图

安装

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

$npx skills add https://github.com/magentosh/superpowers --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>"
}'

平台规格

平台	尺寸	宽高比	文件大小	格式
Facebook	1200 x 630 px	1.91:1	< 8 MB	JPG, PNG
Twitter/X (summary_large_image)	1200 x 628 px	1.91:1	< 5 MB	JPG, PNG, WEBP, GIF
Twitter/X (summary)	800 x 418 px	1.91:1	< 5 MB	JPG, PNG
LinkedIn	1200 x 627 px	1.91:1	< 5 MB	JPG, PNG
Discord	1200 x 630 px	1.91:1	< 8 MB	JPG, PNG
Slack	1200 x 630 px	1.91:1	—	JPG, PNG
iMessage	1200 x 630 px	1.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 卡片类型

卡片类型	图片尺寸	使用场景
`summary`	800 x 418（小缩略图）	简短更新、链接
`summary_large_image`	1200 x 628（全宽）	博客文章、长文、公告

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

一致性系统

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

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

测试 OG 图片

工具	URL
Facebook Debugger	developers.facebook.com/tools/debug/
Twitter Card Validator	cards-dev.twitter.com/validator
LinkedIn Post Inspector	linkedin.com/post-inspector/
OpenGraph.xyz	opengraph.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