Communitygithub.com

Justice219/mobile-app-cinematic-video

使用真实 3D 手机模型、真实应用截图、旁白操作、同步高亮、极简文字、粒子效果和声音设计,构建电影级的移动应用演示视频。适用于应用编辑、功能演示视频及其修订。

mobile-app-cinematic-video 是什么?

此技能将一个真实的应用工作流转化为导演级的 3D 影片,利用内置的 Three.js、Playwright、FFmpeg 和 Python 生产模板。它是一个基于代码的可编辑视频工作流,而非 After Effects 项目。技能支持从现有项目或新项目开始,要求先检查现有导出、项目源码、用户反馈、运行时主题和可用数据,再进行创作。工作流包括:通过 Playwright 捕获真实应用组件(或使用虚拟夹具),编写旁白和动作 JSON 文件,调用 ElevenLabs API 生成语音(需授权后使用),并使用 FFmpeg 合成最终视频。该技能适用于 Claude Code、Cursor 等 AI 编程助手,以及任何能运行 Python 脚本的 AI 智能体平台。它强调保持与应用运行时的色彩一致、使用真实功能行为而非伪造屏幕、以及正确的时序和几何协调。最终输出包括 MP4、可选的 SRT/VTT 字幕、预览和可编辑源码,并严格遵守版权和许可要求。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Justice219/mobile-app-cinematic-video/tree/main

在你喜欢的 AI 中提问

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

文档

移动应用电影级视频

将真实应用工作流转化为使用内置 Three.js、Playwright、FFmpeg 和 Python 生产模板的导演级 3D 影片。这是一个基于代码的可编辑视频工作流,而非 After Effects 项目。

从应用和现有方向开始

  • 在创作前检查现有导出、项目源码、当前用户反馈、实际运行时主题和可用应用数据。保留已批准的选项。对于新项目,确定要演示的功能、目标受众、格式和可用的截屏。
  • 使用虚拟夹具或授权的录制来捕获真实的应用组件。测量实际的点击目标、滚动偏移和高亮边界。切勿用虚构的屏幕替换真实的功能行为并声称其为真实。在交付来源中标注仅限本机的可视化内容。
  • 匹配运行时的颜色。附带的示例调色板仅为默认值,并非其他应用的品牌。深色模式全屏、极少的编辑文字以及手机退出/品牌揭示是原始项目的偏好,如用户另有要求则可配置。

生产流程

阅读 references/workflow.md 了解生产方法以及脆弱的时序/几何细节。在进行或更新屏幕捕获时阅读 references/capture.md。在编写动作、摄像机姿态、滚动或文字时阅读 references/timeline.md。

  1. 对于新项目,从此技能文件夹运行 python3 scripts/scaffold.py /absolute/new/project。它会复制 assets/template 并创建标记清晰的合成演示屏幕。在实际交付前替换这些屏幕。对于现有影片,直接编辑其项目,而不要重新搭建脚手架。
  2. 在生成的项目中,按照仓库 README 中的说明安装 Node/Python 依赖项及 Chromium。根据实际应用主题、可选的自有字体和品牌图片/裁剪设置 project.json。当前渲染器目标为 1080×1920,30 fps,CSS 应用捕获为 430×860,DPR 为 3;更改宽高比需要协调的几何和坐标更改。
  3. 捕获工作流并编写 source/films.json。一次使用一个主要摄像机动作,快速触觉反馈,以及清晰的设置→动作→结果节拍。确保被旁白的功能在说话时可见。使用简短添加的文字进行强调;旁路字幕是单独的交付物。
  4. 编写 source/narration.json,仅在语音生成获得授权时使用 python3 source/narrate.py 生成缺失的旁白。通过进程环境提供 ELEVENLABS_API_KEY 和 ELEVENLABS_VOICE_ID。缓存 MP3/对齐对;切勿将机密信息放入源代码、截图、日志或 ZIP 文件中。失败的付费请求停止处理,不会自动重试。使用缓存的音频进行迭代。
  5. 使用返回的字符时间戳以及 0.65 秒混音偏移 来引导高亮、点击、摄像机焦点、文字和结尾。渲染预览帧,检查它们,然后渲染影片。模板支持 --preview、--only INDEX 和 --manifest PATH;混音/验证/打包使用 source/films.json。
  6. 运行 python3 source/mix.py。优先使用 assets/audio/sfx 中授权的音效库样本;缺失的样本使用原始的程序化备用方案。确保效果在语音下清晰可辨。模板将对齐瞬态峰值到动作,并在旁白下减弱效果。
  7. 运行 python3 source/verify.py,目视检查关键过渡和旁白时刻,并听取最终混音。自动化的暗帧/响度检查不能确认显示了正确的功能。检查字幕和所有承诺的文字。
  8. 在导出通过后运行 python3 source/package.py。在分享前检查归档的明确内容和媒体权利。交付 MP4、可选的 SRT/VTT、预览、可编辑源码和来源。发布、部署和发帖保持在用户请求的范围内。

保留这些不变项

  • 应用纹理使用 sRGB 且 toneMapped:false;场景照明不得改变应用颜色。
  • 高亮和滚动像素使用相同的测量滚动插值。滚动完成后图集保持活动;否则较短的滚动持续时间可能暴露空白区域。
  • 摄像机焦点在退出变换之前计算,以便摄像机不跟随离开的手机。在结束旁白期间及时开始品牌揭示;不要留下静止停顿。
  • 世界空间粒子具有深度测试和透视缩放。保持它们从属于应用内容。
  • 在 macOS 上显式使用 GPU(--enable-gpu --use-angle=metal),渲染确定性的时间 frame / 30,并使用背压将帧管道传输到 FFmpeg。
  • 不要将凭据文件、专有应用源代码、未经许可的字体/SFX 或客户数据复制到可重用的技能或公共仓库中。

可选的 scripts/demo_audio.py 创建用于离线管道烟雾测试的合成音调。它明确不是旁白,绝不能被当作完成的配音使用。

相关技能