mcpField
T
twitch-overlay-generation

twitch-overlay-generation

github.com/eachlabs创意与媒体44222 次安装今天更新
代码仓库

关于 twitch-overlay-generation

twitch-overlay-generation 是使用 each::sense 制作直播图形的技能,涵盖叠加层、屏幕、提醒、面板、表情和横幅,并提供尺寸、视觉风格及多素材会话的一致性指导。

主要功能

  1. 01制作摄像头边框和聊天叠加层
  2. 02生成开播前、暂离和结束画面
  3. 03制作关注、订阅和打赏提醒
  4. 04生成面板、表情和订阅徽章
  5. 05制作频道横幅和离线画面

适用场景

  1. 01制作风格统一的 Twitch 叠加素材套装
  2. 02为直播事件创建提醒图形
  3. 03生成多种尺寸的表情和徽章
  4. 04准备频道页面所需图形

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/eachlabs/skills --skill twitch-overlay-generation

安装后在 Claude Code 中输入/twitch-overlay-generation确认已加载。

附带文件references/SSE-EVENTS.md

详细介绍

Twitch Overlay 生成

使用 each::sense 生成专业的直播叠加层和图形。此技能可创建针对 Twitch、YouTube Gaming 和其他直播平台优化的图像。

功能

  • 摄像头边框:用于放置摄像头的自定义边框和画框
  • 即将开始画面:倒计时和直播前图形
  • 暂时离开画面:稍后回来时显示的过场图形
  • 直播结束画面:结尾和结束序列图形
  • 提醒图形:关注、订阅、捐赠和突袭提醒
  • 聊天框边框:经过样式设计的聊天叠加层容器
  • Twitch 面板:用于简介、日程、规则等内容的频道面板图形
  • 表情:供频道订阅者使用的自定义 Twitch 表情
  • 订阅者徽章:分级忠诚度订阅者徽章
  • 频道横幅:个人资料横幅和离线画面

快速入门

curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a cyberpunk themed webcam frame with neon purple and blue colors, futuristic tech elements, transparent center for the webcam"}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

直播叠加层格式与尺寸

资源类型尺寸格式用途
摄像头边框1920x1080PNG(透明)叠加在直播布局上
即将开始画面1920x1080PNG/MP4直播前展示
暂时离开画面1920x1080PNG/MP4休息画面
直播结束画面1920x1080PNG/MP4直播结束时展示
提醒图形400x400PNG(透明)屏幕通知
聊天框边框400x600PNG(透明)聊天叠加层容器
Twitch 面板320x160PNG频道信息面板
表情112x112、56x56、28x28PNG(透明)聊天表情
订阅者徽章72x72、36x36、18x18PNG(透明)订阅者徽章
频道横幅1200x480PNG个人资料横幅
离线画面1920x1080PNG直播离线时显示

用例示例

1. 带摄像头边框的直播叠加层
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 1920x1080 stream overlay with a webcam frame in the bottom right corner. Gaming theme with dark purple and gold accents. Include decorative borders, transparent center for webcam, and space for recent events on the left side. Modern esports aesthetic."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'
2. 即将开始画面
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 1920x1080 Starting Soon screen for a gaming stream. Neon synthwave theme with retro grid, glowing text area for STARTING SOON, animated feel with light rays and particles. Include space for social media handles at the bottom. Pink, purple, and cyan color scheme."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'
3. 暂时离开画面(稍后回来)
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 1920x1080 BRB screen for Twitch. Cozy lo-fi aesthetic with warm colors, include a cute animated coffee cup or snack visual. Text space for BE RIGHT BACK in stylized font. Soft lighting, relaxing vibes. Include subtle chat reminder at bottom."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'
4. 直播结束画面
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 1920x1080 stream ending screen. Thanks for watching theme with space for STREAM ENDED or THANKS FOR WATCHING text. Include areas for social media icons/handles, next stream schedule, and a follow reminder. Dark elegant theme with gold accents and particle effects."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'
5. 提醒图形(关注、订阅、捐赠)
# Follow Alert
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 400x400 transparent PNG follow alert graphic for Twitch. Cute anime-style character celebrating with confetti and sparkles. Include a heart icon and space for NEW FOLLOWER text. Vibrant colors, kawaii aesthetic."}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "alert-set-001",
    "mode": "max"
  }'

# Subscribe Alert (same session for consistency)
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a matching 400x400 subscribe alert. Same style as the follow alert but with a star icon and more elaborate celebration effects. Space for NEW SUB text."}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "alert-set-001",
    "mode": "max"
  }'

# Donation Alert
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a matching 400x400 donation/tip alert. Same style with coin or money effects, extra sparkle and celebration. Space for donation amount text."}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "alert-set-001",
    "mode": "max"
  }'
6. 聊天框边框
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 400x600 transparent chat box frame overlay. Cyberpunk tech theme with glowing border edges, circuit board patterns. Mostly transparent center where chat will display. Include a small CHAT header area at top. Neon green and black color scheme."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'
7. Twitch 面板图形
# About Panel
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 320x160 Twitch panel graphic for an ABOUT ME section. Clean modern design with the text ABOUT ME. Dark background with gradient accent, gaming controller or headset icon. Professional streamer aesthetic."}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "panel-set-001",
    "mode": "max"
  }'

# Schedule Panel
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a matching 320x160 SCHEDULE panel. Same style as previous with calendar icon. Text says SCHEDULE."}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "panel-set-001",
    "mode": "max"
  }'

