SuperAPI AI 工具集

appshot-videos

设计与创作

查看项目

更新于 10-16 02:02

技能介绍

Appshot Videos 是一个为 App Store 与 Google Play 生成应用预览视频的工具,基于 Remotion 实现。它的核心特点是充当“预览视频的创意总监”:扫描目标应用的源代码,提出带有定制场景的叙事方案,并使用共享的动画原语从头编写专属的 .tsx 场景文件。它不填充配置模板,而是为每个项目从零编写自定义场景。

【工作流程】 工具强制按固定阶段顺序执行,每个阶段结束时会调用 AskUserQuestion,用户未响应前不得进入下一阶段,也不得将多个阶段合并到一次响应中,在阶段三之前绝不编写代码。

阶段一:提取与确认。从 appshot-core 运行提取。若存在先前运行留下的 appshot-video/.appshot-context.json,则加载并与用户确认,而不是重新扫描。展示提取摘要后必须询问用户是否准确。确认后运行收集截图步骤;若用户提供截图,则进行视觉参考分析并将 visualSpec 保存到 .appshot-context.json。截图仅作参考,绝不复制进输出项目。

阶段二:创意方向。依次确定叙事角度、主题偏好、输出目标、目标商店和背景音乐,然后给出场景拆解和文案草稿。叙事角度包括:人物驱动的故事(适合习惯、健康、生活方式类)、转变/前后对比(适合问题直观的产品)、速度演示(适合以速度见长的产品)、UI 展示(适合界面即产品的情况)、问题-解决方案(适合工具与效率类)。主题可选浅色或深色,默认推荐浅色(App Store 中可见度更高),仅深色模式的应用默认深色并采用高对比度。输出目标分为 App Store 预览版(推荐,无设备边框的全屏应用画面,文字叠加在 UI 之上,含导航栏,符合 Apple/Google 预览要求)和营销版(带 PhoneFrame 设备边框,周围配文字与卡片,适用于社交媒体、网站、路演)。若应用同时具备 iOS 和 Android 标识,推荐同时生成 App Store 和 Play Store 两版,场景相同仅导航栏样式不同,一次提示两种输出。背景音乐内置 8 首免版税曲目(位于 public/music/),可按应用类别自动推荐,包括 upbeat-corporate、calm-ambient、warm-inspiring、minimal-electronic、energetic-tech、lofi-chill、bright-acoustic、cinematic-build,也可选择无音乐或自带音乐。场景拆解中,App Store 预览版总时长 15-30 秒(25 秒以内最佳),每场景 3-6 秒,每个场景都有字幕;所有应用画面场景均为动画模拟 UI,截图从不直接嵌入,仅作视觉参考,需构建匹配 visualSpec 并带动画(元素进入、计数器跳动、波形脉冲)的模拟 JSX。App Store 预览版场景一必须从第 0 帧起展示应用中正在使用的内容(笔记、条目、数据,绝不能是空状态或空白列表),钩子文字放在应用画面之上的字幕叠加层中,只有最终 CTA 场景可以展示非应用画面(应用图标+标语+胶囊标签),且 CTA 中不放商店徽章,因为视频已在商店列表内播放。营销版场景一可以用带样式的卡片文字钩子,应用画面场景包裹 PhoneFrame,最终 CTA 含商店徽章。文案草稿需遵循 copy-principles.md,自查规则包括:每条字幕不超过 8 个词、利益优先而非功能优先、至少一条字幕含具体数字或时间、CTA 标语为设置+差异化亮点、胶囊标签为利益而非功能名、不复制示例文案、字幕从头到尾连贯成故事、自然覆盖至少 3 个提取的 ASO 关键词且分散在各场景。

阶段三:生成代码。编写代码前需阅读 code-guide.md,包含脚手架说明、覆盖所有已知陷阱的 CORRECT/WRONG 代码模板及写后自查。要点包括:在目标项目内搭建 appshot-video/,绝不放在 appshot 模板中;画布 886×1920px(App Store 原生);截图是参考不是内容,绝不以 <Img> 嵌入场景;App Store 预览版不使用 PhoneFrame,采用全屏画面加导航栏与文字叠加;营销版 PhoneFrame scale={1.5},手机外文字正文 24px+、标题 34px+;场景一在第 0 帧即有可见内容;编排器在 SceneWrap 上使用 fadeIn={!isFirst} fadeOut={!isLast};绝不对 AppIcon 的 src 使用 staticFile();多商店时 Root.tsx 为每个目标商店注册一个 Composition,Orchestrator 通过 prop 接收 device;CTA 场景在 App Store 预览版中不含商店徽章;移除未使用的导入。若已有单合成项目,除非用户明确要求两个商店,否则不添加多商店合成。

阶段四:预览与迭代。启动 Remotion Studio 预览(后台启动并捕获 PID,等待服务器就绪),检查第 0 帧是否可见内容、文字在播放速度下是否可读、每个场景是否像这个应用、CTA 是否可见 2 秒以上、节奏是否合适、有无对比度问题,并与用户迭代至通过。进入阶段五前先关闭开发服务器进程。

阶段五:渲染与交付。用户批准预览后,为每个目标商店合成运行 npx remotion render,命令示例:cd appshot-video && npx remotion render [CompositionId] out/[CompositionId].mp4 --codec h264 --crf 18 --pixel-format yuv420p --color-space bt709。渲染完成后报告每个输出文件的绝对路径,不要求用户手动运行构建命令。

【快速模式】 若启用 --quick,则自主做出所有创意决策,在生成代码前将阶段一和阶段二的输出合并提交一次审批,仍须使用 AskUserQuestion 作为审批关口,用户未响应前不得进入代码生成。

【配套资源】 代码生成参考 code-guide.md、带注释示例 bookstreak-annotated.md、文案原则 copy-principles.md、原语与提取 appshot-core SKILL.md。

【提示】 控制在 25 秒以内(注意力在 20 秒后下降);深色场景置于浅色之前以增强对比;核心循环在屏幕时间内控制在 5 秒以内;CTA 可见 2 秒以上;每个场景都配字幕(很多人静音观看);使用真实应用图标以便识别。

关于具体收费、价格、支持的平台范围等细节,资料暂未提供。