Communitygithub.com

vos launch-kit — 一镜 → PH/商店/社媒全套

vosjs 技能:跟发版一起出媒体。真实产品一镜变成演示片、商店上架图(截图/瓷片/横幅)、Product Hunt 画廊、社媒剪辑与 OG 卡——每个渠道规格都写进 kit.json 并校验。

商店/社媒全套 是什么?

Launch Video 配方第 3 步(出货):一镜成片 → YouTube 演示+封面、X/LinkedIn 竖版、Chrome 商店截图、Product Hunt 画廊、README 循环、OG 卡——kit.json 逐项验收。

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

在你喜欢的 AI 中提问

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

文档

Launch kit — 随发布一同交付媒体

你正在制作一个发布的媒体,而非一段视频:已发布功能的一次录制会成为该发布所需的所有素材,按目标渠道编排、调整大小和验证,并保留为可编辑的文档,以便下一次发布只需重新渲染,而非重新拍摄。一切都是数据;预览即渲染;导出免费,最高支持 4K 分辨率,无水印;引擎采用 MIT 许可。

该工具包通过一个动词 vos deliver 渲染,源自承载品味的文档:每一张卡片都是一份 POSTER 文档(一个简单的录制,卡片放置在海报需要的位置,文字和标记作为片段),每一个剪辑播放由 vos plan 提出并放入其文档的运动(入场、结束卡片、字幕、背景音乐),静止画面来源于故事,两个验证器用文字指出错误。deliver 不进行任何合成。你的判断体现在三个文件(BRAND.md、LAUNCH.md、actions.json)、一个选择(卡片遵循架子上的哪张海报)和一个决策(哪些时刻构成故事),而不是手动裁剪。

设置

npm i -D @vosjs/cli    # vos CLI(包含录制流程)

PATH 中的 ffmpeg 负责处理 CLI 未输出的内容(PH 鼠标悬停 GIF),并允许 vos validate --picture 读取视频的首帧和末帧。MP4 渲染需要系统 Chrome(--format mp4)。

1. 确立发布

在开始任何录制前,需要明确五个事实:

  • 已发布内容 — 功能、版本字符串、运行该功能的 URL。

  • 目标渠道 — 每个渠道的规范表格作为数据提供: node_modules/@vosjs/cli/schema/channel-specs.json(CWS、Product Hunt、 X、LinkedIn、GitHub、OG、YouTube;包含尺寸、数量、字节和时长上限、 文字政策、每个渠道的安全矩形,以及每个图像的 GENRE:screenshot 是真实页面,card 是海报文档的一帧;references/channel-specs.md 是相同数据的表格形式)。遍历它,绝不要手动输入尺寸。询问本次发布需要发布到哪些渠道;默认使用上次发布的渠道集。JSON 中包含 verified 日期;如果超过一个季度,在发布前要抽查渠道文档。

  • 品牌 — 在制作任何素材之前解决品牌问题,绝不要默认使用布局的自有调色板。项目文件夹中的 BRAND.md 是品牌工具包(frontmatter 包含色彩角色 bgA bgB bgC ink accent、字体角色 fontDisplay fontBody、logoUrl(纯标记,不可平铺图标)、wordmark 和 look,即网站自身背景要求的呈现方式:纸质网站用 plate,深色网站用 dark,否则用 gradient)。如果缺失,vos brand <url> 会从网站的 /design.md、/llms.txt 和页面本身中提取品牌信息,并写入每个角色及其来源;阅读后,纠正页面无法表达的内容,并使用 vos recipe push BRAND.md --folder <slug> 归档。将其放置在录制的旁边(或录制的父文件夹中):plan 和 deliver 无需任何标记即可读取它。

  • 文字内容 — 录制旁边的 LAUNCH.md 在其 frontmatter 中承载发布角色,无需标记即可读取:

    headline: "两到六个词\n最多三行"   # 海报和结束卡片
    kicker: "产品名称  V2.1"       # 缺失则使用 wordmark 加上 --release
    music: upbeat                 # 目录 slug 或氛围;无则为静音
    entrance: tilt-in             # tilt-in | pull-out | rise | none
    endCard: on                   # 官方结束卡片模板;none 关闭;标题、vos id 或 doc.json 指定其他模板
    with: "Split cover, landscape@end"   # 可选:任何模板放置在锚点处(@end | @start | @step:<id> | @<seconds>)
    captions: on                  # none 关闭节拍字幕
    poster: poster/landscape      # 可选:每张卡片渲染的文档
    poster-tile: poster/tile      # 可选:独立命名的类
    

    标题是发布要传达的一行文字;使用 \n 分多行书写。vos plan 在提出剪辑的运动时读取运动角色,plan --style 将文字键入海报;deliver 仅读取 poster 角色,若无,则在录制旁边查找 poster/<class>/doc.json。

  • 布局 — 卡片将遵循的海报,位于架子上。vos.so 上的官方 海报系列 项目包含每种宽高比类别(横屏、正方形、竖屏、平铺)的示例及其 POSTER.md,说明何时使用该类别;制作者自己的项目具有相同结构。vos folder pull poster-families 列出它们及其 vos ID。没有布局名称,也没有 --layout 标记:示例本身就是布局,通过数据复制。

目标渠道决定了视口,在任何录制之前:素材分辨率 = 视口,1280×720 的录制无法诚信地填满 1920×1080 的视频规格。对于 1080p 工具包,按 1920×1080 录制;当目标渠道更大时,按 2560×1440 录制。

如果作品置于 vos.so 项目(文件夹)中,先拉取它并读取其中的每个 .md 配方 — LAUNCH.md 绑定此循环,如同 CUT.md 绑定剪辑,POSTER.md 绑定海报。配方会覆盖本技能默认设置。

