
浏览 完整叠加层视觉图库,或在下方探索自定义模板及导入功能。
为直播找到合适的模板
三个浏览器源使用统一外观。在图库中选择 使用配套组合,输入会话信息,然后复制 OBS 链接。动画为可选。








完整主题套装,包含文档、示例图片和指南
精致的全动画主题,支持自定义颜色及平滑过渡。非常适合游戏直播。
怀旧的 Windows 3.1 风格聊天叠加层,带有经典窗口设计及像素级细节。
整洁现代的设计,动画流畅,易于阅读。可自定义配色。
仅需会话 ID 即可使用的现成模板
整洁轻量、具备基本功能的模板。适合作为自定义的起点。
优雅设计,动画流畅并带有视觉效果。醒目而不分散注意力。
为游戏直播设计的醒目高对比主题,即使内容节奏很快也清晰可见。
时尚的液态玻璃风格聊天叠加层,动画流畅,表情渲染酷炫。
支持 YouTube CSS 样式的模板
在采用 YouTube 结构的叠加层页面上使用为 YouTube 设计的 CSS。兼容 Septapus 样式。
创建自定义叠加层的起点
用最少代码从头创建自己的叠加层。适合开发者及 LLM 辅助编程。
更完整的起始模板,附带注释和文档,帮助你构建自己的自定义叠加层。
第一次导入? 阅读完整聊天皮肤指南 ,了解组件文件查找、支持的格式、OBS 设置及故障排查。
同时适用于 SSN Windows 桌面应用和 Chrome 扩展,无需编辑代码。
在 SSN 应用或扩展中打开平台来源,然后发送测试消息。确认消息出现在 SSN 停靠面板后再继续。
使用组件设计者提供的 ZIP、文件夹或文件。有效导出通常包含 HTML、CSS、JavaScript、fields/data 及资源。截图或 StreamElements 叠加层 URL 不够。
从 SSN 弹出菜单打开导入器时,会自动填入会话 ID 和密码。如果直接打开,请从以下位置复制: 会话选项 ,在应用或扩展中查找。只需在导入器中输入会话 ID 一次,它会保存在下载的文件内。
如果导入的组件提供兼容设置,使用 消息历史 以关闭定时移除,或更改屏幕上保留的消息数量。这会更改组件设置,不会更改代码。
演示预览 通过示例消息检查设计。 实时预览 使用正在运行的 SSN 应用或扩展中的真实聊天检查会话。
点击 下载 OBS HTML。在 OBS 中添加浏览器源,启用 本地文件,并选择下载的 HTML 文件。 不要在 OBS 中添加会话 ID 或编辑 URL。 直播时保持 SSN 运行;导入器和 StreamElements 可以关闭。
检查导入器识别出的文件;如果选错 HTML、CSS 或 JavaScript,请使用 Advanced file selection。
确认聊天到达 SSN 停靠面板,且会话 ID 和可选密码完全一致。
使用下载的 HTML 文件,而非导入器页面、原始 ZIP 或 StreamElements URL,然后刷新 OBS 浏览器源。
按照这些简单步骤开始
浏览模板库,选择适合直播风格的模板。使用截图图库比较设计;大多数内置模板可直接通过 URL 使用,无需下载。
替换 YOURSESSIONID ,在模板 URL 中替换为实际的 Social Stream Ninja 会话 ID,可在 SSN 应用或扩展的 Session Options 下找到。如果会话使用密码,也请包含可选密码。
https://socialstream.ninja/themes/pretty.html?session=YOURSESSIONID
将修改后的 URL 作为浏览器源添加到直播软件中:
通过以下任一方式使用自定义 CSS 个性化叠加层:
&css=URL_TO_YOUR_CSS_FILE 到模板 URL&b64css=YOUR_BASE64_ENCODED_CSS从可用叠加层开始,再修改外观。
使用 OBS 浏览器源 自定义 CSS ,以调整颜色、间距和排版。保留原始 SSN URL 和连接。
有 StreamElements 聊天组件导出文件? 打开 StreamElements 转换器,预览后下载 OBS HTML。请使用原始 ZIP 或文件,而非截图或叠加层 URL。 查看下方设置.
对于基于触发器的行为,从以下内容开始: Event Flow 编辑器 和 警报效果规则 ,然后再编写新叠加层。
选择起点,复制提示词,并替换方括号中的设计细节。如果 AI 无法读取链接,请附上源文件。不要在对话中提供私密会话 ID 和密码。
正在转换更复杂的组件? 使用完整的 StreamElements / Streamlabs 转换提示词.
了解如何借助 AI 创建自定义聊天叠加层