Communitygithub.com

product-video

使用 vos CLI 錄製並製作網站、應用程式或功能的產品展示影片。代理程式編寫點擊路徑腳本 (actions.json),錄製時自動規劃縮放,所有剪輯決策皆儲存為 doc.json 數據,因此修正僅需編輯與重新渲染,無需重新錄製。渲染結果具備確定性,最高可免費輸出無浮水印的 4K 影片。

product-video 是什麼?

這個技能旨在透過 vos CLI 將產品展示影片的製作流程自動化,提供一個完整、確定性且可編輯的管道。當使用者要求製作產品影片、展示影片、螢幕錄製或行銷素材時,代理程式會引導編寫一個描述點擊與互動路徑的指令稿 (`actions.json`)。錄製時,系統會自動規劃縮放與鏡頭運動;錄製後則產生一個 `doc.json` 檔案,其中包含所有的剪輯決策。核心優勢在於「編輯數據,而非重新錄製」:若需調整節奏或縮放,只需修改 `doc.json` 並重新渲染即可,這使得持續迭代與協作變得格外順暢。此技能支援從「登入後產品」的錄製(提供完整的憑證處理流程)到將已驗證的 `agent-browser` 執行轉換為影片腳本的無縫整合。最終輸出為確定性的 MP4 或 WebM 檔案,最高可達 4K 解析度且無浮水印。對於需要製作多種格式資產的大規模發布,可與 `launch-kit` 技能搭配使用,後者會呼叫此技能進行核心錄製。

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

在你喜歡的 AI 中提問

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

說明文件

產品影片(及其相關資產),端對端流程

您正在製作一個可發佈的產品資產——一部精美影片、一組精確尺寸的靜態截圖,或兩者兼具——來源是一個即時網頁,使用 vos CLI。 一切都是數據:您編寫流程腳本,CLI 負責錄製與規劃,您調整 JSON 參數,然後重新渲染。絕對不要為了修正節奏或縮放而重新錄製——只需編輯 doc.json 並再次渲染即可。 品質標準:請遵循 references/taste.md —— 依照其品質循環,並以多模態方式判斷靜態截圖。

設定

npm i -D @vosjs/cli

一個命令,一個套件:@vosjs/cli 是開源 (MIT) 的 vos 二進位檔,包含引擎動詞、此處使用的錄製管線(螢幕錄製的 record / plan / frames / render)以及 vos.so 平台動詞。(在 0.9 版本之前,錄製管線是作為 @vosso/vos-plugin 單獨發布的;若專案中仍列出它,則可將其移除。)

需求:

  • 一個 Chromium 瀏覽器:系統 Chrome 會被自動找到;否則執行 npx playwright install chromium 或將 VOS_BROWSER_PATH 指向一個瀏覽器。 退出碼 3 表示未找到瀏覽器。
  • 渲染時需有網路連線:渲染頁面會從 esm.sh 載入 three/mediabunny。錄製時也需要能連線到目標 URL。 完全離線的沙盒環境無法進行渲染——請直接告知,而非輸出空無一物的結果。

慣例:日誌輸出到 stderr,結果輸出到 stdout;使用 --json 會輸出以換行分隔的 JSON 資料流 (NDJSON),並以 `{

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/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-footage

Hand a Remotion, HyperFrames, or any video composition a clean captured clip of the real product — recorded and auto-zoomed with the vos CLI, delivered as full-bleed footage with no chrome, and always backed by an editable take on the maker's shelf, which the handoff says. Use when a composition needs real product footage, app or site b-roll, "capture our app for the video", or a screen-recorded segment to drop into another tool's timeline.

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.

相關技能