Communitygithub.com

tin-computer/tin

在手機尺寸畫面中捕捉即時產品頁面,並生成附有旁白的 9:16 示範影片。

tin 是什麼?

此技能可將任何產品網頁自動轉換為精簡、流暢的 9:16 格式示範影片,適用於手機端展示。它並非進行即時螢幕錄影,而是透過 `tin-studio` 工具捕捉關鍵影格,再由渲染器合成捲動、點擊、縮放與字幕動畫,因此最終影片極為順暢。使用者需先分析產品頁面結構來規劃腳本,再設定不超過七個步驟的旁白與字幕,接著執行語音生成(支援多種語音與語言),最後預覽並渲染出 1080x1920 的 MP4 檔案。此技能特別適合需要快速產出行銷示範、產品說明影片的開發者或內容創作者,支援 CLI 操作,並可搭配角色 SVG 與自訂背景。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tin-computer/tin/tree/HEAD/codex_procedures/creative.product_demo/skills/product-demo-video

在你喜歡的 AI 中提問

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

說明文件

產品示範影片流程

所有操作透過 tin-studio(執行 tin-studio help)進行。在執行環境提供的工作目錄(稱為 WORK;API 執行使用 /home/tin-work/studio,傳統 OAuth 執行使用 /home/user/.tin-lite/studio)中進行 Studio 操作;只有最終的 MP4 檔案會放入專案 checkout 目錄中。這不是即時螢幕錄影:你捕捉已穩定的關鍵影格,渲染器會合成捲動、點擊、縮放與字幕動畫,因此結果會非常流暢。

1. 規劃故事

  1. 閱讀 wiki/INDEX.md(## Product、功能地圖、定位)。閱讀 angle 與 notes。
  2. 執行 tin-studio inspect <product_url> WORK/inspect。閱讀 JSON:headings 及其 scrollY、帶有現成 selector 的 actions(優先使用 inHeader: true 的導航用 selector)、text、docHeight。用圖片檢視器打開 WORK/inspect/inspect.png 與 WORK/inspect/inspect-full.png,注意每個畫面顯示的內容。如果故事需要,可再檢查一兩個頁面(文件、定價頁)。
  3. 決定格式:script-format.md 描述:一個最多七個字的鉤子(hook),點出痛點(若有 angle 則使用該內容),接著五到七個步驟。每個步驟是一個可見的瞬間,搭配一句最多十四個字的旁白與一條最多五個字的字幕。每個字幕與鉤子中標記恰好一個 *單詞*。最後一個步驟落在頁面實際提供的行動呼籲(試用、定價、安裝)上,並加上一條 [warm] 台詞。總台詞最多 75 個字。
  4. 主張來自頁面文字或專案記憶;數字必須在提到該數字的步驟中顯示於螢幕上。
  5. 每一句台詞都以創作者對觀眾說話的方式撰寫:現在式、第二人稱、直接講述事物本身。切勿描述頁面(「頁面顯示」、「此區塊列出」、「網站範例」);說明其對觀眾的意義(「你的 Agent 會獲得自己的編號」)。數字與數量用文字表示,品牌名稱保留於完整句子內。

2. 撰寫與捕捉

  1. 依照 script-format.md 的格式撰寫 WORK/script.json。
  2. 執行 tin-studio capture WORK/script.json WORK/out。用圖片檢視器打開每個 WORK/out/frames/kNNN.png 並檢查:頁面已載入(無空白、無錯誤、無插頁廣告);沒有 Cookie 橫幅或彈出視窗遮蓋內容(若出現此類元素,則新增一個點擊該關閉按鈕的步驟,或選擇無此問題的頁面);每個捲動位置與字幕預期相符;每個點擊命中目標元素(點擊關鍵影格顯示新頁面)。錯誤的關鍵影格需修正腳本:從 inspect 取得更好的 selector、scrollTo、更大的 settleMs,或改用不同頁面。重新捕捉直到每個關鍵影格正確為止。

3. 語音

  1. 執行 tin-studio voice WORK/out --voice <voice> --language "<language>"。在鉤子台詞上加上 [excited],在最後一句加上 [warm];其餘為純句子。每次執行會印出每個步驟的片段長度;若片段超過五秒,則縮短該句。
  2. 單次執行有上限(24 行、3000 個字元)。重新執行時會保留未修改的行,因此只需在 WORK/script.json 中編輯一行,無需重新捕捉,再執行 voice 即可。
  3. 若提供者拒絕某句台詞,會回報為 REFUSED 並附上原因,其他台詞則保留。content_policy_violation 表示提供者的不透明文字檢查誤判:首先不要帶任何 --style 參數再次執行 voice(已知預設樣式可通過),然後用更簡單的措辭改寫該句並再次執行 voice。切勿重送未修改的被拒絕台詞,且對同一句最多嘗試兩次改寫;放棄該句,讓字幕承擔該步驟。

4. 預覽、渲染、檢查

  1. 角色:當設定 character 時,檔案路徑為 /home/user/project/characters/<character>.svg;先對該檔案執行 tin-studio check。若缺少或被拒絕,則不帶角色進行渲染,並在訊息中說明。
  2. 在完整渲染前預覽三個影格(鉤子、中間捲動處、最後步驟): tin-studio frame WORK/out WORK/p1.png --at 1.5 --bg <backdrop> [--character <svg>], 並在總長度約一半處及結尾再次預覽。檢查:字幕清晰可讀且居中、角色臉部可見且未遮蓋字幕、手機卡片顯示正確畫面、背景不衝突。
  3. 渲染:tin-studio render WORK/out WORK/<slug>.mp4 --bg <backdrop> [--character <svg>]。 它會印出影片長度。接著 tin-studio check WORK/<slug>.mp4 必須輸出 OK,且 tin-studio probe 應顯示 1080x1920 並包含音訊串流。
  4. 若超過 40 秒:刪減一個步驟或縮短台詞,重新執行 voice,再次渲染。

5. 交付

將檢查過的 MP4 複製到指定的輸出路徑,不要複製其他檔案。最終訊息為故事板:鉤子,然後每個步驟的字幕、旁白台詞與螢幕內容;標示總長度、使用的語音、背景與角色;以及任何因頁面不支援而軟化處理的主張。

規則

絕不註冊、登入、填寫表單、或按下購買、發送、刪除、邀請、聯絡按鈕。不得使用任何帳戶。不得捕捉登入後頁面。不得編輯頁面 DOM 來偽造狀態。不得在專案 checkout 目錄中建立除指定輸出檔案以外的任何檔案。

相關技能