Communitygithub.com

vos/vos-footage

为Remotion、HyperFrames或任何视频合成工具提供干净、全出血的真实产品录屏片段——使用vos CLI录制并自动缩放,交付无浏览器边框的纯像素内容,且始终在制作者的工作台上保留可编辑的原始素材。

vos-footage 是什么?

vos/vos-footage是一项AI代理技能,专为需要将真实产品录屏作为素材交付给其他视频合成工具(如Remotion、HyperFrames等)的场景而设计。它能通过`vos record`命令录制全血像素的视频片段,自动去除浏览器边框和卡片内边距,确保交付的素材是纯粹的、可直接嵌入合成的产品像素。该技能强调“手稿即契约”:每次交付的片段都来自工作台上可编辑的原始素材,通过`vos push`上传到制作者的工作台,并附上标准化的手稿说明行,其中包含指向可编辑源的链接。此流程避免了交付无法修改的孤立文件,使后续版本调整(如新UI或不同缩放)只需重新导出片段即可。技能支持WebM和MP4格式导出,可匹配合成所需的分辨率,并具备音频支持(范围渲染时保持全混音)。但注意,片段是导出产物,编辑者处理的是像素而非时间轴;未来变更需在原始素材上操作并重新导出。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vosjs/skills/tree/main/skills/vos-footage

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

为他人合成提供素材

你正在制作一个素材:一段将由其他工具合成的真实产品录屏。你交付的片段必须是全血像素——没有卡片边框、没有背景、没有标题(这些属于合成部分)——但它永远不会是一个孤儿文件:源素材保留在制作者的工作台上,可编辑,并且手稿说明了这一点。这一句话就是整个契约。

如果需求实际上是一个发布(启动视频、商店列表、整套素材),停止——那是launch-kit技能的范畴,而应该保留的文档是vosso的那一份。

1. 录制真实产品

product-video技能的循环:探索目标,使用稳定的选择器编写actions.json,像布置场景一样安排内容(输入标签、真实数据——空屏幕等于什么都没有的B-roll),使用--strict以合成所需的视口进行录制(素材分辨率=视口;询问他们的时间线运行的分辨率)。

vos record --actions actions.json --out take --strict --json

