技能说明
适用于文章转视频、产品演示、教程、keynote 和动态 PPT 替代方案。输出以 Vite + React + TypeScript 网页项目为主，音频服务需要用户自行配置。
关于此技能
来自 ConardLi/garden-skills 的网页视频演示方法论，把文章或口播稿变成可点击、可录屏的 16:9 网页演示，并在用户需要时生成口播音频。
核心能力
口播驱动的画面节奏
把文章或脚本拆成章节和节拍，每次点击推进一个想法，每一步独占整屏，避免把网页做成堆满要点的普通幻灯片。
固定画布与主题系统
以 1920×1080 舞台、语义化设计 token 和多套主题支撑稳定录屏，同时保留针对题材重新设计的空间。
分阶段协作与可选音频
在脚本、主题、提纲、素材和开发模式之间设置确认点，音频合成采用可替换的 TTS 供应商流程。
适用场景
文章变视频
把文章、教程或评论整理为 B 站、YouTube、视频号等平台可录屏的动态网页演示。
产品演示与主题演讲
制作带章节、动效和视觉节奏的产品 demo、keynote、课程和技术讲解。
动态 PPT 替代方案
需要 16:9 横屏、每屏一个核心想法和可控播放节奏时，用网页而不是传统幻灯片承载内容。
使用步骤
- 01
识别输入并整理内容
区分文章、口播稿和已有素材，生成 script.md 与 outline.md，保留原始文章作为后续画面细节来源。
- 02
一次对齐开发计划
确认稿子、章节提纲、视觉主题、素材准备和开发模式，再进入实现阶段。
- 03
先做风格锚点
用 Vite、React、TypeScript 搭建演示，先完成第 1 章作为完整样板，再按确认后的模式开发后续章节。
- 04
选择是否合成与录制
检查旁白数量、章节节拍和画面自检；用户确认后再选择 TTS、录屏和后期方式。
常见问题
必须先有文章或口播稿吗？+
是。技能以用户提供的文章、脚本或素材为输入，不会在没有内容依据时直接替用户构思完整视频。
能直接做普通 PPT 吗？+
它更适合可录屏的互动网页演示，而不是传统 PPT 文件；核心输出是 Vite + React + TypeScript 网页项目。
合成口播音频需要固定服务商吗？+
不需要，内置 MiniMax 和 OpenAI TTS 示例，也可替换为 ElevenLabs、edge-tts、Azure、Google Cloud 或系统 TTS；调用服务时需自行准备对应凭据。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/08
安装提醒：这项技能可能涉及网络、脚本、文件或凭据权限，安装前请先阅读 SKILL.md，并确认它需要哪些权限。
npx skills add https://github.com/conardli/garden-skills --skill web-video-presentation