2. 素材来源:真实产品的一次录制

工具包源自产品,而非模型(商店政策同意:误导性的列表图像是导致移除的违规行为)。

录制前像布景一样布置内容。 优质发布图像与屏幕截图之间的区别,一半在于屏幕上的内容。在任何海报或商店静止画面被剪辑之前,actions.json 必须使产品处于自豪截图所展示的状态 — 标签已键入、数据看起来真实、功能正在展示。deliver 会丢弃空白时刻(壁纸、空白画布)并说明原因,但它无法为你布置场景。

将故事写入 actions.json。 为步骤指定 id(时刻和重新渲染循环通过它来引用)和 caption(当节拍值得时,两到八个词;plan 将其作为该步骤时刻的下三分之一字幕提议,适用于带文字的视频片段)。在导致导航的点击之后,添加 wait 等待加载:静止画面在该等待结束时读取,因此帧显示页面,而不是加载动画。

  • 新录制:product-video 技能的循环(探索 → actions.json → vos record --strict → 调整 doc.json)。将 actions.json 保留在仓库中 — 它是下一次发布的脚本。
  • 已发布功能需要登录:在脚本开始前,通过 product-video 技能的阶梯解决会话问题(完整版见 https://vos.so/llms-full.txt 的 "Sessions" 部分):从仓库已有的测试身份验证中生成一个,否则在镜头外通过表单脚本实现,否则由人登录一次(vos session open <url> --name <app>,然后 --session <app>),否则他们使用扩展程序录制,你再进行剪辑。使用 --storage-state <file> 录制。每次发布都会重新录制每个版本,因此优先选择无需人工干预的层级:这才是下一个版本仍能正常工作的那个。绝不要输入或接受生产密码;将会话状态文件保留在录制和 git 之外;使用演示账户录制,因为商店列表显示真实客户数据是导致移除的错误。
  • 已有录制:使用 vos-cut 技能剪辑。托管的录制可通过 vos fetch <vosId|watch-url> --out dir --media 下载到本地。
  • 已拍摄产品的新版本:使用 vos record 重新录制到同一个录制中(素材被替换,剪辑保留为 doc.prev.json),然后 vos plan take --reuse 将剪辑重新匹配到新录制,并说明哪些无法跟随。绝不要从头开始;每次修复都是对 doc.json 的编辑。

在其他地方渲染的运动图形片段是输入:它以媒体叠加片段或背景的形式放入文档,而不是反过来。

3. 海报和运动,作为文档

剪辑通过数据移动。 新的 vos plan 根据 LAUNCH.md 中的角色将剪辑的运动提议到 doc.json:卡片的入场、结束卡片(vos.so 上的官方 End card 模板,放置在末尾:卡片在一秒钟的冻结其最后一帧后淡出,然后标记、标题逐词呈现、发布行和 URL 落定;其片段标记为 from: endcard)、通过 with: 命名的任何模板位于其锚点、每个步骤的字幕、背景音乐以及在录制无麦克风时每个按键的点击声;每个提议都带有稳定 ID(bed、click-<n>、caption-<step>)。在已有剪辑上使用 --motion 会重新提议;刷新不会,因此删除的结束卡片保持删除。模板是架子上简单的录制,其片段带有稳定 ID;引用是官方架子上的标题("End card"、"Split cover, square")、vos ID 或磁盘上的文档。在工作室内打开录制,所见即所得,即工具包渲染的结果。

vos plan take --motion --release v2.1

海报是一个文档,一个简单的录制:卡片通过 frame.inset 放置(负值使其边缘出画),通过倾斜轨道的静止姿态倾斜,文字和标记作为具有稳定 ID(stage-title、stage-kicker、stage-brand、stage-mark)的叠加片段,以及在最后一个片段上的尾部 hold,其 START 为静止画面。为发布所需的每个宽高比类别(横屏、正方形、竖屏、平铺)制作一个,每个都使用录制本身的素材:

cp -r take poster/landscape            # 或 vos duplicate <take vosId>,然后 fetch --media
vos plan poster/landscape --style <poster vosId|doc.json> --headline "…" --kicker "…"
vos frames poster/landscape --frame <rest>; vos validate poster/landscape
vos push poster/landscape --folder <project-slug> --label "poster, landscape"

plan --style <poster> 复制 LAYOUT(卡片的位置和呈现、舞台片段(替换为来自 LAUNCH.md 或标记的发布文字)、其余倾斜、hold)到录制上,并保留录制自身的宽高比、chrome 和剪辑;品牌标记来自 BRAND.md 的 logoUrl,被拉取到 brand/ 中用于 stage-mark;并说明哪些无法跟随。将片段缩小到关键时刻(缩放顶点、点击后的稳定响应),以便其余部分是功能,而不是开场;产品可以在卡片内继续播放,直到 hold。然后查看静止帧:海报在推送前需要肉眼判断。人在工作室内打开它,拖拽卡片,重新输入文字,移动 hold;vos pull --media 将其拉回,下一次发布使用相同的 plan --style 从其自身推送的文档中重新输入文字。

4. 交付

vos deliver take --to cws,producthunt,x,linkedin,og,github,youtube --release v2.1

一次通过,动词决定你过去手动决定的事项:

  • 时刻。 静止时间源于故事:每个步骤的结束加上稳定时间(点击后的等待结束),然后是缩放顶点,然后是分布。每个候选者作为真实页面被读取一次;空白被丢弃,相同帧的两个合并为一个,每次丢弃在 skipped[] 中说明。--times step:<id>[+offset] 指定一个。
  • 截图 是真实页面,全出血:商店静止画面和图库默认丢弃剪辑的缩放、倾斜和 chrome(--composed 保留它们,并且图片检查会拒绝

Individual skills in this repo

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

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-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.

相关技能