Communitygithub.com

ascorblack/video-skills

用于视频、演示和 GIF 的程序界面录制规则——在虚拟时间中逐帧拍摄浏览器(headless Chrome,beginFrame)、虚构数据的演示展台、光标、录制过程中的标记、片段首尾的预留、帧列表、推近与裁剪、风格化画框中的程序界面、使用相同点击的其他语言版本以及录制与 3D 场景中双手的同步。当您需要录制、剪辑、加速或插入应用程序界面录屏时使用。

video-skills 是什么?

该技能提供了一套完整的程序界面录制方法论,适用于视频、演示和 GIF 制作。其核心原则包括:采用 headless Chrome 和 beginFrame 技术进行逐帧拍摄,确保帧率稳定、画面不撕裂;使用虚构数据搭建演示展台,避免真实数据泄露,并在录制前仔细检查每一屏;通过录制过程中打标记(而非依赖时间戳)来精确控制镜头切换和字幕,确保多版本同步;片段首尾预留静默部分,便于后期剪辑和拼接。技能还涵盖了界面真实与风格化绘制的选择、推近镜头的使用、光标绘制与事件同步、3D 场景中双手与录制的同步,以及多语言版本的制作。它详细记录了从录制(recording.md)、后期处理(framing.md)到多语言同步(languages-and-sync.md)的全流程,并参考了不同风格教程的实践经验(视频教程、3D 场景教程、科学纪录片教程)。该技能适用于主流 AI 代码编辑器(如 Claude Code, Cursor, Codex),帮助开发者高效录制高质量的程序界面镜头。

兼容平台~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. 在录制过程中直接打标记,并将字幕和相机绑定到标记上,而非绑定到具体秒数。[视频教程] [3D教程]
  6. 在片段开头和结尾预留静默部分[视频教程];在第二语言版本中,开场和结尾的长度应与原版保持一致[3D教程]。
  7. 每个片段通过由 4–6 帧组成的帧列表来检查。[视频教程]
  8. 任何录制器的等待操作都必须设置超时;后台进程通过 pid 来终止。[视频教程]
  9. 展示录制画面直至动作的可见结果;镜头推近应覆盖整个功能块,而非单个按钮。[视频教程] [3D教程]
  10. 使用真实界面还是绘制的界面,取决于视频类型:程序宣传片使用真实界面[视频教程],而风格化的科学纪录片则重新绘制界面[科学纪录片]。详细信息请参见 framing.md。

详细信息

  • recording.md — 如何录制:虚拟时间、演示展台、标记、预留、片段检查、录制器。
  • framing.md — 视频中的录制内容:裁剪与加速、推近、光标、风格化画框中的界面、真实或绘制的界面。
  • languages-and-sync.md — 其他语言版本以及 3D 双手与录制的同步。

来源

  • [视频教程] — 过往的视频教程存档:界面录制、节奏、转场。
  • [3D教程] — 浏览器中的第一人称 3D 视频教程,其中屏幕录制被嵌入到 3D 场景中。
  • [科学纪录片] — 以苏联科学纪录片和 70 年代初幻灯片风格制作的视频教程,画面中包含程序界面。

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.

相关技能