Open Graph und Social-Sharing-Bilddesign mit Plattformspezifikationen, Textplatzierung und Branding. Deckt OG-Meta-Tags, Twitter Cards, LinkedIn-Vorschaubilder und dynamische Generierung ab.
Diese Fähigkeit (SeaXen/og-image-design) ist ein Spezialwerkzeug zur Erstellung und Optimierung von Open-Graph-Bildern (OG) und Social-Sharing-Grafiken. Sie richtet sich an Entwickler:innen und Content-Ersteller:innen, die mit der `belt` CLI von inference.sh arbeiten. Die Skill bietet eine umfassende Anleitung zur Gestaltung von OG-Bildern für verschiedene Plattformen wie Facebook, Twitter/X, LinkedIn, Discord, Slack und iMessage, inklusive genauer Dimensions- und Formatvorgaben (z.B. universell: 1200x630 px, PNG/JPG, unter 5 MB). Sie enthält zudem Designregeln für Text (Schriftgröße, Längenlimits, Kontrast), sichere Zonen (40px Abstand), Farbpaletten (Dark Backgrounds werden empfohlen) und Vorlagen für verschiedene Inhaltstypen (Blog-Posts, Produktveröffentlichungen, Tutorials). Darüber hinaus werden OG-Meta-Tags referenziert, Tools zum Testen der Vorschau aufgelistet und häufige Fehler (z.B. fehlende OG-Bilder, zu kleine Schrift, zu große Dateien) aufgezeigt. Die Skill nutzt die `belt` CLI und Apps wie `infsh/html-to-image` oder `falai/flux-dev-lora` zur Bildgenerierung und bietet auch eine Vorlage zur Konsistenzwahrung über mehrere Seiten hinweg.
npx skills add https://github.com/SeaXen/agentskills/tree/HEAD/library/101-skills-superpowers/skills/og-image-designInstalled? Explore more Bild skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
Installieren der belt CLI Skill:
npx skills add belt-sh/cli
Erstellen Sie Social-Sharing-Bilder (Open Graph) über die inference.sh CLI.
Erfordert die inference.sh CLI (
belt). Installationsanleitung
belt login
# Erzeugen Sie ein OG-Bild mit HTML-to-Image
belt app run infsh/html-to-image --input '{
"html": "<div style=\\
This repo contains 1 individual skill — each has its own dedicated page.
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.