Og Image Design

Open Graph and social sharing image design with platform specs, text placement, and branding. Covers OG meta tags, Twitter cards, LinkedIn previews, and dyna...

Security Scan

The skill is consistent with its stated purpose (creating OG/social images via the inference.sh CLI), but it instructs the agent/user to download and execute a remote install script and to send HTML/content to an external service — so verify the external service and be cautious about sensitive content before installing or using it.

Purpose & Capability

Name/description match the runtime instructions: the SKILL.md shows how to produce social/OG images by calling the infsh (inference.sh) HTML-to-image app. There are no unrelated env vars, binaries, or install requirements in the bundle.

Instruction Scope

The instructions explicitly tell the agent to download and run https://cli.inference.sh and to use `infsh app run ...` with inlined HTML. The guidance does not request reading local files or unrelated environment variables. However, the examples will transmit the provided HTML/content to inference.sh (a remote service) which has privacy implications; the SKILL.md does not detail what is sent, retained, or logged by that service.

Install Mechanism

There is no formal install spec in the skill bundle, but the SKILL.md advises piping a remote script into sh (curl | sh) that downloads a binary from dist.inference.sh. While the document claims checksum verification is available, executing a remote install script is higher risk than a vetted package manager; users should manually verify checksums and the publisher before running the installer.

Credentials

The skill declares no required env vars or credentials. In practice `infsh login` implies interactive authentication or tokens stored outside the skill, but the SKILL.md does not document required credentials or how they are stored. That omission is not necessarily malicious but users should expect to provide/authorize credentials for the remote service.

Persistence & Privilege

The skill does not request permanent presence (always:false), contains no code files, and does not modify other skills or system-wide settings. Autonomous invocation is allowed (default) but is appropriate for an instruction-only helper.

Assessment

This skill appears to do what it says: generate Open Graph/social images using the inference.sh CLI. Before installing or using it: 1) Treat `curl https://cli.inference.sh | sh` as potentially risky — prefer to download the installer and verify the SHA-256 checksum from the provided checksums.txt before running. 2) Expect that example HTML and image content will be sent to inference.sh; do not send sensitive data (secrets, private user data, proprietary HTML) unless you trust their privacy policies. 3) `infsh login` implies credentials or tokens — confirm how those are stored and revoke them if needed. 4) If you prefer to avoid remote services, consider local HTML-to-image tools or a vetted package manager installation. If you want a deeper assessment, provide the actual installer script (https://cli.inference.sh) and the dist.inference.sh checksums page so I can inspect what's being downloaded and how verification is performed.

Create social sharing images (Open Graph) via inference.sh CLI.

Quick Start

curl -fsSL https://cli.inference.sh | sh && infsh login

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

Install note: The install script only detects your OS/architecture, downloads the matching binary from dist.inference.sh, and verifies its SHA-256 checksum. No elevated permissions or background processes. Manual install & verification available.

Platform Specifications

Platform	Dimensions	Aspect Ratio	File Size	Format
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

Universal safe bet: 1200 x 630 px, PNG or JPG, under 5 MB.

The Golden Layout

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

Design Rules

Text

Rule	Value
Title font size	48-64px
Subtitle font size	20-28px
Max title length	60 characters (gets truncated on some platforms)
Max subtitle length	100 characters
Line height	1.2-1.3 for titles
Font weight	Bold/Black for title, Regular for subtitle
Text contrast	WCAG AA minimum (4.5:1 ratio)

Safe Zones

┌──────────────────────────────────────────────────┐
│  ┌──────────────────────────────────────────────┐│
│  │ 40px padding from all edges                  ││
│  │                                              ││
│  │  Content lives here                          ││
│  │                                              ││
│  │                                              ││
│  └──────────────────────────────────────────────┘│
└──────────────────────────────────────────────────┘

• 40px minimum padding from all edges
• Some platforms crop edges or add rounded corners
• Never put critical text in the outer 5%

Colors

Background Type	When to Use
Solid brand color	Consistent series, corporate
Gradient	Modern, eye-catching
Photo with overlay	Blog posts, editorial
Dark background	Better contrast, stands out in feeds

Dark backgrounds outperform light in social feeds — most feeds have white/light backgrounds, so dark OG images pop.

Templates by Content Type

Blog Post

infsh 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>"
}'

Product/Launch Announcement

infsh 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>"
}'

Tutorial/How-To

infsh 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-Generated Visual OG

# When you want a striking visual instead of text-based
infsh 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 Tags Reference

<!-- Essential (Facebook, LinkedIn, Discord, Slack) -->
<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" />

<!-- Twitter/X specific -->
<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" />

<!-- Image dimensions (optional but recommended) -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Twitter Card Types

Card Type	Image Size	Use When
summary	800 x 418 (small thumbnail)	Short updates, links
summary_large_image	1200 x 628 (full width)	Blog posts, articles, announcements

Always use summary_large_image unless you have a specific reason not to — the large image gets significantly more clicks.

Consistency System

For a blog or site with many pages, create a template system:

Element	Keep Consistent	Vary
Background style	Same gradient or brand colors	—
Font family	Same font	—
Layout	Same positioning	—
Logo/branding	Same placement (corner)	—
Category badge	Same style	Color per category
Title text	Same size/weight	Content changes

Testing OG Images

Tool	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
infsh app run tavily/search-assistant --input '{
  "query": "open graph image debugger preview tool test og:image"
}'

Common Mistakes

Mistake	Problem	Fix
No OG image at all	Platform shows random page element or nothing	Always set og:image
Text too small	Unreadable on mobile previews	Title minimum 48px at 1200px width
Light background	Gets lost in white/light feeds	Use dark or saturated backgrounds
Too much text	Cluttered, overwhelming	Max: title + subtitle + brand
Image too large (>5MB)	Some platforms won't load it	Optimize to under 1MB ideally
No safe zone padding	Text cropped on some platforms	40px padding from all edges
Different image per platform	Inconsistent sharing experience	Use 1200x630 for everything
HTTP image URL	Many platforms require HTTPS	Always serve OG images over HTTPS
Relative image path	Won't resolve when shared	Use full absolute URL

Related Skills

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

Browse all apps: infsh app list