Communitygithub.com

螢幕教學影片

製作品牌化教學或逐步操作影片(30秒至10分鐘,1080p橫向),展示如何在真實應用或網站中完成某項操作。

螢幕教學影片 是什麼?

此技能專為需要快速產出高品質、品牌化螢幕教學影片的開發者與AI代理使用者設計。它能根據使用者是否提供螢幕錄製,自動選擇兩種模式:若使用者有螢幕錄影,則直接使用;否則,技能會依據最新的參考資料(如 `references/screens.md`)重建出準確的HTML模擬畫面,並包含動態游標、點擊、打字和焦點效果。影片結構包含鉤子(Hook)、一句話總結、逐步操作、結果展示與額外提示,並支援在右上角加入步驟標記,以及操作元素上的印章或高亮。此技能特別適合製作「如何操作」類影片,例如在Search Console、Cloudflare、Google Tag Manager、WordPress、GitHub等平台上的設定與教學。此外,它強調資料真實性與隱私保護:所有關於產品的宣稱都必須來自官方文件的截圖(「收據」),且重建的模擬畫面不得使用真實帳戶資料,只能使用佔位數據(如 `example.com`)。最終影片會以使用者的聲音(或Jay)進行旁白,並可套用品牌風格。此技能支援 `fetch-video.sh`, `enhance-audio.sh`, `rough-cut.mjs`, `voice.mjs --provider file` 等處理流程,渲染成本約為每分鐘影片1–1.5分鐘。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/NicheEgg/video-studio/tree/HEAD/skills/video-screen-tutorial

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

螢幕教學影片 是做什麼的?

請先閱讀 references/house-rules.md;該文件優先。 執行順序:video-director 的第3節。此文件僅涵蓋特定事項。

狀態: 重建的模擬畫面已驗證(Search Console + Cloudflare 影片已成功);screen 節拍中的螢幕截圖已驗證。但將真實螢幕 錄製 播放於縮放視窗中的功能尚未實作:請在第一個真實錄製上建構並測試它(將 screen 節拍擴展以接受 video,如同 clip 節拍所做的那樣),然後更新這一行。

特定事項

  • 螢幕的來源(硬性規則2):使用者自己的螢幕錄製(如果有的話);否則,從當前、有日期的參考資料(references/screens.md)重建步驟為HTML模擬畫面,包含游標、點擊、打字和焦點效果。這是一個演示,因此重建是恰當的。可重複使用的現有模組:gsc-add-property、cloudflare-dns-add、gsc-verify。
  • 必須保持真實的內容: 任何關於產品的宣稱(「Google說…」)都必須是從其官方文件捕獲的「收據」,且任何作為自身呈現的靜態頁面(例如首頁、定價頁面)都必須是真實截圖。
  • 檢查每個使用影格中的私人資料(電子郵件、帳戶ID、金鑰、收入)。將其模糊處理或裁切,並告知使用者。
  • 來源: fetch-video.sh → enhance-audio.sh → rough-cut.mjs(它將畫面與聲音一併剪輯,因此去除空白時間和重拍)→ voice.mjs --provider file。
  • 每個步驟都是一個 screen 節拍,包含品牌視窗中的螢幕錄製(或截圖)和相機 移動:從廣角開始,推進到提及的控制項(1.3–1.6倍),停留,然後拉回。從不使用筆電或裝置外框。
  • 步驟標記 位於右上角,內容來自 script.json → steps。在需要點擊的項目上加上印章或高亮。每個節拍只有一個操作指示,並以螢幕上標示的名稱來命名。
  • 結構: 鉤子(問題,5–10秒;如果使用者有自拍則可在鏡頭前)→ 一句話總結整個任務 → 逐步操作 → 結果 → 一個額外提示。
  • 工具包使用保持輕量: 僅用於產品宣稱的收據(其官方文件),以及在「成功」或「失敗」時刻的反應或迷因音效。步驟中不穿插其他內容。
  • 重建的模擬畫面使用佔位數據(example.com),絕不使用真實帳戶的詳細資訊。
  • 節奏: 平靜。觀眾正在跟著操作。

成本與時間

僅需轉錄成本(美分)。渲染時間約每分鐘影片1–1.5分鐘。

參考資料

own-footage.md · engine-api.md(screen 節拍、相機移動) · screens.md(重建應用程式螢幕以進行演示) · voice-music.md · troubleshooting.md

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能