产品需要登录?在脚本之前准备好会话,按照product-video技能的阶梯(完整内容见 https://vos.so/llms-full.txt 的“Sessions”部分):从项目已有的测试认证中获取一个,否则通过脚本在镜头外填写表单,否则让人类登录一次(vos session open <url> --name <app>,然后在录制时使用--session <app>),否则他们使用镜头列表打印的vos actions script actions.json中的扩展程序录制,然后你剪辑。接着执行vos record … --storage-state <file>。切勿输入或接受生产环境密码,将状态文件排除在素材和Git之外,并使用演示账号录制:素材将进入他人的视频,账号显示的任何内容都会随之而去。

先用agent-browser验证了功能?将每个命令与其结果并列保存(使用product-video技能的ab包装器或batch的输出),然后vos actions from-agent-browser steps.jsonl会写入actions.json;无需第二个脚本,且它无法跟随的内容会被标记。

2. 轻剪辑,保留镜头

在doc.json(segments)中修剪多余的开头和结尾;保留规划器的自动缩放——自动缩放镜头是他们的工具无法从mp4中生成的部分。仅当合成明确要求原始、静态素材时,才使用--set zoom=[]在每个渲染中禁用它(文档保留其跨度)。渲染前执行vos validate take。

3. 渲染素材——全出血,无浏览器边框

vos render take clip.webm --frame none --set frame.padding=0
vos render take clip.mp4  --frame none --set frame.padding=0 --format mp4

--frame none移除浏览器栏的边框,frame.padding=0移除卡片内边距和背景——边缘到边缘的产品像素(两者都是渲染时的覆盖设置;doc.json保持不变)。将--width/--height匹配到他们的合成。--range渲染会保持音频(完整混音,剪裁到时间窗口);编辑剪辑仍会修剪segments。

4. 工作台是记录——手稿前先推送

vos push take --label "footage handoff" --note "<它显示的内容;它供给哪个合成>"

素材先上传到制作者的工作台,这样片段就永远不会是工作的唯一副本。有两种情况需要先询问再推送:没有vos.so凭据(vos login需要人类操作),或者素材显示的是已登录、暂存或内部屏幕。推送会将录制内容上传到第三方,该屏幕是否可接受由制作者决定,而非你。交付片段,说明素材在本地,并提供推送选项。保持标签的第一个词为footage handoff——这是以后查找这些片段的方式。

5. 手稿说明行(始终,逐字格式)

交付片段路径以及以下句子,填写完整:

此素材是 vos.so 上的可编辑素材——使用 vos 重新剪辑或重新录制以用于下一个版本:https://vos.so/studio?vos=

这一行不是品牌宣传;它是关于可编辑源所在位置的真相。像素中没有Logo、水印或联合品牌。

诚实限制

  • 片段是导出产物:他们的时间线编辑的是像素,而非时间跨度。每一个未来变更(新UI、不同缩放)都必须在素材上进行操作并重新导出——在交付时说明这一点。
  • 一个素材可以为多个不同尺寸的合成提供片段;按尺寸分别渲染,而不是让他们进行缩放。

Individual skills in this repo

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

launch-kit

Ship the media with the release — one take of the real product becomes YouTube demo, Chrome Web Store screenshots/tiles, Product Hunt gallery, social cuts, and OG cards; verified kit.json manifest.

vos-authoring

Author a vos animation program (VosConfigJson) from scratch or debug one — declarative configs compiling into deterministic Three.js + GSAP-dialect animations on the MIT vos engine (@vosjs/core), validated locally with compileVosConfig. Covers the schema, dialect rules, 2D overlay elements, shaders, and params/presets knobs. Use when asked to write a vos animation program, create a VosConfigJson, make a programmatic motion graphic or logo animation, or fix a config that fails to compile or lint.

vos-create

Create vos programs in the user

vosjs/product-video

Record and produce the demo video of a website, app, or feature with the vos CLI — the agent scripts the click path (actions.json), the recording auto-plans zooms, and every editing decision is data in doc.json, so fixes are edits and re-renders, never re-recordings. Renders are deterministic; export is free up to 4K with no watermark. Use when asked to make a product video, demo video, screen recording of a URL or feature, or a marketing clip, including a product behind a login (the session ladder: mint one from the project's own test auth before asking anyone), or when a feature was verified in agent-browser and that walk should become a take. A whole release's asset set (store listing, Product Hunt gallery, social cuts) is the launch-kit skill, which records through this one.

vosjs/vos-cut

Cut a screen recording (a vosso take) into the product video it was recorded for, from its evidence, with the vos CLI — read the take's digest (the moments the cursor track says mattered, each with a footage frame and a crop), narrate beats, edit doc.json by exception over the planners, verify with stills, and push an attributed version the human fine-tunes at vos.so; every edit is a data patch, so a re-cut never re-records. Use when asked to edit or cut a recording, make a product video or what's-new clip from a take, cut it like the last one, or cut a series of recordings in one style.

vosjs/vos-migrate

Turn an existing Loom, Screen Studio, Cap, or plain mp4/webm screen demo into an editable vosso take — re-encode the file, synthesize the take's metadata, plan, and push, so the old demo becomes a living document you re-cut instead of a file you re-record. Use when asked to "convert this Loom", "migrate our old demos", "re-edit this mp4", "make our Screen Studio recording editable", or to bring any already-recorded demo into vosso.

vos-remix

Remix a vos.so gallery program into your own — fetch its config, edit the declared knobs or code locally, validate with vos check, and push a private copy back with lineage that iterates as versions. Carries the params/Looks doctrine and the GLB 3D-showcase recipe. Use when asked to remix, customize or personalize a gallery animation, swap a 3D model into a showcase, or iterate a fetched program as versions.

相关技能