LiliLIN0324

Web Demo Video Skill — Development skill for Claude Code

Development community

演录 · 把网页 demo 录成 1080p 演示视频的 agent skill（Qoder / Codex / Claude Code / Gemini / Grok / DeepSeek）：可见鼠标、真实点击、逐帧可控、可选声轨.

How to install Web Demo Video Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open LiliLIN0324/web-demo-video-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Web Demo Video Skill does

演录 · 把网页 demo 录成 1080p 演示视频的 agent skill（Qoder / Codex / Claude Code / Gemini / Grok / DeepSeek）：可见鼠标、真实点击、逐帧可控、可选声轨。

Alternatives in Development

Petdex — A public gallery of animated pets for Codex, Claude Code, DeepSeek Harness, Hermes, OpenCode, Gemini CLI, and 4k ★
Agent Of Empires — Manage multiple Claude Code, OpenCode agents from either TUI or Web for easy access on mobile 3.1k ★
AutoSwarm — AutoSwarm: All Your Agents, Working as One (Codex · Claude Code · DeepSeek Harness · Muse · Grok · WorkBuddy· 1.9k ★

README

演录 · web-demo-video

**把网页 demo 录成能直接给人看的 1080p 演示视频**

真实鼠标轨迹 · 真实点击 · 逐帧可控 · 可选声轨

[![version](https://img.shields.io/badge/version-0.1.0-111111?style=flat-square)](CHANGELOG.md) [![license](https://img.shields.io/badge/license-MIT-2ea44f?style=flat-square)](LICENSE) [![node](https://img.shields.io/badge/Node.js-18%2B-339933?style=flat-square&logo=nodedotjs&logoColor=white)](package.json) [![chrome](https://img.shields.io/badge/Chrome-system-4285F4?style=flat-square&logo=googlechrome&logoColor=white)](#依赖) [![stars](https://img.shields.io/github/stars/LiliLIN0324/web-demo-video-skill?style=social)](https://github.com/LiliLIN0324/web-demo-video-skill/stargazers)

[快速开始](#快速开始) · [工作方式](#工作方式) · [实测效果](#实测效果) · [English](README.en.md)

点图片看完整成片（42 秒，带合成配乐）。案例站点：推鉴 · AI 营销助手（ModelScope Studio）。

它解决什么

录一个网页 demo，通常卡在三件事上：

录屏软件在低帧率页面上掉帧——页面本身 7fps，鼠标像在飘；
点击后的白屏、骨架屏被原样录进去——成片里全是 loading；
页面没有声音，或者声音和操作对不上——点击声总是慢半拍。

这个 skill 换了个思路：**不录屏，逐帧拍。**

用系统 Chrome 打开页面，脚本按 30fps 驱动鼠标、滚动和相机，每帧截一张图；点击通过 CDP 真实派发，页面自己的 hover、筛选、跳转逻辑全部照常工作。最后用 ffmpeg 把帧和一条合成音轨拼成视频。

所以：页面再卡，成片也是顺的；加载多久，剪掉就是；要不要声音，都可以做。

实测效果

一个真实案例：ModelScope Studio 上的「推鉴 · AI 营销助手」，从登录一路走完创建向导、侧栏快览，直抵已完成成品。

![storyboard](assets/storyboard.png)


成片时长	42 秒
分辨率 / 帧率	1920×1080 / 30fps
真实操作	16 次点击、1 次平滑滚动、10 个页面状态
缩放运镜	开场推近 + 2 次区域 punch + 结尾拉远
宿主环境	iframe 内嵌应用（ms.show），外层水印/悬浮件已处理
白屏 / 骨架屏	0 帧（路由加载全部剪掉）
声轨	全合成配乐（126 BPM，点击帧对齐 tick），-15 LUFS

特点

能力	说明
点击不会丢	按下 → 90ms → 松开，期间不移动指针、不截图。锚点、筛选 chip、地图列表行都能稳定点中
加载剪干净	路由骨架屏期间停止采集，成片直接切到新页面，而不是快进一段 loading
iframe 也能录	ModelScope Studio 这类外层包装：直接操作 app frame，并隐藏水印与悬浮客服
颜色不偏	显式 full→tv + bt709，成片不会比网页原图更亮更艳
看得见的鼠标	注入 32px 指针 + 点击涟漪，`pointer-events:none`，不挡真实点击
缩放运镜	`