Individual skill
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 沉淀的是设计方法论 + 协作流程 —— 不绑定任何特定样式 / 字体 / 颜色 —— 因此能复用到任意主题与美学。
skills/web-video-presentation/SKILL.md
Source commit 2b9a89340b70f632d31c0f1c69fce94a7912423e
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Network or broad shell
- Last checked
- Nov 9, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 14,925
- Repository last updated
- Nov 8, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- agent Repository topic
- claude Repository topic
- gpt-image-2 Repository topic
- rag Repository topic
- skills Repository topic
- web-design Repository topic
- engineering Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
README.mddoc · 17,939 bytesREADME.zh-CN.mddoc · 17,563 bytesSKILL.mdcore · 23,239 bytesSKILL.mdcore · 23,239 bytesSKILL.mdcore · 23,239 bytesSKILL.mdcore · 23,239 bytesSKILL.mdcore · 23,239 bytesSKILL.mdcore · 23,239 bytesSKILL.mdcore · 23,239 bytesSKILL.mdcore · 23,239 bytesmanifest.jsonasset · 629 bytesreferences/AUDIO.mddoc · 11,126 bytesreferences/CHAPTER-CRAFT.mddoc · 10,676 bytesreferences/EXAMPLES/README.mddoc · 5,155 bytesreferences/EXAMPLES/case-tech-review/README.mddoc · 2,917 bytesreferences/EXAMPLES/case-tech-review/outline-snippet.mddoc · 6,516 bytesreferences/EXAMPLES/hook-chapter/README.mddoc · 3,863 bytesreferences/EXAMPLES/hook-chapter/chapter.cssasset · 4,882 bytesreferences/EXAMPLES/hook-chapter/chapter.tsxruns · 4,529 bytesreferences/EXAMPLES/list-reveal/README.mddoc · 3,660 bytesreferences/EXAMPLES/list-reveal/chapter.cssasset · 3,508 bytesreferences/EXAMPLES/list-reveal/chapter.tsxruns · 3,549 bytesreferences/OUTLINE-FORMAT.mddoc · 8,523 bytesreferences/RECORDING.mddoc · 2,988 bytesreferences/SCRIPT-STYLE.mddoc · 17,950 bytesreferences/THEMES.mddoc · 23,359 bytesscripts/scaffold.shruns · 9,537 bytestemplates/index.htmlasset · 302 bytestemplates/scripts/extract-narrations.tsruns · 4,717 bytestemplates/scripts/synthesize-audio.shruns · 5,119 bytestemplates/scripts/tts-providers/README.mddoc · 11,950 bytestemplates/scripts/tts-providers/minimax.shruns · 1,771 bytestemplates/scripts/tts-providers/openai.shruns · 2,636 bytestemplates/src/App.tsxruns · 2,487 bytestemplates/src/chapters/01-example/Example.cssasset · 1,990 bytestemplates/src/chapters/01-example/Example.tsxruns · 3,878 bytestemplates/src/chapters/01-example/narrations.tsruns · 1,280 bytestemplates/src/components/AutoStartGate.cssasset · 1,209 bytestemplates/src/components/AutoStartGate.tsxruns · 1,014 bytestemplates/src/components/AutoToggle.cssasset · 1,062 bytestemplates/src/components/AutoToggle.tsxruns · 898 bytestemplates/src/components/MaskReveal.tsxruns · 797 bytestemplates/src/components/ProgressBar.cssasset · 2,501 bytestemplates/src/components/ProgressBar.tsxruns · 3,837 bytestemplates/src/components/Stage.tsxruns · 1,507 bytestemplates/src/hooks/useAudioPlayer.tsruns · 3,768 bytestemplates/src/hooks/useAutoMode.tsruns · 2,473 bytestemplates/src/hooks/useStageScale.tsruns · 843 bytestemplates/src/hooks/useStepper.tsruns · 5,192 bytestemplates/src/main.tsxruns · 209 bytestemplates/src/registry/chapters.tsruns · 833 bytestemplates/src/registry/types.tsruns · 704 bytestemplates/src/styles/animations.cssasset · 2,320 bytestemplates/src/styles/base.cssasset · 15,271 bytestemplates/src/styles/fonts.cssasset · 2,129 bytestemplates/vite.config.tsruns · 196 bytesthemes/bauhaus-bold/theme.jsonasset · 750 bytesthemes/bauhaus-bold/tokens.cssasset · 2,767 bytesthemes/blueprint/theme.jsonasset · 744 bytesthemes/blueprint/tokens.cssasset · 2,957 bytesthemes/bold-signal/theme.jsonasset · 956 bytesthemes/bold-signal/tokens.cssasset · 3,184 bytesthemes/chalk-garden/theme.jsonasset · 705 bytesthemes/chalk-garden/tokens.cssasset · 2,917 bytesthemes/creative-voltage/theme.jsonasset · 970 bytesthemes/creative-voltage/tokens.cssasset · 3,087 bytesthemes/dark-botanical/theme.jsonasset · 911 bytesthemes/dark-botanical/tokens.cssasset · 3,211 bytesthemes/dune/theme.jsonasset · 879 bytesthemes/dune/tokens.cssasset · 2,920 bytesthemes/electric-studio/theme.jsonasset · 885 bytesthemes/electric-studio/tokens.cssasset · 3,013 bytesthemes/forest-ink/theme.jsonasset · 902 bytesthemes/forest-ink/tokens.cssasset · 3,337 bytesthemes/indigo-porcelain/theme.jsonasset · 953 bytesthemes/indigo-porcelain/tokens.cssasset · 2,931 bytesthemes/kraft-paper/theme.jsonasset · 869 bytesthemes/kraft-paper/tokens.cssasset · 3,241 bytesthemes/midnight-press/theme.jsonasset · 623 bytesthemes/midnight-press/tokens.cssasset · 2,455 bytesthemes/monochrome-print/theme.jsonasset · 818 bytesthemes/monochrome-print/tokens.cssasset · 2,754 bytesthemes/neon-cyber/theme.jsonasset · 874 bytesthemes/neon-cyber/tokens.cssasset · 3,451 bytesthemes/newsroom/theme.jsonasset · 734 bytesthemes/newsroom/tokens.cssasset · 3,052 bytesthemes/paper-press/theme.jsonasset · 637 bytesthemes/paper-press/tokens.cssasset · 2,920 bytesthemes/pastel-dream/theme.jsonasset · 908 bytesthemes/pastel-dream/tokens.cssasset · 3,415 bytesthemes/split-canvas/theme.jsonasset · 888 bytesthemes/split-canvas/tokens.cssasset · 3,100 bytesthemes/sunset-zine/theme.jsonasset · 745 bytesthemes/sunset-zine/tokens.cssasset · 3,120 bytesthemes/swiss-ikb/theme.jsonasset · 1,048 bytesthemes/swiss-ikb/tokens.cssasset · 3,735 bytesthemes/terminal-green/theme.jsonasset · 780 bytesthemes/terminal-green/tokens.cssasset · 3,098 bytesthemes/vintage-editorial/theme.jsonasset · 970 bytesthemes/vintage-editorial/tokens.cssasset · 3,274 bytesthemes/warm-keynote/theme.jsonasset · 681 bytesthemes/warm-keynote/tokens.cssasset · 2,849 bytes
Read excerpt
# Web Video Presentation
把一篇文章或口播稿,一步步做成可录屏的"伪装成视频的网页",可选合成
口播音频。产出物 = Vite + React + TS 项目 + 按章节切分的音频。
## 适用场景
- "我有口播稿 / 一篇文章,帮我做成视频" —— 口播驱动的内容
- 想做 "动态 PPT"
- 16:9 横屏录屏,大字、留白、每屏都要有动效
- 教学 / 产品演示 / keynote 想要电影感
- B 站 / YouTube /抖音视频内容
本 Skill **以方法论 + 协作流程为核心**。脚手架模板提供 token 和原语,