A developer-focused skill for programmatically generating high-quality Open Graph images and social sharing cards via HTML-to-image and AI tools.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install og-image-design
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install og-image-design using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is OG Image Design?
The OG Image Design skill allows developers to automate the creation of social sharing images, also known as Open Graph (OG) cards. By leveraging the inference.sh CLI and HTML-to-image rendering, this tool ensures your content looks professional across Facebook, X (Twitter), LinkedIn, and Discord. It is an essential part of the Openclaw Skills ecosystem for teams looking to maintain brand consistency without manual design work.
This skill provides a programmatic bridge between raw data and visual assets. Whether you need to generate 1,000 unique blog thumbnails or a single high-impact launch graphic, this skill handles the rendering, dimensions, and safe-zone constraints automatically.
OG Image Design Use Cases
- Creating dynamic social sharing images for blog posts and technical articles.
- Automating product launch announcements with consistent brand colors and logos.
- Generating AI-powered abstract backgrounds for tutorial previews.
- Ensuring all website links have optimized 1200x630 previews for maximum click-through rates.
How OG Image Design Works
- Install the inference.sh CLI and authenticate to access the underlying rendering engines used by Openclaw Skills.
- Pass an HTML template or an AI prompt to the generator tool.
- The system renders the input into a high-resolution image optimized for social platforms.
- Integrate the output image into your website's meta tags using the provided technical specifications.
OG Image Design Setup
To start using this skill within the Openclaw Skills framework, install the CLI and login:
curl -fsSL https://cli.inference.sh | sh && infsh login
You can then run a basic HTML-to-image generation command:
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></div></div>"}'
OG Image Design Data Schema & Taxonomy
The skill follows strict platform dimensions to ensure compatibility across the web:
| Attribute | Specification |
|---|---|
| Dimensions | 1200 x 630 px |
| Aspect Ratio | 1.91:1 |
| File Format | PNG or JPG (under 5MB) |
| Safe Zone | 40px padding from all edges |
| Font Scale | Title (48-64px), Subtitle (20-28px) |
OG Image Design Advanced Features
- Multi-platform optimization: Automatically handles specs for X (summary_large_image), Facebook, and LinkedIn.
- AI-Visual Integration: Support for generating background assets using models like Flux via the Openclaw Skills interface.
- Component-based Design: Reusable HTML/CSS templates for high-scale automation.
- Integrated Debugging: Direct links and research tools for testing OG meta tags on live URLs.
SKILL.md
Loading
Related Openclaw Skills
Newsletter Curation
A comprehensive framework for sourcing, structuring, and growing high-quality newsletters using AI-driven automation and editorial best practices.
Nano Banana 2 - Gemini 3.1 Flash Image Preview
A high-performance image generation and editing tool leveraging Google Gemini 3.1 Flash Image Preview through a streamlined CLI interface.
Logo Design Guide
A comprehensive framework for generating professional, scalable logo concepts and brand marks using advanced AI image models.
LLM Models via OpenRouter
A powerful CLI-driven skill providing unified access to over 100 leading large language models through OpenRouter integration.
Pitch Deck Visuals
A programmatic framework and toolset for generating investor-ready pitch deck visuals and data visualizations via CLI.
Press Release Writing
A professional framework for drafting AP-style press releases with automated research and inverted pyramid structuring.
METADATA
Featured*
