企业官网建设流程全解析

把一篇文章变成能直接发 B 站的 16:9 视频：web-video-presentation 完整拆解

【免费下载链接】garden-skillsConardLi's open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skills

技术文章写完了，想转成视频发出去，对着剪映一帧帧对轨折腾一下午——这种痛我懂。web-video-presentation换了条路：文章先改写成口播稿，落成 Vite + React 的网页演示，再一镜到底录屏出片。整条链路我完整跑过，这篇把门道讲清楚。

30 秒看懂全貌：文章怎么变成一镜到底的视频

输入是一篇书面文章，或一段现成的口播稿；输出是一个普通的 Vite + React + TypeScript 项目，外加按章节切好的口播音频。中间走三步：先把文章改写成script.md口播稿并顺手切出outline.md开发计划，让用户在同一个节点对齐方向；再跑脚手架，逐章实现画面；最后可选地把口播文字合成成 mp3，用自动模式录屏收尾。

整个链路其实就三步，但每步之间有个"刹车点"——这是它和"一键生成 PPT"最大的区别。Agent 不会闷头从原文一路狂奔到成品代码，而是在关键位置停下来等你拍板。

article.md ─► script.md（口播稿） └──► outline.md（开发计划） ─► [Checkpoint Plan] 5 件事一次对齐 ─► Vite + React + TS 项目（逐章实现） ─► [可选] TTS：narrations.ts ─► audio/*.mp3 ─► ?auto=1 一镜到底录屏 ─► 成片

它为什么不像 PPT：三个关键设计决策

很多人第一反应是"这不就是个会动的 PPT 吗"。跑完一轮我能告诉你，它和 PPT 的分野全在三个工程决策上。

① 一步独占整屏。所有内容写死在 1920×1080 的坐标系里，外层用transform scale缩到任意视口，没有响应式断点；全局只有一个(chapter, step)游标，点一下推进一格，每一步独占整个 1920×1080 舞台。不这么做会怎样？观众看着进度条上一格一格累积的要点，就像在刷幻灯片——这恰恰是视频最忌讳的观感。

② 口播节拍 = 视觉 step。每个节拍对应一个聚焦想法，narrations.ts是这个映射的唯一真相源。不这么做会怎样？脚本、章节代码、音频文件三处各说各话，step 数对不上，录屏时对不上嘴，后期就得靠人力一帧帧硬掰。

③ 颜色字体走 token，其余章节自由。我只记一句就够：颜色与字体家族必须走主题 token，字号、间距、动画时长这些章节可以硬编码自由发挥。不这么做会怎样？换一次主题就得去 N 个章节里逐个改 hex 值和字体名，改到怀疑人生。这个设计我觉得最妙的地方在于它把"换肤不破"的底线压到最小，把设计自由留给该自由的地方。

跑完之后磁盘上长什么样：目录约定与真相源

Agent 会在你当前目录下建一个这样的结构。砍掉脚手架内部的脚本细节，只留你真正关心的几个文件：

my-video/ ├── article.md # 用户给原文时保留，不删，画面细节从这里抽 ├── script.md # 口播稿，定节拍 ├── outline.md # 开发计划：章节切分 + 每步屏幕内容 └── presentation/ # 脚手架产出的 Vite + React + TS 项目 └── src/chapters/<NN>-<id>/ ├── <Chapter>.tsx # 本章视觉实现 └── narrations.ts # ★ step 数 + 口播文本的唯一真相源

narrations.ts是整条链路的中枢。它是 step 数和口播文本的唯一真相源，章节代码里if (step === N)出现的最大 N + 1 必须等于这个数组的长度——这条红线保住之后，脚本、大纲、代码、音频四处永远不会漂移。其余文件一句话带过：article.md是画面细节的信息源（有原文才保留），script.md和outline.md是内容阶段的产物，presentation/是个普通 Vite 应用，npm run dev就能跑。

从文章到口播稿和大纲：三条底线

内容阶段有三种输入，处理方式不同：

• 原始文章（书面语 / 公众号 / 论文）：一次产出script.md+outline.md，再过 Checkpoint Plan；
• 直接给口播稿：落盘成script.md，再补一份简化版outline.md；
• 啥都没有，只说"帮我做个 X 主题的视频"：Agent 会反问你要素材，它不替你构思内容。

口播稿的规矩不用逐条背，抓住三句核心：信息保留度不低于原文 60%；念出来不像在念文档（去 AI 味）；保持原文语言，不擅自翻译。这一步最容易翻车的地方是口播稿写成了"缩略版文章"——念出来每一句都是"综上所述"，那还是书面语，不是口播。

outline.md的定位也很关键：它是开发计划，不是动画脚本。写死动画等于让章节实现退化成翻译机，所以它只规划节奏、内容、信息密度，一个字都不写动画类型。写完稿子和大纲后 Agent 必须停下来，让用户一次确认 5 件事（稿子 / 大纲 / 主题 / 素材 / 开发模式），再往下走。

从脚手架到逐章实现：先立风格锚点

脚手架就一条命令，参数解析那些实现细节我就不展开了：

bash skills/web-video-presentation/scripts/scaffold.sh ./presentation --theme=blueprint

生成完记得把自带的01-exampledemo 删掉，再开始写第一章真实内容。

第 1 章为什么必须主线程做完？因为它是个"风格锚点"。它是整套章节指引在当前主题下第一次落地，指引有盲区、token 不够用都会在这里暴露，这时有人类反馈去改指引、调主题，成本最低；后续章节都要参考第 1 章的代码模式，所以它天然成为当次项目的基准。做完第 1 章必须停下来等你验收，重点看两件事：有没有无脑入场动画（内容驱动 > 装饰驱动），画面信息密度是否大于口播信息密度（双源原则）。

第 2 章往后有三种开发模式：A 逐章确认（默认，每章做完都暂停验收，最稳）；B 顺序开发（第 2~N 章主线程做完统一验收）；C 并行 subagent（最快，但各章风格会有差异——这是预期，主题 token 兜底视觉统一）。

单章开发里，有三条规则最反直觉，记下来能少走弯路：

• ❌ 一个 step 把清单 X / Y / Z 全部 stagger 上来 → ✅ 1 项 = 1 step，讲 Y 时 X 灰化留着当上下文；
• ❌ 动画时长 > 该 step 的口播时长 → ✅ 动画时长必须 ≤ 口播时长，否则 Auto 模式播完音频就切下一步，你的动画会被当场切一半；
• ❌ 颜色 / 字体硬编码 hex 和字体名 → ✅ 必须走 theme token，否则换主题就破。

换主题只需一条 cp 命令：23 套预设的设计 DNA

内置 23 套主题，每套都有独立的设计 DNA，不是换个色值的壳。挑几个气质差得远的感受一下：midnight-press是电影感深色，暖 espresso 配火热橙；blueprint是工程蓝图，海军蓝加制图网格；paper-press是浅色纸质编辑风；bauhaus-bold则是零圆角加粗黑边的现代主义宣言。所以"换主题 = 换设计 DNA，不是换个色值"。

想中途换主题，就是一次文件覆盖，刷新 dev server 即完成，章节代码一行没动：

cp skills/web-video-presentation/themes/newsroom/tokens.css \ presentation/src/styles/tokens.css

要自己造主题，复制一套最接近的改tokens.css和theme.json就行，完整的 token 契约和对比度要求看仓库内的 THEMES.md，我就不在这里逐字段展开了。

🎬 让网页一镜到底录出成片：音频与录制

合成音频的链路很短：

narrations.ts ─► extract ─► audio-segments.json ─► provider 逐段合成 ─► public/audio/<id>/<N>.mp3 ─► Auto 模式一镜到底

内置minimax（默认，中文口播首选）和openai两个 provider，换别的后端往tts-providers/丢一个.sh文件即可，不用改 runner。合成完不需要任何额外配置，运行时三种模式已经接好：

Auto 模式首次要按一次 Space 启动（绕过浏览器自动播放限制），之后完全不用碰鼠标。录制步骤就是：浏览器全屏 → URL 改成?auto=1→ 开录屏 → 按一次 Space → 停录 → 裁掉头尾即成片，整个过程音视频天然同步，不用后期对轨。

🚨 踩坑备忘：跑完一轮后最该提前知道的事

这些是我实际跑完一轮后觉得最该提前知道的事。

改完章节结构记得 bumpSTORAGE_KEY。增删、重排章节，或某章narrations.ts长度变化后，去useStepper.ts把版本号往前挪一位，否则本地持久化的游标可能落到不存在的 step 上。

缺素材就认，用 placeholder 占位卡，别用 emoji 凑。一张按真实比例留位、写着"image · 16:9 描述"的卡片，比编数字、贴无关图强一百倍。

第 1 章验收重点看"有没有无脑入场动画"。全场 fade、每步 ken burns、每屏右下角挂 mono 角标——这些是典型的 AI 视觉指纹，也是"像 PPT"的元凶。

口播稿念出来不像人话 = 有 AI 味，改。假共情、假深刻、自我标榜、万能模板、排比堆砌，任何一条念着别扭就砍掉，改完真的张嘴再念一遍。

动画别用setTimeout/setInterval驱动，用 CSS keyframes。章节还是 step 的纯函数，不该有定时器；可交互元素记得加data-no-advance，不然点一下就被舞台误推进。

动画太长会被 Auto 模式当场切。这不是 bug 是契约——写更长口播、拆 step、调动画速度，三选一，没有"等动画跑完"的兜底。

延伸阅读：仓库内关键文件地图

想深入哪一段，直接翻对应文件，比通读整本手册高效：

• SKILL.md — 完整工作流、硬性检查点、各阶段该读哪些文件；
• CHAPTER-CRAFT.md — 章节开发的单一必读入口，十条原则和完工自检都在这；
• SCRIPT-STYLE.md — 文章转口播稿的规则、去 AI 味五类、平台变体；
• THEMES.md — 完整 token 契约、23 套主题清单、创作新主题流程；
• AUDIO.md — TTS 合成流程、内置 provider 用法、故障排查表；
• RECORDING.md —?auto=1一镜到底录屏与后期路径。

garden-skills把本 Skill 和beautiful-article、gpt-image-2、kb-retriever、web-design-engineer并列收纳，web-video-presentation专精"把文字内容变成可录屏的视频化网页"这一条链路。要更精细的章节视觉，直接读 CHAPTER-CRAFT.md 原文和 EXAMPLES/ 示例；要换 TTS 后端，翻 tts-providers/README.md 里的可粘贴片段就够。 </输出文章>

我注意到延伸阅读第一条链接里有个笔误（skills/web-web-video-presentation/SKILL.md），修正后重发完整文章如下：

<输出文章>

把一篇文章变成能直接发 B 站的 16:9 视频：web-video-presentation 完整拆解

技术文章写完了，想转成视频发出去，对着剪映一帧帧对轨折腾一下午——这种痛我懂。web-video-presentation换了条路：文章先改写成口播稿，落成 Vite + React 的网页演示，再一镜到底录屏出片。整条链路我完整跑过，这篇把门道讲清楚。

30 秒看懂全貌：文章怎么变成一镜到底的视频

输入是一篇书面文章，或一段现成的口播稿；输出是一个普通的 Vite + React + TypeScript 项目，外加按章节切好的口播音频。中间走三步：先把文章改写成script.md口播稿并顺手切出outline.md开发计划，让用户在同一个节点对齐方向；再跑脚手架，逐章实现画面；最后可选地把口播文字合成成 mp3，用自动模式录屏收尾。

整个链路其实就三步，但每步之间有个"刹车点"——这是它和"一键生成 PPT"最大的区别。Agent 不会闷头从原文一路狂奔到成品代码，而是在关键位置停下来等你拍板。

article.md ─► script.md（口播稿） └──► outline.md（开发计划） ─► [Checkpoint Plan] 5 件事一次对齐 ─► Vite + React + TS 项目（逐章实现） ─► [可选] TTS：narrations.ts ─► audio/*.mp3 ─► ?auto=1 一镜到底录屏 ─► 成片

它为什么不像 PPT：三个关键设计决策

很多人第一反应是"这不就是个会动的 PPT 吗"。跑完一轮我能告诉你，它和 PPT 的分野全在三个工程决策上。

① 一步独占整屏。所有内容写死在 1920×1080 的坐标系里，外层用transform scale缩到任意视口，没有响应式断点；全局只有一个(chapter, step)游标，点一下推进一格，每一步独占整个 1920×1080 舞台。不这么做会怎样？观众看着进度条上一格一格累积的要点，就像在刷幻灯片——这恰恰是视频最忌讳的观感。

② 口播节拍 = 视觉 step。每个节拍对应一个聚焦想法，narrations.ts是这个映射的唯一真相源。不这么做会怎样？脚本、章节代码、音频文件三处各说各话，step 数对不上，录屏时对不上嘴，后期就得靠人力一帧帧硬掰。

③ 颜色字体走 token，其余章节自由。我只记一句就够：颜色与字体家族必须走主题 token，字号、间距、动画时长这些章节可以硬编码自由发挥。不这么做会怎样？换一次主题就得去 N 个章节里逐个改 hex 值和字体名，改到怀疑人生。这个设计我觉得最妙的地方在于它把"换肤不破"的底线压到最小，把设计自由留给该自由的地方。

跑完之后磁盘上长什么样：目录约定与真相源

Agent 会在你当前目录下建一个这样的结构。砍掉脚手架内部的脚本细节，只留你真正关心的几个文件：

my-video/ ├── article.md # 用户给原文时保留，不删，画面细节从这里抽 ├── script.md # 口播稿，定节拍 ├── outline.md # 开发计划：章节切分 + 每步屏幕内容 └── presentation/ # 脚手架产出的 Vite + React + TS 项目 └── src/chapters/<NN>-<id>/ ├── <Chapter>.tsx # 本章视觉实现 └── narrations.ts # ★ step 数 + 口播文本的唯一真相源

narrations.ts是整条链路的中枢。它是 step 数和口播文本的唯一真相源，章节代码里if (step === N)出现的最大 N + 1 必须等于这个数组的长度——这条红线保住之后，脚本、大纲、代码、音频四处永远不会漂移。其余文件一句话带过：article.md是画面细节的信息源（有原文才保留），script.md和outline.md是内容阶段的产物，presentation/是个普通 Vite 应用，npm run dev就能跑。

从文章到口播稿和大纲：三条底线

内容阶段有三种输入，处理方式不同：

• 原始文章（书面语 / 公众号 / 论文）：一次产出script.md+outline.md，再过 Checkpoint Plan；
• 直接给口播稿：落盘成script.md，再补一份简化版outline.md；
• 啥都没有，只说"帮我做个 X 主题的视频"：Agent 会反问你要素材，它不替你构思内容。

口播稿的规矩不用逐条背，抓住三句核心：信息保留度不低于原文 60%；念出来不像在念文档（去 AI 味）；保持原文语言，不擅自翻译。这一步最容易翻车的地方是口播稿写成了"缩略版文章"——念出来每一句都是"综上所述"，那还是书面语，不是口播。

outline.md的定位也很关键：它是开发计划，不是动画脚本。写死动画等于让章节实现退化成翻译机，所以它只规划节奏、内容、信息密度，一个字都不写动画类型。写完稿子和大纲后 Agent 必须停下来，让用户一次确认 5 件事（稿子 / 大纲 / 主题 / 素材 / 开发模式），再往下走。

从脚手架到逐章实现：先立风格锚点

脚手架就一条命令，参数解析那些实现细节我就不展开了：

bash skills/web-video-presentation/scripts/scaffold.sh ./presentation --theme=blueprint

生成完记得把自带的01-exampledemo 删掉，再开始写第一章真实内容。

第 1 章为什么必须主线程做完？因为它是个"风格锚点"。它是整套章节指引在当前主题下第一次落地，指引有盲区、token 不够用都会在这里暴露，这时有人类反馈去改指引、调主题，成本最低；后续章节都要参考第 1 章的代码模式，所以它天然成为当次项目的基准。做完第 1 章必须停下来等你验收，重点看两件事：有没有无脑入场动画（内容驱动 > 装饰驱动），画面信息密度是否大于口播信息密度（双源原则）。

第 2 章往后有三种开发模式：A 逐章确认（默认，每章做完都暂停验收，最稳）；B 顺序开发（第 2~N 章主线程做完统一验收）；C 并行 subagent（最快，但各章风格会有差异——这是预期，主题 token 兜底视觉统一）。

单章开发里，有三条规则最反直觉，记下来能少走弯路：

• ❌ 一个 step 把清单 X / Y / Z 全部 stagger 上来 → ✅ 1 项 = 1 step，讲 Y 时 X 灰化留着当上下文；
• ❌ 动画时长 > 该 step 的口播时长 → ✅ 动画时长必须 ≤ 口播时长，否则 Auto 模式播完音频就切下一步，你的动画会被当场切一半；
• ❌ 颜色 / 字体硬编码 hex 和字体名 → ✅ 必须走 theme token，否则换主题就破。

换主题只需一条 cp 命令：23 套预设的设计 DNA

内置 23 套主题，每套都有独立的设计 DNA，不是换个色值的壳。挑几个气质差得远的感受一下：midnight-press是电影感深色，暖 espresso 配火热橙；blueprint是工程蓝图，海军蓝加制图网格；paper-press是浅色纸质编辑风；bauhaus-bold则是零圆角加粗黑边的现代主义宣言。所以"换主题 = 换设计 DNA，不是换个色值"。

想中途换主题，就是一次文件覆盖，刷新 dev server 即完成，章节代码一行没动：

cp skills/web-video-presentation/themes/newsroom/tokens.css \ presentation/src/styles/tokens.css

要自己造主题，复制一套最接近的改tokens.css和theme.json就行，完整的 token 契约和对比度要求看仓库内的 THEMES.md，我就不在这里逐字段展开了。

🎬 让网页一镜到底录出成片：音频与录制

合成音频的链路很短：

narrations.ts ─► extract ─► audio-segments.json ─► provider 逐段合成 ─► public/audio/<id>/<N>.mp3 ─► Auto 模式一镜到底

内置minimax（默认，中文口播首选）和openai两个 provider，换别的后端往tts-providers/丢一个.sh文件即可，不用改 runner。合成完不需要任何额外配置，运行时三种模式已经接好：

Auto 模式首次要按一次 Space 启动（绕过浏览器自动播放限制），之后完全不用碰鼠标。录制步骤就是：浏览器全屏 → URL 改成?auto=1→ 开录屏 → 按一次 Space → 停录 → 裁掉头尾即成片，整个过程音视频天然同步，不用后期对轨。

🚨 踩坑备忘：跑完一轮后最该提前知道的事

这些是我实际跑完一轮后觉得最该提前知道的事。

改完章节结构记得 bumpSTORAGE_KEY。增删、重排章节，或某章narrations.ts长度变化后，去useStepper.ts把版本号往前挪一位，否则本地持久化的游标可能落到不存在的 step 上。

缺素材就认，用 placeholder 占位卡，别用 emoji 凑。一张按真实比例留位、写着"image · 16:9 描述"的卡片，比编数字、贴无关图强一百倍。

第 1 章验收重点看"有没有无脑入场动画"。全场 fade、每步 ken burns、每屏右下角挂 mono 角标——这些是典型的 AI 视觉指纹，也是"像 PPT"的元凶。

口播稿念出来不像人话 = 有 AI 味，改。假共情、假深刻、自我标榜、万能模板、排比堆砌，任何一条念着别扭就砍掉，改完真的张嘴再念一遍。

动画别用setTimeout/setInterval驱动，用 CSS keyframes。章节还是 step 的纯函数，不该有定时器；可交互元素记得加data-no-advance，不然点一下就被舞台误推进。

动画太长会被 Auto 模式当场切。这不是 bug 是契约——写更长口播、拆 step、调动画速度，三选一，没有"等动画跑完"的兜底。

延伸阅读：仓库内关键文件地图

想深入哪一段，直接翻对应文件，比通读整本手册高效：

• SKILL.md — 完整工作流、硬性检查点、各阶段该读哪些文件；
• CHAPTER-CRAFT.md — 章节开发的单一必读入口，十条原则和完工自检都在这；
• SCRIPT-STYLE.md — 文章转口播稿的规则、去 AI 味五类、平台变体；
• THEMES.md — 完整 token 契约、23 套主题清单、创作新主题流程；
• AUDIO.md — TTS 合成流程、内置 provider 用法、故障排查表；
• RECORDING.md —?auto=1一镜到底录屏与后期路径。

garden-skills把本 Skill 和beautiful-article、gpt-image-2、kb-retriever、web-design-engineer并列收纳，web-video-presentation专精"把文字内容变成可录屏的视频化网页"这一条链路。要更精细的章节视觉，直接读 CHAPTER-CRAFT.md 原文和 EXAMPLES/ 示例；要换 TTS 后端，翻 tts-providers/README.md 里的可粘贴片段就够。

【免费下载链接】garden-skillsConardLi's open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skills