cap-demo 实战用 Cap 技能把任意 URL 自动变成电影级 3D 产品演示视频【免费下载链接】CapOpen source Loom alternative. Beautiful, shareable screen recordings.项目地址: https://gitcode.com/GitHub_Trending/cap1/Cap本指南以 Cap 仓库中随cap agents install分发的cap-demo技能apps/cli/skill/cap-demo/SKILL.md为核心完整讲解它的运行机制、两种工作模式、五步 Agent 工作流、硬性剪辑规则与全部命令行参数。读完你可以直接对任意产品页 URL 执行cap-demo https://website.com理解每一步背后 scout、shoot、treat、export 四个阶段在源码中的真实实现并在需要时手动拆分各阶段进行逐帧质检与调参。这是什么URL 进、电影感演示视频出cap-demo是一个面向 Agent 的 Claude/Cursor/Codex 技能Skill。给它一个 URL它会产出一条短小、电影感的 3D 产品演示视频。整条流水线由以下环节串联Scout侦察以无头方式探测目标页面抽取标题、Hero 区域、CTA、品牌色与页面背景色Shoot拍摄启动一个有头浏览器只用虚拟输入CDP 鼠标/键盘绝不触碰用户真实光标驱动页面再用 Cap CLI 录制窗口画面Treat后期把录制交给 Cap 的 3D 相机运镜配上与品牌色匹配的背景渐变、合成光标轨迹与音乐Export导出调用 Cap CLI 导出 mp4 成品。编排器实现位于 cap-demo.mjs它把两个子阶段脚本串成一条链scout-shootlib/scout-shoot.mjs负责前两阶段treatlib/treat.py负责后两阶段。当前平台限制仅 macOS。本技能通过 Cap 的窗口捕获录制并解析缓存于~/Library/Caches/ms-playwright下的 Playwright Chromium这两点在当下都依赖 macOS。同时假定为 Apple Silicon内置 Chromium 路径为chrome-mac-arm64Windows/Linux 暂不支持。安装与目录结构cap-demo没有独立的 PATH 可执行文件——cap-demo命令本质上就是node skilldir/cap-demo.mjs。skilldir是SKILL.md被安装到的目录cap agents install会把它写到主cap技能旁边Claude~/.claude/skills/cap-demoCursor~/.cursor/skills/cap-demoCodexCODEX_HOME/skills/cap-demo默认~/.codex/skills/cap-demo技能目录内除SKILL.md外还包含编排器与两个子阶段脚本、随附的光标资产和音乐库apps/cli/skill/cap-demo/ ├── SKILL.md # 技能说明与 Agent 配方 ├── cap-demo.mjs # 编排器scoutshoot - treatexport ├── lib/ │ ├── scout-shoot.mjs # 侦察 虚拟输入拍摄 │ └── treat.py # 对齐/剪辑 3D 运镜 渐变 光标 导出 ├── assets/ │ ├── music/ # 4 首随附音乐 mp3 │ └── cursor_0.png、cursor_2.png、cursors.json # 合成光标资产 ├── package.json # 仅依赖 playwright-core ^1.62.1 └── package-lock.json如需别名可自行添加alias cap-demonode skilldir/cap-demo.mjs运行前提RequirementsApple Silicon 上的 macOS见上文平台限制Node 18且playwright-core已安装到技能目录内——首次使用在skilldir下执行一次npm install。它复用已缓存的 Chromium~/Library/Caches/ms-playwright若无缓存先执行一次npx playwright install chromiumpython3与ffmpeg/ffprobe需在 PATH 上capCLI需在 PATH 上来自 Cap Desktop需为其授予 macOS屏幕录制权限。两个子阶段脚本都会按CAP_BIN环境变量 → PATH 上的cap的顺序解析二进制两者都缺失时给出明确报错。若技能目录缺node_modules/playwright-core编排器会直接失败并提示在目录内运行npm install见 cap-demo.mjs。一行命令上手cap-demo https://website.com产物落在outDir/slug-demo.mp4默认outDir为tmp/cap-demo/slug其中slug默认取 URL 主机名去掉www.后的短横线形式由 cap-demo.mjs 的slugFromUrl生成。两种工作模式确定性 vs Agent 驱动cap-demo提供两条质量路径确定性模式cap-demo url固定启发式无 Agent 介入循环。自动为 CTA 打分、选择 click-through 还是 scroll 叙事、依据页面配色绘制品牌渐变、按品牌明暗挑选音乐。质量“够用”文档约 70%适合批量运行或无法人工盯帧的场景。Agent 驱动配方推荐约 95% 质量Agent 逐步执行相同步骤但每阶段做帧级 QA 并运用判断力——凭肉眼设定品牌色、让导出 fps 匹配真实采集帧率、遇到死胡同 CTA 重拍、反复调色直到节拍可读。官方随技能发布的演示视频均出自该路径。需要说明70%/95% 的量化来自技能文档自身的经验性表述为作者内部评估口径非基准测试结论。Agent 配方五步工作流建议手动分两阶段运行便于中间检查。两个脚本都位于技能目录内编排器只是把它们串起来。1. Scout Shoot侦察与拍摄node skilldir/lib/scout-shoot.mjs url outDir slug [--story click|scroll]把录制写入outDir/slug.cap把节拍日志写入outDir/slug.timeline.json末尾打印一行机器可读 JSON{slug,story,scout:{title,hero,accent,pageBg,ctaText}}读取它即可了解脚本的决定叙事、所选 CTA、品牌色脚本已经自动完成杀掉残留的 test-chrome、关闭 Finder 窗口、驳回 Cookie 横幅、注入 shimmer 元素、按页面精确标题匹配捕获窗口断言唯一匹配、记录虚拟光标路径。从源码看scout-shoot.mjs 的实际执行顺序是先pkill清理Google Chrome for Testing进程、用 osascript 关闭 Finder 窗口避免残留窗口与桌面合成进捕获画面底部见 L85-L93随后启动headless: false的 Chromium窗口 1560x1000、位于 120,60禁用--enable-automation与AutomationControlled页面load后等待 2.6s再用正则匹配点击 Cookie/consent 横幅accept/accept all/agree/dismiss等关键词见 L110-L123。一个值得展开的工程细节shimmer 点。窗口捕获在静态像素上会冻结时间戳导致视频时钟停摆。脚本向页面注入一个 3px、2% 透明度、在角落做 2px 轨道运动的小圆点__cap_shimmer——人眼不可见编码器却看得见从而保证画面持续产生帧L143-L161并在每次导航后重新注入。Scout 的打分逻辑决定了叙事质量CTA 文案命中内容词how it works/features/product/docs等加分命中转化词try/sign up/book/download/request a demo等重罚跨域外链、login、/blog与/careers等路径均扣分实底filled背景、宽度大于 110px、位于视口中部 120px~85% 的候选再加分L188-L228。页面背景色按body → html → main/header/section顺序取第一个非透明背景。虚拟输入与窗口匹配光标全程通过 CDP 的page.mouse.move/down/up驱动并用 easeInOut 缓动函数t*t*(3-2t)模拟人类滑移轨迹全程不触碰真实鼠标L276-L295。录制目标通过cap record windows --json枚举窗口按页面标题精确匹配 Chrome for Testing 窗口只有一个候选窗口时兜底取它L298-L312。随后执行cap record start --detach --window id --fps 60 --path project开始后台录制L314-L330该参数族与 record.rs 中--window/--fps/--detach的解析一一对应。Story 选择。大多数站点交给自动判断即可有强内容 CTA →click否则scroll。对适合以整页滚动展示的单页产品站或顶部 CTA 通向 booking/登录死胡同时强制--story scroll。2. 对原始录制做帧级 QA在后期之前抽出几个关键帧并肉眼检查ffmpeg -y -ss t -i outDir/slug.cap/content/segments/segment-0/display.mp4 -frames:v 1 /tmp/raw-t.png检查点捕获的是否为正确窗口/内容没有上次拍摄的残留画面无 Cookie 横幅漏入CTA 点击没有死在 booking 日历或登录表单结尾干净没有桌面或 Finder 窗口泄入捕获底部。任何一项不对就换--story scroll或更好的地标重拍不要浪费一次导出。3. Treat Export后期与导出python3 skilldir/lib/treat.py outDir slug [--music ID] [--quality 4k|hd] [--bg-gradient FROM_HEX,TO_HEX]把节拍对齐到视频尾部锚定视频可以比事件日志短——绝不能盲信事件时间见 treat.py 的offset计算与v()的钳制裁剪死时间把三段 3D 镜头对准日志中的地标绘制品牌渐变依据随附光标资产合成光标轨迹复制音乐导出 mp4。按肉眼设定品牌背景。当站点是渐变密集或浅色/粉彩风格时getComputedStyle会“说谎”例如一个看起来白底淡紫点缀的站点可能被采样成黑色。请查看原始帧手动传入--bg-gradient FROM_HEX,TO_HEX浅色站点 → 柔和浅渐变深色站点 → 品牌色相的深色渐变。treat.py 的brand_gradient()treat.py在无覆盖参数时会用 HLS 空间的亮度/饱和度钳制把 accent 色与页面背景色调制成 135° 渐变--bg-gradient则直接解析FROM_HEX,TO_HEX两个 6 位十六进制色并生成同样的渐变结构treat.py。导出 fps 要匹配真实采集帧率。cap record --detach可能晚介入且窗口捕获在静态像素上会停滞时间戳因此真实帧率常常是约 58 而非 60。用以下命令核实避免 58-vs-60 的抖动ffprobe -v error -select_streams v:0 -show_entries streamnb_frames,duration -of csvp0 cap/content/segments/segment-0/display.mp4然后仅在采集确实接近 60 时才传--quality hd60fps否则保持源码率省略--quality。treat.py 的source_fps()treat.py正是这个思路的自动化版对相邻帧时间差取瞬时帧率众数窗口捕获是 VFR均值会被导航/动画停顿拉低众数才是平滑段的真实帧率再钳制到 [2, 60] 区间。4. 对导出结果做帧级 QA必要时重新调色从outDir/slug-demo.mp4抽 4 个节拍帧查看每个节拍是否可读打字镜头是否对准文本输入点而非输入框中心无窗口/桌面泄入fps 干净音乐淡入淡出自然。若某个镜头太紧或瞄准偏移调整后重新导出。参考 3D 机位是在全桌面捕获上调校的浏览器窗口捕获会填满卡片更多空间距离可能偏紧约 30%——这种情况下把 zoom 往回收。5. 交付把outDir/slug-demo.mp4交付出去。硬性剪辑规则每次都要遵守技能文档定义了一套必须编码进每次生成的编辑规则源码中均能找到对应实现总长上限 12 秒。超长时均匀削减尾部——treat.py 在DUR 12.0时把第二个剪辑段的尾部等量剪掉treat.py。相机切换必须伴随内容切换。每次 3D 视角变化都落在不同区块/页面——镜头边界正好落在剪辑切点或滚入新内容的时刻。绝不中途空转切相机。三段 3D 镜头camera3dSegments的时间边界(0, clip_cut)、(clip_cut, b2)、(b2, DUR)与两段剪辑cutA/cutB严格对齐treat.py。在动作上剪辑剪掉死时间。在点击处剪加载完成后接修剪页面加载与 loading 帧绝不让模糊上浮或 spinner 泄入镜头尾部。两个剪辑段分别从 hero 开场click 事件前 0.25s 起点击后 0.4s 内收与页面就绪后 0.5s 起、到vdur-0.05收尾clamp_cut强制区间向前推并保证最小 0.4s 时长treat.py。瞄准内容而非容器。镜头瞄准地标hero、被点击的 CTA、目标页标题不做机械平移虚化焦点跟随瞄准点。每个机位的panX/panY由aim_pan()依据地标分数换算而来radial 虚化的focusX/focusY与瞄准点绑定treat.py。单一运镜体系。所有强调都在 3D 镜头里完成dolly-in 就是点击的“重音”绝不在 3D 镜头上叠加 2D zoom 段两套体系会互相打架、观感生硬。zoomSegments始终为空数组treat.py。全程不碰真实输入。只用虚拟输入用户真实光标/鼠标永不被移动。画面上的光标由记录的滑移路径在后期合成——treat.py 从timeline.json的cursorLog生成content/segments/segment-0/cursor.json并把随附的cursor_0.png/cursor_2.png复制进项目、把光标元数据写入recording-meta.jsontreat.py从而覆盖任何 Cap 记录的杂散真实光标数据。光标资产定义在 assets/cursors.json0为 macOS Tahoe 箭头、2为 Tahoe 手型各自带 hotspot 坐标。参数速查Options reference编排器cap-demo url [flags]参数说明--out DIR输出目录默认tmp/cap-demo/slug--slug NAME项目 slug默认取 URL 主机名短横线化--music ID音乐轨 ID见下方曲库。默认按品牌明暗自动选择深色 →lofi-cinematic-pulsebox浅色 →sunday-mood-lofi-cafe-upbeat-bluelike--quality 4k\|hd4k 3840x2160 / 60fps / maximum / 文件体积优化hd 60fps / maximum。省略则用源码帧率默认--story click\|scroll强制叙事默认自动参数校验逻辑可见 cap-demo.mjs--quality仅接受4k|hd--story仅接受click|scroll非法值直接报错退出。导出阶段的--quality会映射为 Cap CLIexport的--resolution 3840x2160 --quality maximum --optimize-filesize4k、--quality maximumhd等参数组合与 apps/cli/src/export.rs 中--fps/--resolution/--quality/--optimize-filesize的参数解析仅 mp4 支持文件体积优化对应。lib/treat.py手动运行时额外支持--bg-gradient FROM_HEX,TO_HEX— 按肉眼覆盖品牌渐变例如浅薰衣草E4DCF8,C6BAEA或深紫261A40,0C0914。随附音乐曲库premium/深色/浅色/moody 的覆盖组合lofi-cinematic-pulseboxmoody/premiumlofi-hip-hop-leberch深色sunday-mood-lofi-cafe-upbeat-bluelike浅色/明快lofi-smooth-pulsebox浅色/流畅音乐只从技能随附的assets/music/id.mp3解析未知 ID 直接报错见resolve_music()treat.py。音乐会以 0.5s 淡入、1.5s 淡出、音量 0dB 的方式切成音频段treat.py。二进制解析两个脚本一致Cap 二进制 环境变量CAP_BIN→ PATH 上的cap→ 清晰报错Chromium ~/Library/Caches/ms-playwright/chromium-*中最新缓存构建macOS否则回退到固定版本chromium-1228scout-shoot.mjs。开发工具/打字演示的特写变体closeup对带有实时终端或代码画面的开发工具类站点定制故事板优于通用 click-through侦察时寻找[class*terminal]/pre/code元素逐个滚到居中驻留约 2.7 秒——实时终端的动画就是免费的运动特写镜头配方轻微俯仰tiltX10–13、tiltY9–13、rotateX-4保证文字清晰紧致的慢推近景zoom 0.72–0.82虚化焦点锁定在元素上focusX 元素分数坐标、小的focusSize≈ 0.55保持单一连续片段不做剪辑切点让滚动保持顺滑——剪辑只属于 3D 镜头打字镜头瞄准文本输入区而非输入框中心当某站点值得定制时以lib/scout-shoot.mjs为基座重建专属拍摄脚本复制一份新文件来改不要用 sed/splice 直接改镜头数组——重叠的偏移量会损坏文件。与 Cap 技能生态的衔接cap-demo由cap agents install与主cap技能apps/cli/skill/cap/SKILL.md并排安装。主技能是 Cap 所有任务的“路由规则”凡涉及 Cap 的能力一律优先走本地 MCP 工具或capCLI如cap record start --detach --screen id、cap project validate、cap export、cap upload的录制-验证-导出-上传生命周期以及cap guide --json提供的权威命令契约而不是用浏览器自动化去操作 Dashboard。cap-demo正是这条“CLI-first”哲学在内容创作侧的落地——它在拍摄阶段调用的正是cap record start --detach --window id --fps 60这套官方 CLI 接口录制产物/content/segments/segment-0/display.mp4、recording-meta.json、project-config.json都是 Cap 项目文件格式的原生组成部分。写在最后一次完整实战的时序回顾一次cap-demo url的全过程可概括为编排器解析参数并计算slug与outDircap-demo.mjs→ 阶段一运行scout-shoot.mjs完成清理、探页、CT 点击/滚动、cap record start --detach拍摄并写出.cap与.timeline.json→ 编排器解析 scout 输出中的 JSON 决定音乐默认按页面背景明暗二选一见 L121-L128→ 阶段二运行treat.py做尾部锚定对齐、双段剪辑、三段 3D 镜头、品牌渐变、光标合成、音乐嵌入最后cap export导出${slug}-demo.mp4。如果想要最高质量则按上文五步配方手动拆开执行在每两个阶段之间用ffmpeg/ffprobe抽查关键帧用--bg-gradient与--story干预结果直到节拍读起来顺、画面干净、fps 不抖为止。【免费下载链接】CapOpen source Loom alternative. Beautiful, shareable screen recordings.项目地址: https://gitcode.com/GitHub_Trending/cap1/Cap创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
