og-image-design

What This Skill Does

The og-image-design skill enables automated, programmatic creation of professional Open Graph and social media sharing images. By leveraging the inference.sh CLI and html-to-image capabilities, it allows developers and content creators to generate perfectly sized, branded link preview images directly within their workflow. This ensures that every time a link from your site is shared on Facebook, Twitter, LinkedIn, or Discord, it appears with a high-quality, relevant visual rather than a generic or broken placeholder.

Installation

To integrate this skill into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/okaris/og-image-design

Ensure your local environment is configured with the inference.sh CLI to enable the underlying rendering engine for image generation.

Use Cases

• Blog Automation: Automatically generate a unique thumbnail for every new post using the article's title and metadata.
• Dynamic Marketing Assets: Create personalized event invitations or campaign headers on the fly using social sharing data.
• Link Preview Optimization: Fix "empty image" issues on social media by generating custom cards for documentation, portfolios, and SaaS dashboards.
• Branding Consistency: Enforce strict visual standards across all shared content by using reusable HTML templates that maintain your specific typography, colors, and logo placement.

Example Prompts

1. "Generate a social sharing image for my blog post titled 'Building Micro-Services with Go' using a dark mode theme and my site logo."
2. "Create an OG image for my portfolio site. Dimensions should be 1200x630, include the text 'Software Engineer' in bold, and a dark blue gradient background."
3. "Design a LinkedIn preview image for a webinar announcement. Use a clean, professional layout with a subtitle mentioning the date and time."

Tips & Limitations

• The Golden Layout: Always adhere to the 1200x630px standard. It is the most robust dimension for cross-platform compatibility.
• Contrast Matters: Use high-contrast color pairings to meet WCAG AA standards, ensuring your text remains readable even on low-resolution mobile previews.
• Content Truncation: Keep titles under 60 characters and subtitles under 100 characters to prevent unwanted clipping by platforms like X or LinkedIn.
• Rendering: Since this uses HTML-to-image, ensure your CSS is inline for maximum compatibility across the rendering engine. Avoid complex external web fonts that may not load within the short image generation window.