範本庫

瀏覽 完整疊加畫面視覺圖庫,或在下方探索自訂範本及匯入功能。

為直播選擇外觀

預覽聊天、精選訊息及警示疊加畫面,然後將喜歡的樣式加入 OBS 或 Streamlabs。

🧭 選擇疊加畫面類型

💬 整合聊天

來自已連接平台的持續訊息串流。從聊天範本開始,或使用 停駐面板.

⭐ 精選訊息

在停駐面板中選取的一則訊息。為訪談、問答或致意選擇精選訊息設計。

🎉 事件警示

慶祝追蹤、會員及贊助。在 SSN 警示設定中設定動畫和音訊。 警示指南

範本庫

為直播找到合適的範本

🎨 配套主題套裝

三個瀏覽器來源使用統一外觀。在圖庫中選擇 使用配套組合,輸入工作階段資訊,然後複製 OBS 連結。動畫為選用。

睏倦的三花貓、草莓牛奶與柔粉文具

🐱 草莓貓

睏倦的三花貓、草莓牛奶和粉色文具。包含配套的聊天、精選訊息和警示樣式。

預覽並使用套裝
天藍色明信片上的快樂柯基

🐶 溫馨夥伴

天藍色明信片上的快樂柯基。包含配套的聊天、精選訊息和警示樣式。

預覽並使用套裝
寧靜林地裡的童話青蛙

🍄 苔蘚與蘑菇

寧靜林地中的童話青蛙。包含配套的聊天、精選訊息和警示樣式。

預覽並使用套裝
在淡紫星塵中漂浮的太空兔

🌙 月亮兔

在淡紫星塵中漂浮的兔子太空人。包含配套的聊天、精選訊息和警示樣式。

預覽並使用套裝
帶著發光魔法水晶的小龍

🐉 水晶守護者

小龍守護著發光的魔法水晶。包含配套的聊天、精選訊息和警示樣式。

預覽並使用套裝
薄荷綠與梅紫色中的耳機浣熊與黑膠唱片

🎵 午夜混音帶

耳機浣熊與黑膠唱片,搭配薄荷綠和梅紫色。包含配套的聊天、精選訊息和警示樣式。

預覽並使用套裝
友善幽靈、發光南瓜與午夜梅紫

🎃 南瓜幽靈

友善幽靈、發光南瓜與午夜梅紫色。包含配套的聊天、精選訊息和警示樣式。

預覽並使用套裝
圍著圍巾的馴鹿與節慶常青樹

🎄 歡樂小馴鹿

圍著圍巾的馴鹿與節慶常青樹。包含配套的聊天、精選訊息和警示樣式。

預覽並使用套裝

主題套裝

完整主題套裝,包含文件、範例圖片及指南

Deuk 的主題
完整套裝

Deuk 的主題

精緻的全動畫主題,支援自訂顏色及平滑轉場。非常適合遊戲直播。

新
Windows 3.1 主題
復古風格

Windows 3.1 主題

懷舊的 Windows 3.1 風格聊天疊加畫面,帶有經典視窗設計及像素級細節。

Neutron 主題
現代設計

Neutron 主題

整潔現代的設計,動畫流暢,易於閱讀。可自訂配色。

簡單即用範本

只需工作階段 ID 即可使用的現成範本

範例範本
極低

範例範本

整潔輕量、具備基本功能的範本。適合作為自訂的起點。

美觀範本(Pretty Template)
動畫

美觀範本(Pretty Template)

優雅設計,動畫流暢並帶有視覺效果。醒目而不分散注意力。

t3nk3y 的主題
遊戲

t3nk3y 的主題

為遊戲直播設計的醒目高對比主題,即使內容節奏很快也清晰可見。

LuckyLootTube 液態玻璃主題
液態玻璃

LuckyLootTube 的主題

時尚的液態玻璃風格聊天疊加畫面,動畫流暢,表情算繪酷炫。

相容 YouTube CSS 的範本

支援 YouTube CSS 樣式的範本

YouTube CSS 範本
相容 YouTube

YouTube CSS 範本

在採用 YouTube 結構的疊加畫面頁面上使用為 YouTube 設計的 CSS。相容 Septapus 樣式。

開發者範本

建立自訂疊加畫面的起點

基礎範本(Bare Template)
開發者

基礎範本(Bare Template)

用最少程式碼從頭建立自己的疊加畫面。適合開發者及 LLM 輔助程式設計。

疊加畫面範例
開發者

範例疊加畫面範本

更完整的起始範本,附帶註解和文件,協助你建立自己的自訂疊加畫面。

有想分享的範本?

為 Social Stream Ninja 製作了出色範本?向 GitHub 儲存庫提交提取要求,與社群分享。

在 GitHub 上提交

將 StreamElements 聊天小工具與 Social Stream Ninja 搭配使用

第一次匯入? 閱讀完整聊天外觀指南 ,了解小工具檔案尋找、支援的格式、OBS 設定及疑難排解。

同時適用於 SSN Windows 桌面應用程式和 Chrome 擴充功能,不需編輯程式碼。

確認 SSN 正在接收聊天

在 SSN 應用程式或擴充功能中開啟平台來源,然後傳送測試訊息。確認訊息出現在 SSN 停駐面板後再繼續。

取得原始小工具匯出檔案

使用小工具設計者提供的 ZIP、資料夾或檔案。有效匯出通常包含 HTML、CSS、JavaScript、fields/data 及資源。截圖或 StreamElements 疊加畫面 URL 不足夠。

開啟匯入器

開啟匯入器並選擇 ZIP、資料夾或檔案。它會辨識小工具組成部分並立即顯示示範預覽。

