skills.rest
inference-sh
inference-shOFFICIAL
Explore all skills by this author →
WebsiteGitHub

og-image-design

Design Open Graph images with platform-specific dimensions and layout guidance.

688|95|Updated Jan 31, 2026
Search Tags:#graphic design#web design#og image#social sharing#twitter card#link preview
One-click install
npx skills add https://github.com/inference-sh/skills --skill og-image-design-inference-sh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: og-image-design
Source: https://github.com/inference-sh/skills/tree/main/guides/design/og-image-design
Command: npx skills add https://github.com/inference-sh/skills --skill og-image-design-inference-sh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps users create visually appealing and platform-optimized social sharing images (Open Graph images) for websites and content, ensuring maximum engagement and proper display across various social media platforms.

Core Features & Use Cases

  • Platform-Specific Design: Provides dimensions, aspect ratios, and file size recommendations for Facebook, Twitter/X, LinkedIn, and more.
  • Layout Guidance: Offers a "Golden Layout" and design rules for text, safe zones, and color choices.
  • Template Examples: Includes pre-formatted HTML examples for blog posts, product announcements, and tutorials, along with an AI image generation option.
  • Meta Tag Reference: Details essential OG and Twitter meta tags for proper implementation.
  • Testing Tools: Lists tools for debugging and previewing how shared links will appear.

Quick Start

Generate an OG image with the html-to-image tool using the provided HTML.

Frequently Asked Questions about og-image-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the recommended dimensions for an Open Graph image on Facebook and Twitter?▼

An Open Graph image optimized for Facebook and Twitter requires specific aspect ratios and file sizes for proper link preview display. This Skill provides exact dimensions, aspect ratios, and layout best practices for each platform to ensure correct rendering.

How do I generate a social sharing image from HTML for my blog post?▼

Generate a social sharing image from HTML using an html-to-image tool with pre-formatted template examples. This Skill includes ready-to-use HTML layouts for blog posts, product announcements, and tutorials to automate OG image creation.

What meta tags do I need for Twitter card and Open Graph image previews?▼

Twitter card and Open Graph image previews require specific meta tags in your webpage header for proper rendering. This Skill details essential OG and Twitter meta tags for implementation, ensuring your link previews display correctly across platforms.

Can I use AI image generation for creating social sharing images?▼

Yes, AI image generation can be used for creating social sharing images as an alternative to HTML templates. This Skill supports AI image generation for visual assets, alongside providing layout guidance and safe zones for text placement on the generated images.

How do I test and debug link previews before sharing on social media?▼

Testing and debugging link previews before sharing on social media requires dedicated validation tools to check your meta tags. This Skill lists specific testing tools for debugging and previewing exactly how shared links will appear across Facebook, Twitter/X, and LinkedIn.

Related Skills

Explore More Design & Creative Skills→
pulumipulumi
178

blog-meta-image

Generate 1200x628 PNG meta images from blog post titles and tags.

Official
Intermediate
naporin0624naporin0624
3

seo-lookup

Return official SEO guidance for meta tags, Open Graph, Twitter Cards, and structured data.

Community
Basic
RDCrystalLabRDCrystalLab

OpenRouter Image Gen

Generate AI images via OpenRouter APIs with configurable models and parameters.

Official
Intermediate
Zoomma1Zoomma1
3

claude-design-to-code

Convert Claude Design HTML mockups into Angular standalone components with templates and SCSS.

Community
Intermediate