# Web Video Presentation Skill **把文章或口播稿做成点击驱动的 16:9 网页演示，并通过录屏产出有电影感视频的 Agent Skill。** [English](./README.md) · [返回集合首页](../../README.zh-CN.md) ![Web Video Presentation Skill](https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video-presentation-skill.webp) --- ## 这是什么？ `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.1 识别用户输入 Phase 1.2 文章 -> 口播稿 | Checkpoint A1 稿子、主题、粗略素材计划 | Phase 1.3 口播稿 + 原文 -> outline.md | Checkpoint A2 outline 确认 + 开发模式选择 | Phase 2 构建 Vite / React / TS 演示 | Checkpoint B 询问是否合成音频 | Phase 3 可选音频合成 Phase 4 录屏与后期 ``` 这些 checkpoint 是 Skill 契约的一部分：Agent 不应该从原文一路闷头做到成品。主题选择会影响动效气质，outline 确认能避免章节节奏跑偏。 --- ## 内含内容 ```text skills/web-video-presentation/ ├── SKILL.md ├── README.md / README.zh-CN.md ├── references/ │ ├── PRINCIPLES.md │ ├── CHAPTER-CRAFT.md │ ├── OUTLINE-FORMAT.md │ ├── SCRIPT-STYLE.md │ ├── THEMES.md │ ├── AUDIO.md │ └── RECORDING.md ├── scripts/ │ └── scaffold.sh ├── templates/ │ ├── index.html │ ├── vite.config.ts │ ├── scripts/ │ │ ├── extract-narrations.ts │ │ ├── synthesize-audio.sh # provider-agnostic runner │ │ └── tts-providers/ # 一个文件 = 一个 TTS 后端 │ │ ├── README.md # 三函数契约 + ElevenLabs / edge-tts / Azure / Google / say 的现成片段 │ │ ├── minimax.sh # 默认 provider（mmx-cli） │ │ └── openai.sh # 内置：OpenAI TTS（curl + OPENAI_API_KEY） │ └── src/ └── themes/ # 23 套主题，每套独立设计签名 ├── midnight-press/ ├── warm-keynote/ ├── newsroom/ ├── bauhaus-bold/ └── ... # 完整列表见 references/THEMES.md ``` --- ## 快速上手 把这个 Skill 复制到你的 Agent 会扫描的目录，然后让 Agent 把一篇文章或口播稿做成网页视频演示。 如果要手动脚手架： ```bash bash skills/web-video-presentation/scripts/scaffold.sh ./presentation --theme=paper-press ``` 查看可用主题： ```bash bash skills/web-video-presentation/scripts/scaffold.sh --list-themes ``` 生成的 `presentation/` 是普通 Vite + React + TypeScript 项目。启动后用录屏工具录制 16:9 舞台即可。 --- ## 主题画廊 Skill 内置 **23 套**主题，每套都有独立的设计 DNA —— 不是简单换色版。下面按底色分两组浏览，挑一套接近目标气质的，或者把任意一格当作派生新主题的起点。点击任意预览图可放大查看 1920×1080 原帧。 > 所有截图都是真实的 16:9 舞台，来自 [`demo/web-video-presentation-demo`](../../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。

--- ## Reference Map - [PRINCIPLES.md](./references/PRINCIPLES.md)：视频感网页演示的核心原则 - [CHAPTER-CRAFT.md](./references/CHAPTER-CRAFT.md)：章节实现规则与视觉 checklist - [OUTLINE-FORMAT.md](./references/OUTLINE-FORMAT.md)：outline 必须遵循的结构 - [SCRIPT-STYLE.md](./references/SCRIPT-STYLE.md)：文章转口播稿规则 - [PATTERNS.md](./references/PATTERNS.md)：可选视觉 primitive 配方 - [AUDIO.md](./references/AUDIO.md)：可选口播音频合成流程（provider-agnostic） - [tts-providers/README.md](./templates/scripts/tts-providers/README.md)：TTS provider 三函数契约 + 内置 2 个 (minimax / openai) + ElevenLabs / edge-tts / Azure / Google / macOS say 的现成代码片段 - [RECORDING.md](./references/RECORDING.md)：录屏与后期注意事项