開啟小工具匯入器

加入你的 SSN 工作階段 ID

從 SSN 彈出選單開啟匯入器時,會自動填入工作階段 ID 和密碼。若直接開啟,請從以下位置複製: 工作階段選項 ,在應用程式或擴充功能中尋找。只需在匯入器中輸入工作階段 ID 一次,它會儲存在下載的檔案內。

選擇訊息歷史

若匯入的小工具提供相容設定,使用 訊息歷史 以關閉定時移除,或變更畫面上保留的訊息數量。這會變更小工具設定,不會變更程式碼。

下載前測試

示範預覽 透過範例訊息檢查設計。 即時預覽 使用正在執行的 SSN 應用程式或擴充功能中的真實聊天檢查工作階段。

下載並加入 OBS

點選 下載 OBS HTML。在 OBS 中新增瀏覽器來源,啟用 本機檔案,並選取下載的 HTML 檔案。 不要在 OBS 中加入工作階段 ID 或編輯 URL。 直播時保持 SSN 執行;匯入器與 StreamElements 可以關閉。

示範為空白

檢查匯入器辨識出的檔案;若選錯 HTML、CSS 或 JavaScript,請使用 Advanced file selection。

即時預覽為空白

確認聊天到達 SSN 停駐面板,且工作階段 ID 和選用密碼完全一致。

OBS 顯示為空白

使用下載的 HTML 檔案,而非匯入器頁面、原始 ZIP 或 StreamElements URL,然後重新整理 OBS 瀏覽器來源。

如何使用範本

依照這些簡單步驟開始

選擇範本

瀏覽範本庫,選擇適合直播風格的範本。使用截圖圖庫比較設計;大多數內建範本可直接透過 URL 使用,不需下載。

加入你的工作階段 ID

替換 YOURSESSIONID ,在範本 URL 中替換為實際的 Social Stream Ninja 工作階段 ID,可在 SSN 應用程式或擴充功能的 Session Options 下找到。若工作階段使用密碼,也請包含選用密碼。

https://socialstream.ninja/themes/pretty.html?session=YOURSESSIONID

加入 OBS/Streamlabs

將修改後的 URL 作為瀏覽器來源加入直播軟體:

  1. 在 OBS 中點選「來源」下的 +,選擇「瀏覽器」
  2. 為來源命名並點選「確定」
  3. 貼上帶工作階段 ID 的範本 URL
  4. 設定寬度和高度(建議:1920×1080)
  5. 點選「確定」將其加入場景

自訂範本

透過以下任一方式使用自訂 CSS 個人化疊加畫面:

  • OBS 自訂 CSS: 在瀏覽器來源屬性中加入 CSS
  • URL 參數: 附加 &css=URL_TO_YOUR_CSS_FILE 至範本 URL
  • Base64 CSS: 對於行內 CSS,使用 &b64css=YOUR_BASE64_ENCODED_CSS

🛠️ 製作自己的範本

從可用疊加畫面開始,再修改外觀。

🎨 變更外觀

使用 OBS 瀏覽器來源 自訂 CSS ,以調整顏色、間距和排版。保留原始 SSN URL 和連線。

📦 匯入小工具

有 StreamElements 聊天小工具匯出檔案? 開啟 StreamElements 轉換器,預覽後下載 OBS HTML。請使用原始 ZIP 或檔案,而非截圖或疊加畫面 URL。 查看下方設定.

🧩 變更行為

複製一個可用的起始範本,並編輯其 HTML、CSS 和 JavaScript。 快速開始 · 開發者指南 · 事件欄位

🔧 檔案、路由及測試
  1. 使用 sampleoverlay.html 用於整合聊天, featured-modern.html 用於選取訊息,或 multi-alerts.html 用於事件。從以下位置下載來源檔案及所需資源: beta 儲存庫.
  2. 保留原始連線程式碼。聊天與精選疊加畫面接收不同的訊息串流;為聊天串流改樣式不會將其變成選取訊息疊加畫面。
  3. 將參照的共用指令碼、字型及圖片與檔案一起保留,使用相同相對路徑,或請 AI 提供獨立匯出。重新命名一個 HTML 檔案不會將其相依項目打包。
  4. 託管檔案,並使用帶工作階段及選用密碼的 URL。對於獨立本機匯出,請遵循其設定說明;OBS Local file 沒有用於工作階段參數的 URL 欄位。
  5. 先用模擬資料預覽,再使用自己的 SSN 工作階段測試。檢查選取訊息、清空、長名稱、圖片及透明背景。即時使用期間保持 SSN 執行。

對於以觸發器為基礎的行為,從以下內容開始: Event Flow 編輯器 和 警示效果規則 ,然後再撰寫新疊加畫面。

✨ 為你的 AI 複製提示詞

選擇起點,複製提示詞,並替換方括號中的設計細節。如果 AI 無法讀取連結,請附上來源檔案。不要在對話中提供私密工作階段 ID 和密碼。

💬 整合聊天
⭐ 精選訊息
🎉 帶音效的警示
🎨 僅用 CSS 改造外觀

正在轉換更複雜的小工具? 使用完整的 StreamElements / Streamlabs 轉換提示詞.

影片教學

了解如何在 AI 協助下建立自訂聊天疊加畫面

影片快速指南

  1. 找到範例疊加畫面範本(sampleoverlay.html)
  2. 將範本程式碼複製至剪貼簿
  3. 使用 Claude 等 AI 助理協助自訂
  4. 提示 AI 修改 CSS,以實現喜歡的樣式
  5. 設定 OBS 以使用自訂範本
  6. 透過 OBS 瀏覽器來源設定套用自訂 CSS