102.3K+下载
跳转到使用指南
Web Video Presentation作者 ConardLi

Web Video Presentation Skill.

一种像视频一样掌控节奏的浏览器演示,每次只推进一个口播节拍。

  • 演示文稿
  • 动效
  • 旁白
下载 OpenDesign查看使用指南
来源审阅 · Web Video PresentationSKILL.md
任务 演示文稿 产出 • 按章节划分、由点击驱动的 16:9 React 演示文稿 • 取自来源内容的口播稿、章节大纲和补充细节 • 可选的逐步音频文件,用于自动推进的录制模式 开始之前 使用 Vite、React、TypeScript 和 Node 工具链。可选的 TTS 取决于所选服务商、凭据和适配器;最终录制需要浏览器捕获或录屏软件。
编辑摘要 · 已审阅来源 2026-10-07 · 并非生成的示例

01 功能说明

Web Video Presentation

一种以旁白节拍为单位的演示工作流:固定舞台、先审阅第一章、章节内独立的旁白记录,以及可选的音频辅助录制。

基于来源的工作流并非执行基准测试

工作方式

Web Video Presentation 将提供的素材转换为可录制的网页演示。产出物是基于固定 16:9 舞台的 Vite、React 和 TypeScript 项目,而不是响应式营销网站,也不是自动交付的视频文件。每次点击推进一个旁白节拍,并将当前场景替换为聚焦的全屏画面。

该工作流保留两类内容参考:口播稿决定顺序和节奏,原文则提供可丰富画面的细节。每个章节的 narrations.ts 是步骤数量和文本的依据,也是可选音频的依据。先完成并审阅第一章,再扩展其余章节的视觉语言。语音合成是在网页体验准备好之后另行决定的事项。

预期交付物

  • 按章节划分、由点击驱动的 16:9 React 演示文稿
  • 取自来源内容的口播稿、章节大纲和补充细节
  • 可选的逐步音频文件,用于自动推进的录制模式
查看示例需求

从需求到审阅

  1. 01
    准备口播稿和大纲

    保留提供的文章,以原文语言改写口播稿,并规划章节边界和画面内容。大纲确定信息节奏,但不规定每个动画。

  2. 02
    对齐方案

    一并确认口播稿、大纲、主题、素材和开发模式,使第一章有明确的内容与视觉需求。

  3. 03
    审阅完整章节

    主代理构建一个包含真实内容和预期动效的完整第一章,完成规定的审阅与修复,然后在制作后续章节之前暂停,等待用户必须进行的验收。用这个样章来解决节奏和 design-token 不一致的问题。

  4. 04
    选择音频与录制方式

    如有需要,根据章节旁白记录生成语音并检查各段时长。否则采用手动推进,在录制或剪辑时再添加配音。

02 适用场景

适用场景

使用 Vite、React、TypeScript 和 Node 工具链。可选的 TTS 取决于所选服务商、凭据和适配器;最终录制需要浏览器捕获或录屏软件。

适合的情况

  • 技术讲解适用于需要一次揭示一个关系,同时又要承载口播之外的来源细节的概念讲解。
  • 录制的产品讲解适合将在浏览器中录制的教程和产品演示,并需要精确控制每个节拍中可见的内容。

需要检查的限制

  • 并非响应式网站固定舞台会按可用视口缩放。这是一种演示策略,而不是为日常手机阅读设计的布局。
  • 音频是可选的,且依赖外部服务语音需要配置好的服务商或其他 TTS 途径。网页项目完成并不代表已完成语音合成或最终视频录制。

需要准备的输入

  • 文章或口播稿提供有实质内容的来源材料或大纲。该技能并不被宣称可以替代你决定演讲该说什么。
  • 主题与素材选择视觉风格,并为规划的章节确定可用的产品截图、图表或经认可的占位素材。
  • 协作与音频决定后续章节是需要逐章审阅还是可以一起完成,并单独授权任何语音生成后端。

03 关键决策

关键决策

  1. 统一的旁白记录

    让章节渲染的步骤数与其旁白数组保持一致,可减少画面顺序、口播文本和生成的音频片段之间的不一致。

  2. 由内容驱动的动效

    大纲把动画决策留给实现阶段,由所讲解的实际关系来决定如何呈现,而不是过早指定随意的效果。

04 示例任务

试试聚焦的需求

下面的示例需求尚未经过测试。使用前请先检查该技能的设置。

检查设置

请保留完整的仓库技能包,包括脚手架、章节参考、主题和可选的音频脚本。

上游源文件
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-video-presentation/SKILL.md

使用 Vite、React、TypeScript 和 Node 工具链。可选的 TTS 取决于所选服务商、凭据和适配器;最终录制需要浏览器捕获或录屏软件。

从一个交付物开始

运行该技能之前,请根据实际情况调整此需求中的范围、来源材料和约束。

示例需求
使用 Web Video Presentation 将附带的浏览器渲染文章转换为一个五分钟的英文讲解。保留源文章,创建口播稿和大纲,并提出克制的技术风格主题。让第一章通过布局与绘制的对比来演示,而不是只用纯文字幻灯片。在构建后续章节之前,先停下来等待第一章的审阅。在我选定音频服务商之前,不要合成语音。

检查结果

对照以下可观察的标准检查实际输出。

  • 每个章节的可见步骤数与其旁白条目数一致。
  • 第一章通过视觉演示来传达概念,而不仅仅依靠段落文字。
  • 只有在这些可选阶段确实完成时,才报告音频文件和自动播放。

OpenDesign 为编码代理提供本地设计工作区。此列表并不表示该技能已内置,也不表示其外部工具、凭据和软件依赖已包含在内。

下载 OpenDesign阅读快速入门

05 来源与许可证

来源与许可证

本页描述的是下方链接所指向的固定来源版本。上游的行为和要求可能会变化。

来源所有者
ConardLi
仓库
ConardLi/garden-skills
技能文件
skills/web-video-presentation/SKILL.md
许可证
MIT
已审阅的快照
2026-10-07 · aaf9a82f5efd
编辑来源摘要
一种以旁白节拍为单位的演示工作流:固定舞台、先审阅第一章、章节内独立的旁白记录,以及可选的音频辅助录制。

由 OpenDesign 根据所链接的来源撰写的原创摘要。仓库星标数是带日期的热度信号,不代表技能使用量或质量评分。

06 开始前的问题

开始前的问题

结果是 MP4 吗?

核心成果是一个浏览器项目。录制和后期制作会把该体验变成视频;可选的语音文件有助于在录制时自动播放。

我可以使用自己的语音服务商吗?

来源描述了一个与服务商无关的运行器,带有内置路径和适配器。仍需配置可用的账号或本地工具。

写完口播稿后为什么还要保留文章?

口播稿控制口语节奏,而文章仍是示例、数字和细节的来源,可以在不使旁白过于拥挤的情况下支撑画面。

OpenDesign

为下一轮设计迭代腾出空间。

将需求、来源材料和设计工作集中放在本地工作区。将该技能加入工作流之前,请先查看其自身的设置。

下载 OpenDesign浏览设计技能
上游源文件
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-video-presentation/SKILL.md