mcpField
O
og-image

og-image

github.com/html2png设计与 UI1036 次安装39 周前更新
代码仓库

关于 og-image

og-image 是通过向 html2png.dev 发送 HTML 来生成 Open Graph 和社交媒体预览图的技能，并提供平台尺寸参考与版式建议。

主要功能

  1. 01根据 HTML 生成图片
  2. 02使用 html2png.dev 转换端点
  3. 03参考社交平台标准图片尺寸
  4. 04应用字体与版式建议
  5. 05设置图片缩放和渲染延迟

适用场景

  1. 01制作 Facebook 或 LinkedIn 预览图
  2. 02准备 Twitter/X 社交卡片
  3. 03渲染品牌页面分享图

安装

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

$npx skills add https://github.com/html2png/skills --skill og-image

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

详细介绍

OG 图片生成器

通过 html2png.dev 生成 Open Graph 和社交媒体预览图片。

标准尺寸

平台尺寸宽高比
Facebook/LinkedIn1200×6301.91:1
Twitter/X1200×6751.78:1 (16:9)
Twitter Large1200×6002:1
正方形1200×12001:1

端点

POST https://html2png.dev/api/convert

示例

curl -X POST "https://html2png.dev/api/convert?width=1200&height=630&deviceScaleFactor=2" \
  -H "Content-Type: text/html" \
  -d '<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
</head>
<body class="flex items-center justify-center" style="width: 1200px; height: 630px; font-family: Inter, sans-serif; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);">
  <div class="text-center text-white px-16">
    <h1 class="text-7xl font-extrabold mb-6 leading-tight">How to Build APIs</h1>
    <p class="text-3xl opacity-90 mb-8">A complete guide to RESTful design</p>
    <div class="flex items-center justify-center gap-4">
      <div class="w-16 h-16 rounded-full bg-white/20"></div>
      <span class="text-xl">By John Doe · 10 min read</span>
    </div>
  </div>
</body>
</html>'

关键元素

排版：

  • 大号粗体标题（60-80px）
  • 易读的副标题（24-32px）
  • 与背景形成高对比度

布局：

  • 内容居中或左对齐
  • 留出充足的内边距（60-100px）
  • 层次分明

背景：

  • 渐变叠加
  • 微妙的图案
  • 品牌色

图片：

  • 作者头像（圆形，80-120px）
  • Logo（位于角落或居中）
  • 装饰元素（低调）

CDN 资源

字体：

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
  rel="stylesheet"
/>

图标：

<script src="https://unpkg.com/lucide@latest"></script>

提示

  • 始终使用 deviceScaleFactor=2，让文字更加清晰
  • 使用 delay=1000 等待字体加载
  • 文本尽量精简（标题最多 3-5 个词）
  • 在小尺寸下测试（图片在信息流中会被压缩）
  • 使用高对比度以确保易读

速率限制

每个 IP 每小时 50 个请求。

评论

支持 Markdown