og-image-design

Q: How do I install og-image-design?

Run npx skills add https://github.com/magentosh/superpowers --skill og-image-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/og-image-design/ (personal) or .claude/skills/og-image-design/ (project).

by magentoshMedia & Creative

Open Graph and social sharing image design with platform specs, text placement, and branding. Covers OG meta tags, Twitter cards, LinkedIn previews, and dynamic generation. Use for: social sharing images, blog thumbnails, link previews, social cards. Triggers: og image, open graph, social sharing image, twitter card, social card, link preview image, og meta, sharing preview, social thumbnail, meta image, og:image, twitter:image, linkedin preview

Installs: 42
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/magentosh/superpowers --skill og-image-design

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads og-image-design automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Install the belt CLI skill: npx skills add belt-sh/cli

OG Image Design

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

Quick Start

Requires inference.sh CLI (belt). Install instructions

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

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

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

Product/Launch Announcement

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

Tutorial/How-To

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-Generated Visual 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 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
belt 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: belt app list

FAQ

What does the og-image-design skill do?

How do I install og-image-design?

Run npx skills add https://github.com/magentosh/superpowers --skill og-image-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/og-image-design/ (personal) or .claude/skills/og-image-design/ (project).

Which AI agents can use og-image-design?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is og-image-design safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains og-image-design?

It is published by magentosh in magentosh/superpowers. It has 42 recorded installs.

More from magentosh/superpowers

View all →

ai-image-generation

magentosh/superpowers

Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image

Media & Creative772.8K installs

ai-video-generation

magentosh/superpowers

Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse

Media & Creative772.4K installs

ai-avatar-video

magentosh/superpowers

Create AI avatar and talking head videos via inference.sh CLI. Recommended: P-Video-Avatar (fastest, cheapest, built-in TTS). Also: OmniHuman, Fabric, PixVerse. Audio: Inworld TTS-2 (100+ languages, emotion steering for characters), ElevenLabs, Kokoro. Capabilities: audio-driven avatars, text-to-avatar, lipsync videos, talking head generation, virtual presenters, UGC content. Use for: AI presenters, explainer videos, virtual influencers, dubbing, marketing videos, UGC ads, gaming avatars, NPC dialogue. Triggers: ai avatar, talking head, lipsync, avatar video, virtual presenter, ai spokesperson, audio driven video, heygen alternative, synthesia alternative, talking avatar, lip sync, video avatar, ai presenter, digital human, ugc, ugc video, ugc ad, avatar ugc

Media & Creative771.8K installs

twitter-automation

magentosh/superpowers

Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet

Marketing & SEO771.7K installs

agent-browser

magentosh/superpowers

Browser automation for AI agents via inference.sh. Navigate web pages, interact with elements using @e refs, take screenshots, record video. Capabilities: web scraping, form filling, clicking, typing, drag-drop, file upload, JavaScript execution. Use for: web automation, data extraction, testing, agent browsing, research. Triggers: browser, web automation, scrape, navigate, click, fill form, screenshot, browse web, playwright, headless browser, web agent, surf internet, record video

Productivity & Automation144.9K installs

web-search

magentosh/superpowers

Web search and content extraction with Tavily and Exa via inference.sh CLI. Apps: Tavily Search, Tavily Extract, Exa Search, Exa Answer, Exa Extract. Capabilities: AI-powered search, content extraction, direct answers, research. Use for: research, RAG pipelines, fact-checking, content aggregation, agents. Triggers: web search, tavily, exa, search api, content extraction, research, internet search, ai search, search assistant, web scraping, rag, perplexity alternative

Productivity & Automation96.3K installs

Popular media & creative skills

View category →

hyperframes

heygen-com/hyperframes

Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.

Media & Creative1.2M installs

media-use

heygen-com/hyperframes

Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.

Media & Creative1.1M installs

hyperframes-registry

heygen-com/hyperframes

About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.

Media & Creative1M installs

hyperframes-creative

heygen-com/hyperframes

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.

Media & Creative916.5K installs

ai-video-generation

101-skills/superpowers

Media & Creative881.5K installs

ai-image-generation

101-skills/superpowers

Media & Creative880.3K installs

og-image-design

Install

Install

Describe the task

Review the result

SKILL.md

OG Image Design

Quick Start

Platform Specifications

The Golden Layout

Design Rules

Text

Safe Zones

Colors

Templates by Content Type

Blog Post

Product/Launch Announcement

Tutorial/How-To

AI-Generated Visual OG

OG Meta Tags Reference

Twitter Card Types

Consistency System

Testing OG Images

Common Mistakes

Related Skills

FAQ

More from magentosh/superpowers

Popular media & creative skills