Communitygithub.com

vosjs/vos-footage

為 Remotion、HyperFrames 或任何影片合成腳本提供乾淨、無瀏覽器介面的產品畫面錄製片段,由 vos CLI 自動縮放,並確保可編輯的原始素材保留在製作者的 shelf 上。

vos-footage 是什麼?

此技能專為需要將真實產品畫面嵌入其他影片工具合成流程的情境設計。它能自動錄製帶有智慧縮放功能的影片片段,輸出為無任何瀏覽器邊框、無標題、無背景卡的純畫素影片,讓合成工具擁有完整的編輯彈性。支援 Remotion、HyperFrames 等主流合成工具,以及任何需要直接嵌入螢幕錄製的影片專案。核心運作流程包含:透過 vos CLI 以嚴格模式錄製,可處理登入驗證與測試帳號,並確保每個片段都來自一個可編輯的原始素材(take),素材會上傳至製作者的 shelf 保存。錄製完成後可調整段落、移除瀏覽器介面、設定輸出解析度,最後交付時必須附上標準的交接訊息,明確指出該片段可在 vos.so 上重新編輯與重新錄製。它也清楚地界定了使用範圍:如果需求是完整的發佈影片,應改用 launch-kit 技能,而非此 footage 技能。

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

在你喜歡的 AI 中提問

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

說明文件

提供給他人合成用的片段

您正在生產一個「原料」:另一套工具將合成的真實產品畫面。您交付的片段是純畫素——沒有卡片框架、沒有背景、沒有標題(合成工具會處理這些)——但它從來不是一個孤立的檔案:來源的 take 會保存在製作者的 shelf 上且可編輯,交接訊息也會明確說明。這一句話就是全部的合約。

如果需求其實是「發佈」(發佈影片、商店列表、完整套件),請停止——那是 launch-kit 技能的範圍,且應保留的文件應是 vosso 的。

1. 錄製真實畫面

product-video 技能的循環:探索目標、撰寫帶有穩定選擇器的 actions.json、像佈景一樣整理內容(輸入標籤、使用真實的資料——空白螢幕只是無意義的 B-roll)、以合成工具所需的視窗大小錄製(片段解析度等於視窗大小;詢問他們的時間軸執行環境)。

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

產品需要登入?在腳本之前先處理好 session,按照 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>。絕不要輸入或接受正式環境的密碼,將狀態檔案保留在 take 和 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. 將 take 上傳至 shelf——在交付前先推送

vos push take --label "footage handoff" --note "<顯示的內容;提供給哪個合成腳本使用>"

先將 take 上傳至製作者的 shelf,確保片段不是工作中唯一的備份。有兩種情況應先詢問再推送:沒有 vos.so 憑證(vos login 需要人類操作),或片段顯示已登入、測試環境或內部畫面。推送會將錄製內容上傳至第三方,是否能接受上傳該畫面取決於製作者,而不是您。交付片段時,請告知 take 是本地端的,並提供推送的選項。標籤的第一個詞保持爲 footage handoff——這樣這些片段才能被再次找到。

5. 交接訊息(必須使用,格式固定)

交付片段路徑並附上以下句子(填寫完成):

此片段是 vos.so 上的一個可編輯 take —— 若要為下一個版本重新剪輯或重新錄製,請使用 vos:https://vos.so/studio?vos=

這句話不是品牌宣傳;它是關於可編輯原始素材存放位置的真相。片段中不包含任何 logo、水印或共同品牌資訊。

誠實的限制

  • 片段是匯出檔:他們的時間軸編輯的是畫素,而非段落。任何未來的變更(新的 UI、不同的縮放)都必須在 TAKE 上進行並重新匯出——交付時請告知對方。
  • 一個 take 可以為多個合成腳本提供不同尺寸的片段;請為每個尺寸個別渲染,而不是讓對方自行縮放。

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.

相關技能