# Rules Panel
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a matching 320x160 RULES panel. Same style with a book or list icon."}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "panel-set-001",
    "mode": "max"
  }'
8. Twitch 表情生成
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 112x112 Twitch emote. A cute cat face with heart eyes, chibi/kawaii style. Expressive, bold lines, vibrant colors that pop against dark backgrounds. Transparent background. The emote should be readable at small sizes."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

# Emote variations
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a set of 3 Twitch emotes at 112x112 each: 1) Pog/excited face, 2) Sad/cry face, 3) Laugh/LUL face. All featuring a cute frog character, consistent style across all three. Bold outlines, expressive features, transparent backgrounds."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'
9. 订阅者徽章
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a set of 6 Twitch subscriber badges at 72x72 pixels each, tiered progression for 1 month, 3 months, 6 months, 1 year, 2 years, and 3 years. Theme: crystal/gem progression from small rough gem to elaborate crown jewel. Each tier more detailed and prestigious. Transparent backgrounds, clear at small sizes."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

# Alternative badge style
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create 6 subscriber loyalty badges, 72x72 pixels. Military rank progression theme: bronze star (1mo), silver star (3mo), gold star (6mo), bronze medal (1yr), silver medal (2yr), gold medal with laurels (3yr). Clear iconography, readable at 18x18 size, transparent backgrounds."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'
10. 频道横幅
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 1200x480 Twitch channel banner. Epic gaming scene with dramatic lighting, mountain landscape with fantasy elements. Space on the right side for channel name text. Color scheme: deep blues and purples with orange accent lighting. Cinematic, high quality."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

# Offline Screen
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 1920x1080 Twitch offline screen. Cozy nighttime scene with a gaming setup, monitors off, ambient lighting from RGB peripherals. Text space for CURRENTLY OFFLINE and social media handles. Moody atmospheric lighting, lo-fi aesthetic."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

最佳实践

叠加层设计
  • 透明度:叠加层请使用背景透明的 PNG
  • 安全区域:重要元素应远离边缘(Twitch UI 会遮挡角落)
  • 可读性:确保文字在各种游戏背景上都清晰可读
  • 一致性:使用 session_id 保持整组叠加层的风格一致
  • 颜色对比度:使用醒目但不会分散游戏注意力的颜色
表情与徽章
  • 粗线条:使用粗轮廓线,确保小尺寸下清晰可见
  • 简洁设计:在 28x28 和 18x18 尺寸下,细节越少效果越好
  • 测试尺寸:请求所有尺寸变体,或按最小尺寸进行设计
  • 优先表现情绪:表情应能即时传达情绪
屏幕图形
  • 品牌一致性:所有画面都应保持颜色和风格一致
  • 文字层级:让主要文字(即将开始、暂时离开)最醒目
  • 融入社交媒体:留出空间展示社交媒体账号
  • 便于制作动画:设计时考虑后续可能添加动画

直播图形提示词技巧

创建直播叠加层时,请包含以下细节:

  1. 尺寸:指定精确的像素尺寸
  2. 主题:游戏类型、美学风格(赛博朋克、舒适、动漫等)
  3. 颜色:与品牌相符的主色和强调色
  4. 透明度:说明是否需要透明背景
  5. 文字空间:文字或 Logo 的放置位置
  6. 风格参考:电竞、舒适、复古、极简等
  7. 平台:Twitch、YouTube 或多平台
示例提示词结构
"Create a [dimensions] [asset type] for [platform].
[Theme/aesthetic] with [color scheme].
Include [specific elements] and space for [text/overlays].
[Transparency requirements]. [Style reference]."

模式选择

在生成内容前询问用户:

“您想要快速且经济,还是高品质?”

模式适用场景速度质量
max最终制作的覆盖层、表情包、品牌素材较慢最高
eco快速构思、草稿、风格探索较快良好

多轮覆盖层套装创建

使用 session_id 创建风格统一的覆盖层套装:

# Create base style
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a webcam frame with a Japanese cherry blossom theme, soft pink and white colors, elegant minimal design"}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "sakura-overlay-set"
  }'

# Create matching starting soon
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a matching Starting Soon screen in the same cherry blossom style"}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "sakura-overlay-set"
  }'

# Create matching BRB screen
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a matching BRB screen, same aesthetic with falling petals"}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "sakura-overlay-set"
  }'

# Create matching alerts
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create follow and subscribe alerts matching this cherry blossom theme"}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "sakura-overlay-set"
  }'

完整覆盖层套装示例

在一个会话中生成完整的直播套装:

# Initialize the package style
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "I am creating a complete Twitch overlay package. Theme: Cyberpunk Neon City. Colors: Hot pink, electric blue, purple. Style: Futuristic, glowing edges, holographic elements. Start with the main webcam overlay frame at 1920x1080."}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "cyberpunk-package",
    "mode": "max"
  }'

错误处理

错误原因解决方案
Failed to create prediction: HTTP 422余额不足在 eachlabs.ai 充值
内容政策违规内容被禁止调整提示词,使其符合平台指南
超时生成内容复杂将客户端超时设置为至少 10 分钟
风格不一致没有 session_id使用 session_id 生成多个素材

相关技能

  • each-sense - 核心 API 文档
  • emote-generation - 专门用于创建表情包
  • brand-kit-generation - 完整的品牌形象套装
  • animated-overlay-generation - 动画/视频覆盖层

评论

支持 Markdown