Communitygithub.com

flucas96/ui-review

建立、修改並視覺審查精美的產品展示與社群媒體影片,這些影片可以來自真實網頁應用程式、螢幕截圖或設計好的 UI 場景。當 Codex 需要為產品示範影片進行腳本規劃、錄製、動畫製作、編碼或改善時使用,特別是在需要自然的游標移動、點擊回饋、真人打字速度、閃爍的插入符號、鏡頭移動、字幕、行銷節奏或多種長寬比剪輯的情況下。

ui-review 是什麼?

這個技能讓 AI 代理(如 Codex)能夠製作專業的產品展示影片,透過模擬真實的人類操作行為,如自然的游標移動、點擊回饋和逐字打字,來提升影片的真實感與吸引力。它支援多種輸出格式和長寬比,從標準的 1920×1080 橫式影片到適合社群媒體的 4:5 或 9:16 格式,並且可以根據不同的行銷目標(例如完整的產品工作流程或簡短的社群預告)自動調整內容長度和節奏。此技能依賴 Playwright 進行瀏覽器自動化錄製,並使用特定的動畫腳本(如 human-motion.mjs)來產生可預測且擬真的游標軌跡。最終的輸出是高品質的 H.264 MP4 影片,並附有詳細的審查流程,包括關鍵影格檢查和接觸表,確保每個點擊、轉場和打字動作都流暢且精準。

相容平台~Claude Code✓Codex CLI✓Cursor
npx skills add https://github.com/flucas96/ui-review/tree/HEAD/.agents/skills/create-product-demo-video

在你喜歡的 AI 中提問

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

說明文件

建立產品展示影片

製作一個連貫的產品故事,讓它感覺是由真人操作的。偏好錄製真實的介面,並只添加必要的呈現層來提升清晰度。

選擇剪輯版本

  • 使用 1920×1080 以 30 或 60 fps 製作適合儲存庫、登陸頁面或詳細工作流程的影片。
  • 使用 1080×1350 製作 4:5 的社群貼文剪輯,以及 1080×1920 製作直式的限時動態/連續短片。
  • 預設完整工作流程的長度為 45–90 秒,社群預告則為 8–15 秒。
  • 為實質上不同的長度建立獨立的剪輯版本;不要只是單純加快長版本的播放速度。

建構故事

在開始製作前,先檢查應用程式、可用的素材、現有的腳本和品牌風格。撰寫一個簡短的節奏表,包含:鉤子、問題、行動、可見結果和行動呼籲。每個節奏只保留一個有意義的動作。讓重要的狀態停留足夠長的時間,以便能夠被閱讀。

對於完整的工作流程,展示人類的意圖、代理的行動、審查後的結果以及最終的解決方案。對於預告片,則以結果開頭,並只使用能證明這個結果的最低限度 UI。

模擬人類互動

在實作指標、打字或鏡頭動畫之前,請閱讀 motion-language.md。使用 human-motion.mjs 來產生確定性的指標路徑和打字時間軸,然後將其輸出改編到錄製工具中。

套用以下要求:

  • 在單一場景內保持游標位置連續。絕不要在可見的動作之間瞬間傳送游標。
  • 沿著一條略微彎曲的路徑移動,包含加速、減速和一個小的最終修正。
  • 根據距離和目標大小調整移動持續時間。避免使用全域統一的游標速度。
  • 到達目標後短暫暫停,然後執行指針按下動作並顯示點擊漣漪效果,最後才執行點擊。
  • 逐字元打字,並帶有變化延遲,在空格和標點符號處暫停稍長。
  • 每當文字欄位獲得焦點時,顯示一個閃爍的插入游標,包括在打字前、打字中和打字後的暫停期間。
  • 避免使用合成的打字錯誤,除非它們有助於故事的呈現。
  • 在困難的場景切換時,如果無法保持游標位置的連續性,則應淡出游標。

錄製與合成

當需要瀏覽器自動化時,使用 Playwright 技能。以最終目標解析度或更高的解析度進行錄製。偏好使用真實的應用程式、真實的版面配置和真實的狀態轉換,而不是重新建立的模型。如果必須建立階段性環境,請清楚保留產品的視覺識別。

使用剋制的鏡頭移動:

  • 平移或縮放以引導注意力,而不是僅僅為了增加動感。
  • 對一個穩定的鏡頭容器進行動畫處理;不要獨立地轉換多個頁面子元素。
  • 保持固定的轉換原點,並從當前渲染的轉換狀態繼續,以防止跳躍。
  • 緩入和緩出縮放,在目標位置停留,並為返回動作提供其自身的緩動。
  • 避免同時讓鏡頭、游標和主要 UI 元素朝相互競爭的方向移動。
  • 將文字覆蓋層保持在安全邊距內,並且在沒有音訊的情況下也能閱讀。
  • 以與產品視覺語言一致的方式為字幕和進度指示器添加動畫。

編碼

優先使用 H.264 MP4 格式,搭配 yuv420p 和 faststart 設定,以獲得廣泛的播放支援。保留高解析度的母版檔案,並從中衍生出較小的傳遞版本。保持文字清晰,並避免在 UI 邊緣周圍進行過度壓縮。

審查與迭代

檢查完整影片,而不僅僅是第一幀。提取一份接觸表,以及每個點擊、轉場、縮放端點、文字輸入完成和最終行動呼籲處的關鍵影格。檢查:

  • 游標移動感覺有目的性但並非完美;
  • 每個點擊都有可見的回饋並且落在目標上;
  • 指針速度和打字節奏自然變化;
  • 插入游標在獲得焦點的文字欄位中閃爍;
  • 縮放在開始、焦點停留、反轉和結束點都保持連續;
  • 標籤的顯示時間足夠長以至於可讀;
  • 沒有游標、工具提示、模態框或字幕被剪裁;
  • 轉場保持空間連續性;
  • 尺寸、持續時間、編碼器和檔案大小與所選的剪輯版本相符。

在交付前修改任何過於急促的動作。提供最終影片、海報幀、持續時間、尺寸以及本地或儲存庫路徑。僅在要求時才更新儲存庫文件。

相關技能