安裝 belt CLI 技能：
npx skills add belt-sh/cli
OG 圖片設計
透過 inference.sh CLI 建立社群分享圖片（Open Graph）。
快速開始
需要 inference.sh CLI (
belt)。安裝說明
belt login
# 使用 HTML 轉圖片產生 OG 圖片
belt app run infsh/html-to-image --input '{
"html": "<div style=\\
設計 Open Graph 與社群分享圖片，涵蓋平台規格、文字佈局與品牌呈現。包含 OG 中繼標籤、Twitter 卡片、LinkedIn 預覽與動態生成。適用於：社群分享圖片、部落格縮圖、連結預覽、社群卡片。觸發詞：og image, open graph, social sharing image, twitter card, social card, link preview image, og meta, sharing preview, social thumbnail, meta image, og:image, twitter:image, linkedin preview
這個技能專門為開發者與 AI 代理提供設計和生成 Open Graph (OG) 分享圖片的完整指南與實作工具。它涵蓋了所有主流社群平台（如 Facebook、Twitter/X、LinkedIn、Discord、Slack 等）的圖片規格，包括尺寸、長寬比、檔案大小限制與建議格式，並提供一個通用安全的設計基準：1200 x 630 像素、PNG 或 JPG 格式、小於 5 MB。 技能的核心是提供一個「黃金佈局」與一系列設計規則，從文字大小、字型粗細、對比度到安全區域（頁面邊距）都有明確規範，確保圖片在不同平台上的可讀性與視覺效果。它還內建了多種內容類型的程式碼範本（如部落格文章、產品發表、教學指南），以及 AI 生成視覺圖片的指令，方便使用者透過 `inference.sh` CLI 工具一鍵生成。 此外，這個技能也系統性地整理了 OG 中繼標籤的 HTML 參考、Twitter 卡片類型比較、一致性的品牌系統建議，以及常見錯誤與除錯工具清單。使用者可以直接複製範例指令，並根據自身需求調整 HTML 樣式，快速產出高品質的社群分享圖片。
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
透過 inference.sh CLI 建立社群分享圖片（Open Graph）。
需要 inference.sh CLI (
belt)。安裝說明
belt login
# 使用 HTML 轉圖片產生 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.