# Send Og Image Design to your agent
Use the source page and any available docs to guide the install because the item is currently unstable or timing out.
## Fast path
- Open the source page via Review source status.
- If you can obtain the package, extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the source page and extracted files.
## Suggested prompts
### New install

```text
I tried to install a skill package from Yavira, but the item is currently unstable or timing out. Inspect the source page and any extracted docs, then tell me what you can confirm and any manual steps still required.
```
### Upgrade existing

```text
I tried to upgrade a skill package from Yavira, but the item is currently unstable or timing out. Compare the source page and any extracted docs with my current installation, then summarize what changed and what manual follow-up I still need.
```
## Machine-readable fields
```json
{
  "schemaVersion": "1.0",
  "item": {
    "slug": "og-image-design",
    "name": "Og Image Design",
    "source": "tencent",
    "type": "skill",
    "category": "内容创作",
    "sourceUrl": "https://clawhub.ai/okaris/og-image-design",
    "canonicalUrl": "https://clawhub.ai/okaris/og-image-design",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadUrl": "/downloads/og-image-design",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=og-image-design",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "SKILL.md"
    ],
    "downloadMode": "manual_only",
    "sourceHealth": {
      "source": "tencent",
      "slug": "og-image-design",
      "status": "unstable",
      "reason": "timeout",
      "recommendedAction": "retry_later",
      "checkedAt": "2026-04-30T08:03:17.544Z",
      "expiresAt": "2026-04-30T20:03:17.544Z",
      "httpStatus": null,
      "finalUrl": null,
      "contentType": null,
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=og-image-design",
        "error": "Timed out after 5000ms",
        "slug": "og-image-design"
      },
      "scope": "item",
      "summary": "Item is unstable.",
      "detail": "This item is timing out or returning errors right now. Review the source page and try again later.",
      "primaryActionLabel": "Review source status",
      "primaryActionHref": "https://clawhub.ai/okaris/og-image-design"
    },
    "validation": {
      "installChecklist": [
        "Wait for the source to recover or retry later.",
        "Review SKILL.md only after the download returns a real package.",
        "Treat this source as transient until the upstream errors clear."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    }
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/og-image-design",
    "downloadUrl": "https://openagent3.xyz/downloads/og-image-design",
    "agentUrl": "https://openagent3.xyz/skills/og-image-design/agent",
    "manifestUrl": "https://openagent3.xyz/skills/og-image-design/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/og-image-design/agent.md"
  }
}
```
## Documentation

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

<!-- 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 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
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: okaris
- Version: 0.1.5
## Source health
- Status: unstable
- Item is unstable.
- This item is timing out or returning errors right now. Review the source page and try again later.
- Health scope: item
- Reason: timeout
- Checked at: 2026-04-30T08:03:17.544Z
- Expires at: 2026-04-30T20:03:17.544Z
- Recommended action: Review source status
## Links
- [Detail page](https://openagent3.xyz/skills/og-image-design)
- [Send to Agent page](https://openagent3.xyz/skills/og-image-design/agent)
- [JSON manifest](https://openagent3.xyz/skills/og-image-design/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/og-image-design/agent.md)
- [Download page](https://openagent3.xyz/downloads/og-image-design)