Tencent SkillHub · Content Creation

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

skill openclawclawhub Free

0 Downloads

0 Stars

0 Installs

0 Score

High Signal

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

⬇ 0 downloads ★ 0 stars Unverified but indexed

Install for OpenClaw

Quick setup

Download the package from Yavira.
Extract the archive and review SKILL.md first.
Import or place the package into your OpenClaw setup.

Requirements

Target platform: OpenClaw
Install method: Manual import
Extraction: Extract archive
Prerequisites: OpenClaw
Primary doc: SKILL.md

Package facts

Download mode: Yavira redirect
Package format: ZIP package
Source platform: Tencent SkillHub
What's included: SKILL.md

Validation

Use the Yavira download entry.
Review SKILL.md after the package is downloaded.
Confirm the extracted package contains the expected setup assets.

Install with your agent

Agent handoff

Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.

Download the package from Yavira.
Extract it into a folder your agent can access.
Paste one of the prompts below and point your agent at the extracted folder.

New install

I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.

Upgrade existing

I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.

Open Send to Agent page Open JSON manifest Open Markdown brief

Trust & source

Release facts

Source: Tencent SkillHub
Verification: Indexed source record
Version: 0.1.5

Provenance

Publisher: okaris
Source page: View original listing
Canonical URL: Open canonical page

Documentation

ClawHub primary doc Primary doc: SKILL.md 17 sections Open source page

OG Image Design

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

PlatformDimensionsAspect RatioFile SizeFormatFacebook1200 x 630 px1.91:1< 8 MBJPG, PNGTwitter/X (summary_large_image)1200 x 628 px1.91:1< 5 MBJPG, PNG, WEBP, GIFTwitter/X (summary)800 x 418 px1.91:1< 5 MBJPG, PNGLinkedIn1200 x 627 px1.91:1< 5 MBJPG, PNGDiscord1200 x 630 px1.91:1< 8 MBJPG, PNGSlack1200 x 630 px1.91:1—JPG, PNGiMessage1200 x 630 px1.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

Text

RuleValueTitle font size48-64pxSubtitle font size20-28pxMax title length60 characters (gets truncated on some platforms)Max subtitle length100 charactersLine height1.2-1.3 for titlesFont weightBold/Black for title, Regular for subtitleText contrastWCAG 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 TypeWhen to UseSolid brand colorConsistent series, corporateGradientModern, eye-catchingPhoto with overlayBlog posts, editorialDark backgroundBetter contrast, stands out in feeds Dark backgrounds outperform light in social feeds — most feeds have white/light backgrounds, so dark OG images pop.

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

<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" />  <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" />  <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />

Twitter Card Types

Card TypeImage SizeUse Whensummary800 x 418 (small thumbnail)Short updates, linkssummary_large_image1200 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: ElementKeep ConsistentVaryBackground styleSame gradient or brand colors—Font familySame font—LayoutSame positioning—Logo/brandingSame placement (corner)—Category badgeSame styleColor per categoryTitle textSame size/weightContent changes

Testing OG Images

ToolURLFacebook Debuggerdevelopers.facebook.com/tools/debug/Twitter Card Validatorcards-dev.twitter.com/validatorLinkedIn Post Inspectorlinkedin.com/post-inspector/OpenGraph.xyzopengraph.xyz # Research OG debugging tools infsh app run tavily/search-assistant --input '{ "query": "open graph image debugger preview tool test og:image" }'

Common Mistakes

MistakeProblemFixNo OG image at allPlatform shows random page element or nothingAlways set og:imageText too smallUnreadable on mobile previewsTitle minimum 48px at 1200px widthLight backgroundGets lost in white/light feedsUse dark or saturated backgroundsToo much textCluttered, overwhelmingMax: title + subtitle + brandImage too large (>5MB)Some platforms won't load itOptimize to under 1MB ideallyNo safe zone paddingText cropped on some platforms40px padding from all edgesDifferent image per platformInconsistent sharing experienceUse 1200x630 for everythingHTTP image URLMany platforms require HTTPSAlways serve OG images over HTTPSRelative image pathWon't resolve when sharedUse 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

Category context

Writing, remixing, publishing, visual generation, and marketing content production.

Source: Tencent SkillHub

Largest current source with strong distribution and engagement signals.

Package contents

Included in package

1 Docs

SKILL.md Primary doc