Og image

html based image generation skills

Install

npx -y skills add html2png/skills --skill og-image

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Generate Open Graph (OG) images and social media preview cards for websites, blog posts, and products. Use when creating social share images, Twitter/X cards, LinkedIn post images, or any visual preview that appears when sharing links on social platforms. Produces properly sized images (1200x630, 1200x675, etc.) with crisp typography and professional layouts.

SKILL.md

2.7 KB, as published. Nobody here has run it

OG Image Generator

Generate Open Graph and social media preview images via html2png.dev.

Standard Sizes

Platform	Size	Aspect Ratio
Facebook/LinkedIn	1200×630	1.91:1
Twitter/X	1200×675	1.78:1 (16:9)
Twitter Large	1200×600	2:1
Square	1200×1200	1:1

Endpoint

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

Example

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>'

Key Elements

Typography:

Large, bold headline (60-80px)
Readable subheadline (24-32px)
High contrast against background

Layout:

Centered or left-aligned content
Generous padding (60-100px)
Clear visual hierarchy

Backgrounds:

Gradient overlays
Subtle patterns
Brand colors

Images:

Author avatars (circular, 80-120px)
Logos (top corner or centered)
Decorative elements (subtle)

CDN Resources

Fonts:

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

Icons:

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

Tips

Always use deviceScaleFactor=2 for crisp text
Use delay=1000 for font loading
Keep text minimal (3-5 words headline max)
Test at small sizes (images get compressed in feeds)
Use high contrast for readability

Rate Limits

50 requests/hour per IP.