Communitygithub.com

ascorblack/video-skills

用於錄製軟體介面以製作影片、簡報和 GIF 的規則——在虛擬時間中逐幀拍攝瀏覽器畫面(無頭 Chrome、beginFrame)、使用偽造資料的展示環境、游標、錄製期間的標記、片段前後的安全時間、幀列表、平移與裁剪、以風格化畫框呈現的應用程式畫面、使用相同點擊的另一語言版本,以及將 3D 場景中的手勢與錄製同步。當你需要錄製、剪輯、加速或將應用程式畫面插入影片時使用。

video-skills 是什麼?

這個技能提供了一套完整的規則與最佳實踐,用於錄製軟體介面以製作高品質的影片、簡報和 GIF。其主要特色包含:在虛擬時間中透過無頭 Chrome 的 `beginFrame` 進行逐幀拍攝,確保幀率一致且無撕裂;建立使用偽造資料的展示環境(demo stand),並確保其內部資料一致性;錄製時直接於特定時間點放置標記,而非依賴時間碼,方便後續剪輯時對齊。此外,此技能還涵蓋了多語言版本錄製(使用相同的點擊序列)、3D 場景中手勢與錄製內容的同步,以及為不同用途(如真實產品展示或風格化科學影片)選擇適當的介面呈現方式。支援 Cursor 或任何可利用無頭 Chrome 的 AI 代理環境,透過這些結構化規則能大幅減少後製工作量,提升錄製效率與成果品質。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ascorblack/video-skills/tree/HEAD/ru/skills/video-ui-capture

在你喜歡的 AI 中提問

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

說明文件

錄製介面

每個規則都來自過去影片的課程;方括號內為來源(圖例在底部)。 當來源不一致時,會同時提供兩條建議,並標明各自適用的情況。

簡短規則

  1. 逐幀拍攝,透過虛擬時間控制瀏覽器:前進一幀,拍攝一幀。即時螢幕錄製會導致畫面撕裂。[影片] [3D]
  2. 僅錄製使用偽造資料的展示環境;錄製前先以人眼瀏覽每個畫面。[影片] [3D]
  3. 展示環境必須內部一致:兩個讀取相同事實的畫面,必須顯示相同的內容。[影片]
  4. 游標應精準地移向目標,而非偏離;在頁面上使用與傳遞給應用程式相同的事件來繪製游標。[影片] [3D]
  5. 在錄製過程中直接放置標記,並將字幕與攝影機綁定在標記上,而非時間碼上。[影片]
  6. 在每個鏡頭的開頭與結尾預留額外的靜止時間[影片];在第二語言版本中,片頭與片尾的長度應與原文版本相同[3D]。
  7. 每個鏡頭應透過由 4 到 6 個幀組成的幀列表進行審查。[影片]
  8. 錄製器的一切等待動作都應設定超時;透過 process ID 終止背景程序。[影片]
  9. 展示錄製結果直到可見動作完成;平移時應針對整個區塊,而非單一按鈕。[影片] [3D]
  10. 使用真實或繪製的介面取決於影片類型:產品宣傳片使用真實介面[影片],風格化的科學影片則需重新繪製[科學影片]。請參閱 framing.md。

詳細資訊

  • recording.md — 如何錄製:虛擬時間、展示環境、標記、時間緩衝、鏡頭檢查、錄製器。
  • framing.md — 影片中的錄製內容:裁剪與加速、平移、游標、風格化畫框內的應用程式畫面、真實或繪製的介面。
  • languages-and-sync.md — 另一語言版本以及 3D 手勢與錄製的同步。

來源

  • [影片] — 過去的影片課程:介面錄製、節奏、轉場。
  • [3D] — 瀏覽器中第一人稱 3D 影片的課程,其中螢幕錄製被嵌入到 3D 場景中。
  • [科學影片] — 以 1970 年代早期蘇聯科學普及片與幻燈片風格製作、畫面中帶有應用程式視窗的影片課程。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

ascorblack/video-skills

Правила 3D-анимации для роликов в браузере (three.js → покадровый рендер) и анимации фигур с предметами — руки и тело от первого лица, рукав и манжета, контакт кисти с предметами и поверхностями, смешивание поз и углов, расталкивание персонажей, ходьба без скольжения, свечение, контактные тени, процедурные материалы, детекторы пересечений и рывков. Используй, когда строишь, анимируешь или проверяешь 3D-сцену, персонажей, руки, предметы в руках или свет в ролике.

ascorblack/video-skills

Правила звука для роликов — фоновая музыка и звуковое оформление, совпадение звука с картинкой, сведение голоса и музыки (LUFS, истинный пик, приглушение), удлинение музыки без стыков, синтез дикторской озвучки (дословность, темп), архивный «эфирный» голос с помехами, сдача звука и работа с API-ключами. Используй, когда делаешь, сводишь, проверяешь или правишь музыку, звуковые эффекты, озвучку или микс ролика.

ascorblack/video-skills

Правила рендера и оптимизации роликов из HTML/браузерных кадров — грабли покадрового рендера с перемоткой (твины, CSS-анимации, transform, aspect-ratio, SVG use, тяжёлые слои), детерминизм и повторяемость, где уходит время рендера, кодирование на NVENC с битрейтом, воркеры, отвязанный от сессии рендер, вшивание звука без перерендера картинки, проверка готового файла (ffprobe) и хранение версий. Используй, когда рендеришь, ускоряешь, кодируешь, пересобираешь или сдаёшь готовое видео.

ascorblack/video-skills

Rules for the visuals of videos about programs and popular-science videos — diagrams and connector lines, terms with applied examples, how long to hold a slide, transitions without jerking, camera push-ins, titles and figures in the frame, stylization in the manner of Soviet popular science and filmstrips (palette, fonts, grain, vignette). Use when designing, drawing or editing frames, slides, diagrams, titles, transitions or the style of a video, and when checking frames before assembly.

相關技能