Agent skill · design visual · conardli
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 沉淀的是设计方法论 + 协作流程 —— 不绑定任何特定样式 / 字体 / 颜色 —— 因此能复用到任意主题与美学。
Why this skill is useful
Provides a structured workflow and templates for creating interactive video presentations, including audio synthesis scripts that are not commonly known.
What it needs
Requires react, typescript, vite installed locally. About 8k tokens when loaded. Last updated 2026-07-12. 10,116 stars on the source repository.
What this skill does
Web Video Presentation 把一篇文章或口播稿，一步步做成可录屏的"伪装成视频的网页"，可选合成 口播音频。产出物 = Vite + React + TS 项目 + 按章节切分的音频。 适用场景 "我有口播稿 / 一篇文章，帮我做成视频" —— 口播驱动的内容 想做 "动态 PPT" 16:9 横屏录屏，大字、留白、每屏都要有动效 教学 / 产品演示 / keynote 想要电影感 B 站 / YouTube /抖音视频内容 本 Skill 以方法论 + 协作流程为核心。脚手架模板提供 token 和原语， 但每个美学决策（配色、字型、动效气质）都应该针对你的主题重新设计 —— 不要照搬。 --- 工作流总览 工作目录约定（agent 在用户当前目录下创建 / 编辑）： 关键：narrations.ts 是 step 数和音频合成的唯一真相源。 章节 .tsx 里的 if (step === N) 出现的最大 N + 1 必须等于 narrations.length。这保证 5 处地方（script / outline / 章节代码 / chapters.ts / 音频文件）永远不会漂。 --- 硬性自检协议（贯穿整个 Skill） 下面三个产出，每一个完成后必须走自检 → 修复 → 再汇报 / 推进： 产出 自检清单出处 --- --- script.md SCRIPT-STYLE.md 三层自检（形式 / 风骨 / 念出来） outline.md OUTLINE-FORMAT.md 自检 单章实现完成 CHAPTER-CRAFT.md 完工自检 执行方式（按能力降级，优先用更隔离的方式）： 1. Agent Teams（最优）：开一个独立的 reviewer agent，给它"产出文件 路径 + 对应清单 + 关键上下文"，让它逐项核查并严格汇报结论 （哪几条 pass / 哪几条 fail + 证据 + 改写建议）。 2. subAgent（次优）：没有 Teams 能力但能开 subagent 就用 subagent 走同样流程。 3. 自检（兜底）：当前 agent 都没有上述能力，就自己严格逐项 核查 —— 不允许目测一遍就放行。 铁律：拿到结论后先按 fail 项把产出改完，再向用户汇报"做完了 自检结论 + 改了什么"。直接拿原始结论汇报但不修复 = 违规。 --- 各阶段文件读取指南 不同阶段读不同的文件。长会话里 agent 容易遗忘原则，特别是 Phase 2.4 的"实现单章"会重复 N 次 —— 每次都要回看核心约束。 阶段 必读（每次都看） 一次性看完 / 按需查 --- --- --- Phase 1.1-1.2 内容编写 references/SCRIPT-STYLE.md + references/OUTLINE-FORMAT.md + article.md（用户原文，如有） —— Checkpoint Plan 选主题 —— themes//theme.json（动态读全部，列清单 + bestFor 推荐 + descriptionZh）；references/THEMES.md（用户想了解主题系统时） Phase 2.1 脚手架 —— SKILL.md 本节看一次 Phase 2.4 实现单章（×N 次，被 2.2 / 2.3 调用） references/CHAPTER-CRAFT.md 单一入口 —— Part 0 十条原则 / Part 1 开工 5 问 / Part 2 关系→动作决策树 / Part 3 视觉工具箱 / Part 4 时长参考 / Part 5 反 AI 味反模式 / Part 6 代码硬规则（含 narrations.ts 强制约束）/ Part 7 完工自检 / Part 8 反馈速查 + 当前主题的 themes/<id>/theme.json + 当前章节的 outline.md 段落 + article.md 本章对应段落 + 素材清单 references/EXAMPLES/（结构示意，不是抄袭模板）；references/THEMES.md 完整 token 契约 Phase 3 音频合成 references/AUDIO.md（含 narrations.ts → segments.json → 任意 provider 流程，内置 minimax + openai） templates/scripts/tts-providers/README.md（换 provider / 自带 TTS 时） Phase 4 录屏 + 后期 references/RECORDING.md（含 ?auto=1 自动录屏） —— 选 / 造 / 切主 …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills conardli/web-video-presentation