web-video-presentation
把一篇文章或口播稿，做成"看起来像视频"的点击驱动 16:9 网页演示，可选合成口播音频。流程：原始文章 → **一次产出**口播稿 + outline 开发计划 → 用户**一次对齐** 5 件事（稿子 / outline / 主题 / 素材 / 开发模式）→ 网页开发（逐章 / 顺序 / 并行）→ 可选音频合成（provider-agnostic：内置 MiniMax mmx-cli + OpenAI TTS，可换 ElevenLabs / edge-tts / Azure / 自带 TTS）。**outline 只规划节奏与信息密度，不规划动画** —— 动画由章节开发时按 PRINCIPLES + ANTI-AI 法则即时设计。每次点击推进口播稿的一个节拍，每一步独占整屏，进度条平时隐藏只在悬浮时出现。适用场景：用网页做视频（动态 PPT 但不像 PPT）、把口播稿 / 文章变成可交互的解说、为 B 站 / YouTube / 视频号录屏教程、做有电影感的产品 / talk demo。本 Skill 沉淀的是设计方法论 + 协作流程 —— 不绑定任何特定样式 / 字体 / 颜色 —— 因此能复用到任意主题与美学。
npx skills add ConardLi/garden-skills --skill web-video-presentation --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Web Video Presentation 把一篇文章或口播稿，一步步做成可录屏的"伪装成视频的网页"，可选合成 口播音频。产出物 = Vite + React + TS 项目 + 按章节切分的音频。 ## 适用场景 - "我有口播稿 / 一篇文章，帮我做成视频" —— 口播驱动的内容 - 想做 "动态 PPT" - 16:9 横屏录屏，大字、留白、每屏都要有动效 - 教学 / 产品演示 / keynote 想要电影感 - B 站 / YouTube /抖音视频内容 本 Skill **以方法论 + 协作流程为核心**。脚手架模板提供 token 和原语， 但每个美学决策（配色、字型、动效气质）都应该针对你的主题重新设计 —— 不要照搬。 --- ## 工作流总览 ``` Phase 1 内容编写 1.1 识别用户输入 1.2 一次产出 script.md + outline.md （口播稿 + 开发计划） ▼ [Checkpoint Plan] ← 必须停。一次对齐 5 件事： 稿子 / outline / 主题 / 素材 / 开发模式 ▼ Phase 2 网页开发 2.1 脚手架（按选定主题） 2.2 第 1 章 = 主线程 + 完整版本（强制 anchor） ▼ [硬节点] 用户验收第 1 章 ← 不可跳过 ▼ 2.3 第 2~N 章（按选定模式：A 逐章 / B 顺序 / C 并行） ▼ [Checkpoint Audio] ← 必须停。是否合成音频 ▼ Phase 3 音频合成（可选） ▼ Phase 4 录屏 + 后期 ``` 工作目录约定（agent 在用户当前目录下创建 / 编辑）： ``` my-video/ ├── article.md # 用户给原文时必有 —— 不删！开发阶段画面信息源 ├── script.md # 必有：保持原文语言的平台化口播稿（决定节拍） ├── outline.md # 必有：开发计划（章节切分 + 每步内容 + 信息池） └── presentation/ # 脚手架产出的 Vite + React + TS 项目 ├── src/chapters/<NN>-<id>/ │ ├── <Chapter>.tsx # 视觉实现 │ ├── <Chapter>.css │ └── narrations.ts # ★ step 数 + 口播文本的唯一真相源 ├── scripts/ │ ├── extract-narrations.ts # 扫所有 narrations.ts → audio-segments.json │ ├── synthesize-audio.sh # provider-agnostic runner（循环 segments） │ └── tts-providers/ # 每 provi
- 适用场景
- 工作流总览
- 硬性自检协议（贯穿整个 Skill）
- 各阶段文件读取指南
- Phase 1 —— 内容编写（一次产出）
- 1.1 识别用户输入
- 1.2 一次产出 script.md + outline.md
- Checkpoint Plan —— 5 件事一次对齐（硬节点）
- agent 此时要做的预备工作
- 总结模板（骨架，agent 按情况填充）
- Phase 2 —— 网页开发
- 2.1 脚手架
- 2.2 第 1 章 —— 主线程 + 强制验收
- 2.3 第 2~N 章 —— 按选定模式
bash <path-to-web-video-presentation>/scripts/scaffold.sh \ bash <path-to-web-video-presentation>/scripts/scaffold.sh --list-themes rm -rf presentation/src/chapters/01-example cd presentation npm run extract-narrations # 扫所有 narrations.ts → audio-segments.json npm run synthesize-audio # 默认 minimax provider，增量
What does the web-video-presentation skill do?
把一篇文章或口播稿，做成"看起来像视频"的点击驱动 16:9 网页演示，可选合成口播音频。流程：原始文章 → **一次产出**口播稿 + outline 开发计划 → 用户**一次对齐** 5 件事（稿子 / outline / 主题 / 素材 / 开发模式）→ 网页开发（逐章 / 顺序 / 并行）→ 可选音频合成（provider-agnostic：内置 MiniMax mmx-cli + OpenAI TTS，可换 ElevenLabs / edge-tts / Azure / 自带 TTS）。**outline 只规划节奏与信息密度，不规划动画** —— 动画由章节开发时按 PRINCIPLES + ANTI-AI 法则即时设计。每次点击推进口播稿的一个节拍，每一步独占整屏，进度条平时隐藏只在悬浮时出现。适用场景：用网页做视频（动态 PPT 但不像 PPT）、把口播稿 / 文章变成可交互的解说、为 B 站 / YouTube / 视频号录屏教程、做有电影感的产品 / talk demo。本 Skill 沉淀的是设计方法论 + 协作流程 —— 不绑定任何特定样式 / 字体 / 颜色 —— 因此能复用到任意主题与美学。
How do I install it?
Run `npx skills add ConardLi/garden-skills --skill web-video-presentation --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From ConardLi/garden-skills, a repository with 10,047 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.