安装 belt CLI 技能:
npx skills add belt-sh/cli
OG 图片设计
通过 inference.sh CLI 创建社交分享图片(Open Graph)。
快速开始
需要 inference.sh CLI(
belt)。安装说明
belt login
# 使用 HTML-to-image 生成 OG 图片
belt app run infsh/html-to-image --input '{
"html": "<div style=\\
Open Graph(OG)和社交分享图片设计,涵盖平台规格、文字布局和品牌标识。适用于社交分享图片、博客缩略图、链接预览和社交卡片等场景。
该技能专注于为Open Graph(OG)和社交媒体平台设计和生成高质量的分享图片。它提供了详尽的平台规格参考,包括Facebook、Twitter/X、LinkedIn、Discord等主流平台的推荐尺寸、宽高比、文件大小和格式要求。技能文档内嵌了多个可快速使用的HTML-to-Image CLI命令模板,涵盖博客文章、产品发布、教程等常见内容类型,用户只需替换文字即可生成符合平台要求的OG图片。此外,技能还提供了设计规则(如文字大小、安全边距、色彩选择)、OG元标签参考、Twitter卡片类型说明以及一致性系统建议,帮助开发者在多页面项目中保持品牌视觉统一。最后,技能列出了测试工具和常见错误清单,确保生成的图片在各平台上正确显示。该技能基于inference.sh CLI(belt)执行,并可与AI图像生成、页面设计等相关技能联动。
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-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.