# web-video-presentation **Repository Path**: oxtop/web-video-presentation ## Basic Information - **Project Name**: web-video-presentation - **Description**: Agent skill: 16:9 web video presentations (Vite React themes TTS) - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-05-28 - **Last Updated**: 2026-05-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Web Video Presentation **把文章或口播稿做成点击驱动的 16:9 网页演示，并通过录屏产出有电影感视频的 Agent Skill。** [English](./README.md) · **[配置与使用教程](./TUTORIAL.zh-CN.md)** ← 首次使用建议从这里开始 ![Web Video Presentation Skill](https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video-presentation-skill.webp) | | | |---|---| | **版本** | 1.2.1 | | **协议** | [MIT](./LICENSE) 开源 | | **Gitee** | [oxtop/web-video-presentation](https://gitee.com/oxtop/web-video-presentation) | | **上游合集** | [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills/tree/main/skills/web-video-presentation) | | **兼容 Agent** | Cursor · Claude Code · Codex CLI · Gemini CLI · OpenCode | --- ## 这是什么？ `web-video-presentation` 帮 Agent 构建一种 Vite + React + TypeScript 演示：它看起来不是传统幻灯片，而更像为录屏设计的视频舞台。每次点击推进一个口播节拍，每一步独占 1920×1080 舞台，进度 UI 平时隐藏，只有悬浮时出现，方便录出干净画面。 它适合： - 把文章改写成 B 站 / YouTube / 视频号风格口播稿 - 把已有口播稿做成有节奏的网页演示 - 做产品演示、教程、keynote 式讲解、视觉 talk - 做「动态 PPT，但不要像 PPT」的演示体验 - 在视觉 outline 对齐后，可选合成口播音频 这个 Skill 的核心是**方法论 + 协作流程**。脚手架提供 token、舞台原语、主题和示例，但每个项目仍然应该根据主题重新选择视觉语言。 --- ## 核心理念 - **固定 16:9 舞台**：内容写在稳定的 1920×1080 坐标系里，再按视口缩放。 - **一个全局 step 游标**：点击或键盘推进 `(chapter, step)`，游标本地持久化。 - **一步一个想法**：每个节拍独占整屏，不堆叠项目符号。 - **口播节拍驱动结构**：讲述节奏直接映射为视觉 step。 - **隐藏 chrome**：进度控制悬浮才出现，录屏画面保持干净。 - **动效优先**：每一步都需要一个移动的视觉锚点，静态正文是坏味道。 - **主题 token**：视觉属性通过语义 token 驱动，换主题不只是换颜色。 - **可插拔 TTS**：provider-agnostic 音频 runner，**内置 2 个 provider**（MiniMax `mmx-cli` + OpenAI TTS via curl）；往 `tts-providers/` 丢一个 `.sh` 就能换成 ElevenLabs / edge-tts / Azure / Google Cloud / macOS `say` / 任何自部署 TTS。 - **硬 checkpoint**：稿子 / 主题 / outline、音频合成前都必须停下来与用户确认。 --- ## 工作流 ```text Phase 1 内容 一次产出 script.md + outline.md ▼ [Checkpoint Plan] 稿子 · outline · 主题 · 素材 · 开发模式（A/B/C） ▼ Phase 2 开发 presentation/（第 1 章为风格锚点，再 2…N 章） ▼ [Checkpoint Audio] 是否合成口播 MP3？ ▼ Phase 3 可选 TTS → public/audio/<章节id>/<步序>.mp3 ▼ Phase 4 录屏 → 手动点击，或 ?auto=1 自动播完一镜到底 ``` 这些 checkpoint 是 Skill 契约的一部分：Agent 不应该从原文一路闷头做到成品。主题选择会影响动效气质，outline 确认能避免章节节奏跑偏。 **开发模式**（第 1 章验收通过之后）： | 模式 | 说明 | |------|------| | **A**（默认） | 每章做完暂停，逐章验收，最稳 | | **B** | 第 2～N 章主线程顺序做完，最后统一验收 | | **C** | 第 2～N 章 subagent 并行，最快，各章动效略有差异 | Agent 细则见 [`SKILL.md`](./SKILL.md)；人工安装与录屏见 **[`TUTORIAL.zh-CN.md`](./TUTORIAL.zh-CN.md)**。 --- ## 安装 **克隆（Gitee）** ```bash git clone https://gitee.com/oxtop/web-video-presentation.git ``` **放进项目**（二选一路径）： ```text 你的项目/.cursor/skills/web-video-presentation/ 你的项目/.agents/skills/web-video-presentation/ ``` **全局安装**（所有项目可用）： ```bash git clone https://gitee.com/oxtop/web-video-presentation.git ~/.cursor/skills/web-video-presentation ``` **从 garden-skills 合集安装** ```bash npx skills add ConardLi/garden-skills -a cursor -y ``` 重启 Cursor 或新开 Agent 对话，验证： ```text 请列出 web-video-presentation 里所有可用主题 ``` --- ## 快速上手 ### 交给 Agent（推荐） ```text 请使用 web-video-presentation 技能。 工作目录：/path/to/my-video 输入：article.md（或直接贴口播稿） 按技能流程：生成 script + outline → Checkpoint Plan 等我确认 → 主题 chalk-garden 脚手架 → 只做第 1 章并等我验收。 ``` ### 手动脚手架 ```bash bash web-video-presentation/scripts/scaffold.sh ./presentation --theme=paper-press cd presentation && npm install && npm run dev ``` 查看可用主题： ```bash bash web-video-presentation/scripts/scaffold.sh --list-themes ``` 生成的 `presentation/` 是普通 Vite + React + TypeScript 项目。启动后用录屏工具录制 16:9 舞台即可。 --- ## 内含内容 ```text web-video-presentation/ ├── SKILL.md ├── README.md / README.zh-CN.md ├── TUTORIAL.zh-CN.md ├── LICENSE ├── references/ │ ├── CHAPTER-CRAFT.md │ ├── OUTLINE-FORMAT.md │ ├── SCRIPT-STYLE.md │ ├── THEMES.md │ ├── AUDIO.md │ ├── RECORDING.md │ └── EXAMPLES/ ├── scripts/ │ ├── scaffold.sh │ ├── package.sh │ └── push-to-gitee.sh ├── templates/ │ ├── index.html │ ├── vite.config.ts │ ├── scripts/ │ │ ├── extract-narrations.ts │ │ ├── synthesize-audio.sh │ │ └── tts-providers/ │ │ ├── README.md │ │ ├── minimax.sh │ │ └── openai.sh │ └── src/ └── themes/ # 23 套主题，每套独立设计签名 ├── midnight-press/ ├── warm-keynote/ ├── newsroom/ └── ... ``` **单个视频项目**（Agent 在工作目录生成）： ```text my-video/ ├── article.md ├── script.md ├── outline.md └── presentation/ ├── src/chapters/-/ │ ├── *.tsx / *.css │ └── narrations.ts # ★ step 数 + TTS 文本的唯一真相源 └── public/audio//.mp3 ``` --- ## 主题画廊 Skill 内置 **23 套**主题，每套都有独立的设计 DNA —— 不是简单换色版。下面按底色分两组浏览，挑一套接近目标气质的，或者把任意一格当作派生新主题的起点。点击任意预览图可放大查看 1920×1080 原帧。 > 所有截图都是真实的 16:9 舞台，来自上游合集里的 [主题演示画廊](https://github.com/ConardLi/garden-skills/tree/main/demo/web-video-presentation-demo)。 ### 深色 · 8 套 > 电影感深色画布 —— 适合需要聚焦、戏剧张力、强对比的叙事。
midnight-press 预览
midnight-press · 暗色印刷
电影感编辑暗底 · 暖暗底 + 火热橙
适合 · 开发者教程 · AI / 工具评测 · 技术 deep dive 		dark-botanical 预览
dark-botanical · 暗夜植物
高级时尚刊物 · 暖陶 / 玫粉 / 鎏金叠层
适合 · 品牌故事 · 时尚 / 美妆 · 高端产品发布
chalk-garden 预览
chalk-garden · 粉笔花园
深石板黑板 · 手写 Patrick Hand + 粉笔黄
适合 · 科普讲解 · 教学课堂 · 面向初学者的亲切口吻 		blueprint 预览
blueprint · 工程蓝图
制图工作台 · 深海军 + 制图青 + 60 px 网格
适合 · 技术架构 · 系统拆解 · API / SDK 介绍
terminal-green 预览
terminal-green · 终端绿
80 年代磷光 CRT · 纯等宽 + 扫描线
适合 · CLI 工具教程 · 黑客 / 安全话题 · 复古技术致敬 		neon-cyber 预览
neon-cyber · 霓虹赛博
赛博朋克未来 · 电光青 + 玫红双霓虹
适合 · AI / 大模型评测 · web3 / 安全 · 未来主义与赛博朋克
bold-signal 预览
bold-signal · 焦点信号
Pitch Deck 主舞台 · 暗渐变 + 大橙焦点卡
适合 · pitch deck / 路演 · 产品发布 · 大字宣言 / brand keynote 		creative-voltage 预览
creative-voltage · 电压创意
饱和电光蓝 + 霓虹黄 + halftone 网点
适合 · 设计周 / 创意分享 · 工作室作品集 · 字体 / 视觉文化
### 浅色 · 15 套 > 明亮编辑画布 —— 适合清晰、克制、带纸感温度的内容。
paper-press 预览
paper-press · 亮色印刷
编辑纸张 · 暖奶油 + 火热橙
适合 · 杂志型内容 · 生活方式 · 日常工具评测 		newsroom 预览
newsroom · 报社
NYT 大报 · 新闻纸奶油 + 旗红
适合 · 纪录片 / 报道 · 深度评测 · 时事 / 热点解读
monochrome-print 预览
monochrome-print · 黑白印刷
精炼克制 · Monocle / Wallpaper 气质
适合 · 深度阅读改编 · 学术 / 思想型内容 · 文化艺术评论 		vintage-editorial 预览
vintage-editorial · 复古编辑
俏皮 Fraunces + 几何叠层（圆 / 线 / 点）
适合 · 个人见解 / 评论 · 文化随笔 · 设计 / 字体话题
sunset-zine 预览
sunset-zine · 日落 Zine
Risograph 拼贴 · 暖桃 + 玫红 + 虚线剪贴
适合 · 生活向 vlog · 创意分享 · 小红书 / 抖音风 		pastel-dream 预览
pastel-dream · 柔光梦
柔粉 + 鼠尾草绿 + 右侧 pill 色条
适合 · 产品 onboarding · 友好教学 · 心理 / 健康 / 母婴
warm-keynote 预览
warm-keynote · 暖色 Keynote
现代 SaaS Keynote · glass slab + 青绿 + 暖色网格
适合 · SaaS keynote · B 端产品发布 · 团队对外汇报 		electric-studio 预览
electric-studio · 电光企业
企业级清晰 · 净白 + 贴底电光蓝色条
适合 · B2B 产品演讲 · 投资人路演 · 企业财报 / 季度更新
bauhaus-bold 预览
bauhaus-bold · 包豪斯
宣言式现代主义 · 0 圆角 + 4 px 厚边
适合 · 产品发布 · 观点宣言 · 品牌主张 		swiss-ikb 预览
swiss-ikb · 瑞士克莱因蓝
极细 200 Helvetica + IKB + 1 px 发丝网格
适合 · AI / 科技产品发布 · 年度数据汇报 · 信息图
dune 预览
dune · 沙丘
炭褐 + 沙底 · 近乎零 accent，建筑画廊感
适合 · 建筑 / 室内 / 空间 · 艺术展览 · 高端品牌画册 		indigo-porcelain 预览
indigo-porcelain · 靛蓝瓷
靛蓝本身即墨（不是 accent）+ 瓷白
适合 · 学术 / 论文解读 · AI / 数据深度 · 严肃技术汇报
forest-ink 预览
forest-ink · 森林墨
森林绿本身即墨 + 象牙 · 旧版国家地理
适合 · 自然 / 可持续 · 纪录 / 非虚构 · 慢生活 		kraft-paper 预览
kraft-paper · 牛皮纸
深棕本身即墨 + 牛皮米 + 紫铜 accent
适合 · 书评 / 文学随笔 · 历史 / 怀旧 · 手工艺 / 食物
split-canvas 预览
split-canvas · 双拼画布
50/50 双底色 · 蜜桃左 + 薰衣草右
适合 · 双主题对比 / 辩论 · 故事讲述 · 概念对照科普
+ 派生你自己的
完整 token 契约、每套设计签名、
以及怎么派生新主题（Swiss 黄 / 绿 / 橙变体等），
见 THEMES.md。

