소셜 공유 이미지(Open Graph) 제작을 위한 디자인 가이드 및 CLI 도구. 플랫폼별 규격, 텍스트 배치, 브랜딩 요소를 다루며, OG 메타 태그, Twitter 카드, LinkedIn 미리보기, 동적 생성까지 포함합니다.
이 스킬은 Open Graph(OG) 소셜 공유 이미지를 디자인하고 생성하는 데 필요한 모든 규격과 모범 사례를 제공합니다. 개발자는 inference.sh CLI(belt)를 통해 HTML-to-Image 방식으로 OG 이미지를 즉시 제작할 수 있으며, Facebook, Twitter/X, LinkedIn, Discord, Slack 등 주요 플랫폼의 권장 이미지 크기(1200×630px)와 포맷을 사전에 확인할 수 있습니다. 또한 타이틀/서브타이틀 최대 글자 수, 여백 안전 영역, 배경색 선택 등 구체적인 디자인 규칙을 제시하며, 블로그 포스트, 제품 출시, 튜토리얼 등 콘텐츠 유형별 템플릿을 함께 제공합니다. 결과물의 미리보기를 플랫폼별 디버거로 테스트하고, 메타 태그를 올바르게 설정하는 방법까지 설명하여 실무에서 바로 활용 가능한 종합적인 OG 이미지 설계 도구입니다.
npx skills add https://github.com/SeaXen/agentskills/tree/HEAD/library/101-skills-superpowers/skills/og-image-designInstalled? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
belt CLI 스킬 설치:
npx skills add belt-sh/cli
소셜 공유 이미지(Open Graph)를 inference.sh CLI를 통해 제작합니다.
inference.sh CLI(
belt) 필요. 설치 안내
belt login
# HTML-to-Image로 OG 이미지 생성
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.