用途：为网站和 SaaS 应用生成产品演示视频。该技能会先扫描目标 Web 项目源码，提出叙事角度与自定义场景，再用共享动画原语（BrowserFrame、AnimatedCursor 及 Web 专用 UI 样机）逐个编写定制的 .tsx 场景文件，而非套用配置模板。
主要能力：提取并确认项目上下文（支持复用 appshot-video/.appshot-context.json 缓存）。提供五种叙事角度：Persona story、Flywheel、Before/After split、Speed demo、Feature tour，并附适用场景与时长建议。按内容动态计算时长（基础为场景数×6s，按交互、简介、CTA、计数器动画增减，最终限制在 20–60s）。可选浅色或深色浏览器外壳主题，可从内置 8 首免版税曲目中选背景音乐，并按产品类别推荐曲目。产出逐场景表（视觉、字幕、原语、交互），最终渲染 1920×1080、30fps 视频。
使用方式：流程严格分阶段并设关卡，各阶段须经 AskUserQuestion 确认后才能继续，写代码不早于 Phase 3。Phase 1 提取确认；Phase 2 创意方向（角度、时长、主题、音乐、场景拆解、文案）；Phase 3 参照 code-guide-web.md 编写代码，可选截图回退；Phase 4 启动 Remotion Studio 预览迭代，先关闭开发服务器再进入下一步；Phase 5 用 npx remotion render [CompositionId] out/[CompositionId].mp4 --codec h264 --crf 18 --pixel-format yuv420p --color-space bt709 渲染并交付。另有 --quick 快速模式，自主决策后合并 Phase 1-2 供一次性确认。
适用场景：落地页主视觉视频、产品演示、多页面功能展示；单个视频建议 45 秒内，CTA 至少显示 3 秒。
限制：仅面向 Web 平台项目（若缓存标记为移动应用会提示重扫）；不使用模板配置，每个项目从零编写场景文件；画布固定 1920×1080；未提供具体收费、价格或跨平台支持信息。