```bash bash scripts/scaffold.sh ./presentation --theme=chalk-garden bash scripts/scaffold.sh --list-themes ``` 已有项目换主题： ```bash cp themes/chalk-garden/tokens.css presentation/src/styles/tokens.css ``` --- ## 音频与录屏（简版） ```bash cd presentation npm run extract-narrations # 生成 audio-segments.json，先人工核对 npm run synthesize-audio # 默认 MiniMax（mmx-cli） PRESENTATION_TTS=openai npm run synthesize-audio # 需 OPENAI_API_KEY ``` **一镜录屏**（MP3 齐全后）：浏览器全屏 → `http://localhost:5173/?auto=1` → 按一次 **空格** → 自动播完 → 剪辑裁头尾即可。 详见 [`references/AUDIO.md`](./references/AUDIO.md) · [`references/RECORDING.md`](./references/RECORDING.md) --- ## 文档索引 | 文档 | 何时阅读 | |------|----------| | [`SKILL.md`](./SKILL.md) | Agent 自动加载 | | [`TUTORIAL.zh-CN.md`](./TUTORIAL.zh-CN.md) | **首次安装与完整使用流程** | | [`references/SCRIPT-STYLE.md`](./references/SCRIPT-STYLE.md) | 文章转口播稿 | | [`references/OUTLINE-FORMAT.md`](./references/OUTLINE-FORMAT.md) | `outline.md` 结构 | | [`references/CHAPTER-CRAFT.md`](./references/CHAPTER-CRAFT.md) | 实现单章画面（含核心原则 Part 0） | | [`references/THEMES.md`](./references/THEMES.md) | 主题 token 与自定义主题 | | [`references/AUDIO.md`](./references/AUDIO.md) | TTS 合成流程 | | [`references/RECORDING.md`](./references/RECORDING.md) | 手动 / Auto 录屏 | | [`templates/scripts/tts-providers/README.md`](./templates/scripts/tts-providers/README.md) | 接入 ElevenLabs / edge-tts 等 | | [`references/EXAMPLES/`](./references/EXAMPLES/) | 章节结构示例（可选参考） | --- ## 开源协议 本项目以 **[MIT License](./LICENSE)** 发布，可自由使用、修改与分发，需保留版权声明。 脚手架生成的演示页右下角链接默认指向 [本仓库](https://gitee.com/oxtop/web-video-presentation)；可用 `--source-url=` 改成你的项目地址： ```bash bash scripts/scaffold.sh ./presentation --source-url=https://gitee.com/你的账号/你的仓库 ``` ## 参与与反馈 仓库：[oxtop/web-video-presentation](https://gitee.com/oxtop/web-video-presentation) · 欢迎 [Issue](https://gitee.com/oxtop/web-video-presentation/issues) / PR。 与上游 [garden-skills](https://github.com/ConardLi/garden-skills) 理念同源，本仓库为独立开源维护版本。