从一篇文章到一镜到底的成片web-video-presentation 网页视频制作完整指南【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skills本指南面向希望把文章或口播稿做成 16:9 可录屏网页视频的开发者。读完你将掌握 web-video-presentation 这套 skill 的端到端制作链路口播稿转换、章节开发、TTS 音频合成与一镜到底录制并理解三条贯穿全程的工程红线——narrations.ts是步数与音频的唯一真相源、颜色字体必须走主题 token、动画时长不得超过该步口播时长。一、它解决什么问题最终产物是一部能一镜到底的 mp4文字内容转视频传统路径有两条各有硬伤PPT / 幻灯片录屏画面是静态的靠人点击翻页录出来像 PPT 不像视频剪辑软件里手工做动效每个镜头都要手动对齐音频、排时间线制作成本随时长线性增长。web-video-presentation位于 skills/web-video-presentation/走的第三条路是网页本身就是视频的生产面。它让 Agent 构建一个 Vite React TypeScript 项目每个口播节拍独占 1920×1080 的整屏舞台画面随节拍逐帧演出来最后用浏览器自动播放 屏幕录制录制产物即成片不需要后期对音轨。一句话差异化别的产品产出能翻页的网页这套 skill 产出能被录成视频的系统——网页里的每个 step 都是一帧被设计过的镜头音频驱动切帧录屏即后期。最终交付物是三件东西一个可npm run dev运行的普通 Vite React TS 项目含分章节的视觉实现按章节切分的口播音频public/audio/章节id/步序号.mp3用 Auto 模式一镜到底录出的 16:9 视频文件。它明确不做的事不替用户构思内容用户啥素材都没有时skill 会反问要素材或大纲、不产出真实渲染管线不是逐帧导出的视频引擎、也不绑定任何具体样式——它沉淀的是方法论 协作流程脚手架只提供 token、舞台原语和 23 套主题深色 8 套 浅色 15 套每套都有独立设计 DNA见 references/THEMES.md每个项目的视觉语言应当重新选择。二、六条设计决策每条背后的取舍这套系统的所有工作流细节都来自下面六个决策。理解为什么这么定 付出了什么代价比记住规则本身更重要。#决策原因代价 / 边界1固定 1920×1080 舞台外层transform scale缩放适配视口没有响应式断点录屏输出必须像素级稳定可复现内容写死在坐标系里任何视口只是等比缩放不存在手机上布局塌了网页不能直接当移动端页面用它是录制介质不是响应式站点2一个全局 step 游标章节是step的纯函数全程无定时器状态完全确定同一输入必然同一画面录屏可重放、可调试useStepper.ts里连游标持久化都会做sanitize钳位不允许时间驱动的自由动画——一切视觉动作必须挂在节拍上想慢放只能写更长口播3一步一想法每个 step 独占整屏不堆叠累积的要点这是视频感的来源观众每一步只接收一个聚焦信息进度 UI 平时 opacity 0 只在鼠标悬浮时出现保证录屏画面干净step 数量会膨胀必须靠每章 3~8 步 / 每章 30~60s的经验法则控制规模4outline.md只规划节奏 内容 信息密度不写任何动画写死动画章节开发者就退化成翻译机留白让每章按内容驱动决策树现场设计动画才有真正的视频感各章动画风格会有差异这是设计预期靠主题 token 兜底视觉统一5主题 一组 CSS token theme.json元数据全片只用一个主题、一个 accent 饱和色切换主题 一次cp tokens.css文件覆盖章节代码一行不动theme.json的bestFor字段还能支撑智能推荐表达力被收束不能加第二饱和色、不能在章节间翻转明暗录屏看起来像硬剪辑层级只能靠尺度 字重6每章一个narrations.ts数组长度即步数不再手写 totalSteps这是音频合成、运行时 stepper、章节代码三方的唯一真相源根除了网页 step 和音频文件数对不上的老问题多一个文件要和.tsx里的if (step N)保持严格同步破了就录音画不同步其中第 2 条值得展开一句所谓纯函数意味着章节组件拿到step就能决定渲染什么——没有useEffect里跑倒计时、没有命令式状态。这直接支撑了三种播放模式Manual / Audio / Auto由 templates/src/hooks/useAutoMode.ts 维护之间的无损切换URL 带?audio1是半自动播音频、手动翻页?auto1是全自动播完自动推进录制用按M键随时循环切换模式会同步回 URL 保证刷新不丢状态。三、端到端路径从素材到成片的完整走法下面按实际操作顺序走一遍。整条链路的中间产物都落在用户当前目录下my-video/ ├── article.md # 用户给原文时保留——不删画面细节的第二信息源 ├── script.md # 平台化口播稿决定节拍 ├── outline.md # 开发计划章节切分 每步屏幕内容 信息池 └── presentation/ # 脚手架产出的 Vite React TS 项目 ├── src/chapters/NN-id/ │ ├── Chapter.tsx │ ├── Chapter.css │ └── narrations.ts # ★ 步数 口播文本的唯一真相源 ├── scripts/ │ ├── extract-narrations.ts │ ├── synthesize-audio.sh │ └── tts-providers/ # minimax.sh默认 openai.sh ├── audio-segments.json └── public/audio/id/N.mp3第 1 步拿到 skill。git clone https://gitcode.com/GitHub_Trending/we/garden-skills第 2 步素材判定一次产出稿子 开发计划。输入分三种情况给的是原始文章书面语 / 公众号 / 论文 / 博客就按 references/SCRIPT-STYLE.md 一次产出script.mdoutline.md给的是现成口播稿落盘成script.md后补outline.md简化版什么素材都没有只说帮我做个 X 主题视频反问——skill 不替用户构思内容。口播稿的三条底线是硬指标信息保留度 ≥ 60%len(script.md) ÷ len(article.md) ≥ 0.6口播稿是换说法不是摘要关键数字、案例、论证链不能整段消失反方观点和限制条件最容易被误删去 AI 味假共情 / 假深刻 / 自我标榜 / 万能模板 / 排比堆砌五类腔调逐条扫描保持原文语言B 站风格只调节奏不改语言。形式上按 B 站默认基准单句 ≤ 20 字、开头 3 秒内砸出钩子悬念 / 反差 / 利益禁止大家好今天我们来讲讲、用---分隔每个完整想法——一个---就是一个 step 边界。换平台则按变体表调参抖音 ≤ 12 字 1 秒钩子YouTube long-form ≤ 30 字可 30 秒铺垫知乎 ≤ 25 字小红书 ≤ 15 字。outline.md按 references/OUTLINE-FORMAT.md 的格式写它是一份用户可以直接编辑的开发计划所以是 Markdown 不是 JSON顶部引用块给主题 / 总时长中文约 250 字/分钟/ 章节数章节标题## N. id — 标题S steps · ~Ts每章首段一个信息池从article.md抽数字 / 引用 / 案例每条必须带来源标注—— 来源 article §X / Lxx让章节开发者实现画面时按需取用step 列表每步一行- step N (~Ts) — 屏幕内容估时 该步口播字数 ÷ 4中文约 4 字/秒范围 3~10s。不写动画、不写毫秒、不写实现手段——这是第 4 条设计决策在格式层的落地。章节切分的经验法则每章 3~8 步少于 3 步太薄多于 8 步观众会忘总时长 ÷ 30 秒 ≈ 章节数章节边界落在讲者会换语气 / 换主题的位置。第 3 步停下来一次对齐五件事。这是整条链路最重的一个节点Agent 必须停下让用户同时确认① 稿子script.md要不要改② 开发计划outline.md要不要改重点看章节切分、step 数、估时、信息池细节、末尾素材清单③ 选哪个主题——Agent 要动态读全部themes/*/theme.json拿bestFor/descriptionZh不要硬编码清单主动推荐 2~3 套例如★ 暗色印刷 (midnight-press) — 因为 bestFor 命中『AI / 工具评测』暖暗底 火热橙电影感终端气质④ 真素材怎么准备Agent 从现有素材挑 / 用户提供 / 全 placeholder⑤ 开发模式选 A / B / C见第 5 步。主题必须明确才能开工——用户说你帮我选就取推荐第 1 个说清楚选了什么、为什么并给反悔机会。第 4 步一键脚手架。脚本是 scripts/scaffold.sh# 从 Skill 目录外调用生成 ./presentation 并选用 paper-press 主题 bash skills/web-video-presentation/scripts/scaffold.sh ./presentation --themepaper-press # 列出全部可用主题 bash skills/web-video-presentation/scripts/scaffold.sh --list-themes脚本行为值得知道都写在源码里set -euo pipefail严格模式默认主题midnight-press未知--*参数直接报错退出目标目录已存在且非空时中止先校验npm在 PATH。实际执行是npm create vitelatest target -- --template react-ts→npm install→ 装tsx给抽取脚本用→ 删掉 Vite 默认 boilerplate → 把 templates/ 下的舞台、hooks、组件、registry、示例章节和音频管线脚本整体拷入 → 用所选主题的tokens.css覆盖src/styles/tokens.css→ 主题 id 写入.theme标记文件 → 跑一次npx tsc --noEmit确认接线无误。音频管线同时被写进package.json的 scriptsextract-narrations/synthesize-audio不需要背命令。脚手架自带一个01-exampledemo 章节写第一章真实内容前要删掉rm -rf presentation/src/chapters/01-example # 同时移除 presentation/src/registry/chapters.ts 里 EXAMPLE_CHAPTER 的 import 和数组项第 5 步第 1 章做成风格锚点强制人工验收。第 1 章没有骨架版概念必须节奏 视觉 真素材一次到位。原因很实际它是整套章节开发指引在当前主题 当前题材下的第一次落地指引有盲区、主题 token 不够用第 1 章一定会暴露——此时改指引 / 调主题成本最低后续章节又要参考第 1 章的代码模式。做完必须停下来验收清单五项视觉气质是否符合主题预期、节奏是否合适、内容驱动动画是否到位有没有无脑入场动画、画面有没有口播没念但 article 能挂的细节、反 AI 味检查紫粉渐变 / 圆角彩色边框 / 假插画 / emoji 当图标。第 2~N 章按第 3 步选定的模式推进A 逐章确认每章做完暂停验收风险最低不明确选时默认走这个、B 顺序开发第 2~N 章主线程做完统一验收、C 并行开发subagent 并行最快用户控制并行数。并行时每个 subagent 的 prompt 必须包含当前章节 outline 段落含信息池、references/CHAPTER-CRAFT.md 的路径单一必读入口、当前主题theme.json的descriptionZh/mood/bestFor、第 1 章代码作为代码风格参考而非视觉抄袭对象、硬规则每章独立 CSS 类前缀如.cd-/.mg-不修改chapters.ts完工跑npx tsc --noEmit。用户随时可以中途切换模式。第 6 步可选合成口播音频。详见下文模块深挖标准链路两条命令cd presentation npm run extract-narrations # 扫所有章节 narrations.ts → audio-segments.json # 让用户先扫一眼这个 json确认文本和切分都对再烧 token npm run synthesize-audio # 默认 minimax provider增量跳过已存在 mp3 # 或换内置 openai export OPENAI_API_KEYsk-... PRESENTATION_TTSopenai npm run synthesize-audio合成完用ffprobe逐条校验时长重点关注 ≥ 15s 的条目——口播太长意味着该 step 的 narration 写得太密或 step 没拆够此时改稿重合或回章节代码拆 step。第 7 步一镜到底录屏。前置章节做完、每章有narrations.ts、音频已合成、dev server 在跑默认http://localhost:5173端口被占自动换。流程浏览器全屏 → URL 改成http://localhost:5173/?auto1→ 看到 Press SPACE to start 蒙层即就绪 → 打开屏幕录制macOS 用 CmdShift5 / QuickTime跨平台用 OBS 窗口捕获 1920×1080 / 60fps→ 按一次 Space绕过浏览器自动播放限制→ 整片自动播完 → 停止录制 → 裁掉头尾即成片。全程不点鼠标音视频天然同步没有后期对轨环节。跳过音频合成的项目走备用路径Manual 模式手动点击推进 后期用剪辑软件配音DaVinci Resolve / iMovie / CapCut。四、关键不变量绝不能破的六条约定这六条约定是上面所有流程能自洽的前提。每条都说明为什么存在、破了会发生什么。1.narrations.length 章节代码里if (step N)的最大 N 1。为什么extract-narrations.ts 靠数组长度决定切出多少段音频运行时 stepper 也用它算每章步数。破了会怎样音频比画面少一段录到一半没声音或多一段Auto 模式在错误时点推进录音画错帧而且这种漂移只在录完整片后才暴露。空字符串是合法值——表示无声过场合成时自动跳过不烧 token运行时退化到字数估时。2. 命名链条章节 id → 注册 key → 文件夹 → 音频目录四处同一个值。对象规则示例章节 id小写 连字符coldopen、why-good章节文件夹0N-idsrc/chapters/01-coldopen/章节组件PascalCaseColdopen.tsxCSS 类前缀章节缩写防止跨章冲突.cd-/.wg-音频文件step-N.mp31-indexedpublic/audio/coldopen/1.mp3为什么抽取脚本用正则从chapters.ts配对id和../chapters/folder/narrations导入id 与文件夹后缀对不上直接抛错chapter id X registered but no matching folder found音频路径由chapters.ts的 id 直接拼出。不合法的 idwhy_good、Hook、第一章会在注册或抽取阶段就炸。3. 章节结构变了必须 bumpSTORAGE_KEY。templates/src/hooks/useStepper.ts 里游标以presentation-cursor-v4为 key 持久化在 localStorage。增删章节、重排、或某章 narrations 长度变化后把它改成v5。为什么游标会跨会话存活不 bump 时旧游标可能落在已删除的 step 上虽有sanitize钳位兜底但会静默跳位。4. 颜色与字体家族只走 token其余尺度自由。必填 token 包括表面色--shell/--surface/--surface-2/--surface-3、文字四级--text/--text-2/--text-mute/--text-faint、线条--rule、accent 三件套--accent/--accent-soft/--accent-glow、字型四族--font-display-cn/--font-display-en/--font-body/--font-mono。hero 数字、分割线、卡片、舞台装饰走 primitive class.hero-num/.rule/.card/.stage-frame自动接入主题性格章节 CSS 不要重定义它们。字号、间距、动画时长、边框宽度可以硬编码。为什么这条线画在这里换主题只做一次cp themes/id/tokens.css presentation/src/styles/tokens.css章节代码一行不动破了的典型症状是换主题后某一章颜色没变——bug 在章节里硬编码了 hex / 字体名不在主题里。5. 动画时长 ≤ 该 step 的口播时长。这是整片最容易被忽视的一条。Auto 模式的推进规则只有一句每段音频播完 200ms 缓冲 → 自动 next没有等动画跑完的兜底。动画比口播长会被当场切到下一帧录出来就是演到一半跳戏。三选一修复写更长口播 / 拆 step / 调动画速度。音频缺失或 narration 为空串时退化到字数估时max(1500ms, 字数 × 250ms)只保证预览跑通不算达标。6.article.md不删。口播稿决定节拍原文章决定画面密度——这是双源原则屏幕上的细节具体数字、引用原话、案例维度、出处时间要回article.md抽让画面信息密度 口播信息密度。只拿口播稿内容做章节 把口播打字打了一遍 PPT。五、关键模块深挖脚手架、章节注册、音频管线5.1scaffold.sh——一次性环境搭建输入目标目录位置参数缺省presentation、--themeid缺省midnight-press、--list-themes。输出可npm run dev的完整项目舞台原语Stage/ProgressBar/MaskReveal/AutoStartGate/AutoToggle、四个 hooksuseStepper/useStageScale/useAudioPlayer/useAutoMode、registrychapters.ts/types.ts、01-example示例章节、音频管线三件套extract-narrations.ts/synthesize-audio.sh/tts-providers/、选定主题的tokens.css、.theme标记文件以及写入 package.json 的两条 npm scripts。结尾打印完整操作指引含三种录制模式 URL 和换主题命令。契约严格模式 前置校验主题必须存在且含tokens.css、目标目录不能非空、npm 必须在 PATH最后跑npx tsc --noEmit不过就 exit 1保证拷进去的接线是类型正确的。常见错误✗ 找不到主题 xxxid 拼错看报错里列出的可用清单✗ 目标目录已存在且非空已中止换目录或清空✗ 需要 npmNode 环境没进 PATH。5.2 章节注册chapters.tsnarrations.ts输入每章三件套Chapter.tsx/Chapter.css/narrations.ts加一条 registry 条目{ id, title, narrations, Component }。输出CHAPTERS数组——数组顺序即放映顺序步数由narrations数组长度隐式给出代码里没有任何totalSteps字段可维护。契约narrations导出一个string[]元素必须是 string旧{text, minHoldMs}结构已移除抽取脚本遇到会直接报错索引 i 对应step i那一屏文本与script.md对应段落语义一致可为 TTS 微调标点断句但不能漏关键短语每章物理隔离——独立文件夹、独立 CSS 前缀、不跨章 import可交互元素加data-no-advance防止误推进。常见错误narrations.ts in X must export an array named narrations导出名不对数组长度和if (step N)最大 N 1 不一致录屏错位改完结构忘 bumpSTORAGE_KEY游标跳位用setTimeout/setInterval驱动动画应该用 CSS keyframes。5.3 音频管线抽取 → 合成 → 校验输入全部narrations.ts经 extract-narrations.ts 按chapters.ts注册顺序展平。输出根目录audio-segments.json[{chapter, step, text, audio}]step 1-indexed空串 step 被跳过再由 synthesize-audio.sh 逐段合成到public/audio/id/step-N.mp3。契约runner 是 provider-agnostic 的——它自己不知道任何 TTS只循环 segments、跳过已存在文件断点续合不烧重复 token、串行执行避免 rate limit、打印进度[3/24] coldopen/3.mp3 ✓ 4s。每个 provider 是scripts/tts-providers/name.sh一个文件被 runnersource进来实现三函数契约完整说明在 templates/scripts/tts-providers/README.md附 5 段可粘贴片段ElevenLabs / edge-tts / macOSsay/ Azure / Google Cloud函数必需作用tts_synthesize text out_path [voice]✓把一段文字写成 mp3 到指定路径成功 exit 0失败非零runner 标 FAILED 继续下一段tts_check可选启动时校验 CLI / key / auth未就绪返回非零runner 立即终止tts_install_help可选失败时打印怎么装 / 怎么登录 / 在哪拿 key写 provider 的两个易踩点provider 被 source 进 runner 的 shell别cd、别改IFS、局部变量全部localmacOS 默认 bash 3.2 在set -u下展开空数组会炸unbound variable可选参数用两个 if 分支调命令别用local args()技巧。内置两个minimax.sh默认mmx-cli中文口播首选未装报mmx CLI not found in PATH未登录报mmx is not authenticated和openai.shcurl-basedOPENAI_API_KEY必须OPENAI_TTS_MODEL默认tts-1、tts-1-hd约 2 倍价音色 alloy / echo / fable / onyx / nova / shimmer 默认 alloy。常见错误TTS provider X not foundname.sh不存在provider X does not define tts_synthesize没实现必需函数合成被截断单段撞到 API 长度上限OpenAI ~4096 / MiniMax ~5000 / ElevenLabs ~5000 字符——先回去拆 stepmp3 浏览器播不了provider 实际出了 wav / opus函数末尾补一步 ffmpeg 转码全部 FAILEDbash -x scripts/synthesize-audio.sh看每段实际调了什么。六、质量闸门每个交付物过了自检才许推进这套 skill 把验收做成了流程的一部分而不是可选项。三个交付物每个完成后必须走自检 → 修复 → 再汇报/推进禁止做完直接汇报交付物自检清单出处script.mdSCRIPT-STYLE.md 三层自检形式8 条原则/ 风骨去 AI 味五类/念出来真的张嘴念念到这话我说不出口的就是 AI 味outline.mdOUTLINE-FORMAT.md 自检每 step 单行屏幕内容、无具体毫秒、每章信息池 ≥ 3 条且带来源、所有(~Ts)累加 ≈ 总时长误差 10%、素材清单 ✓ / ⚠️ 标清单章实现完成CHAPTER-CRAFT.md 完工自检核查方式按能力降级优先用更隔离的方式能开独立 reviewer agentAgent Teams就开传产出文件路径 对应清单 关键上下文让它逐项核查并严格汇报哪几条 pass / fail 证据 改写建议没有 Teams 能力就用 subagent 走同样流程都没有就自己严格逐项核——不允许目测一遍就放行。铁律拿到结论后先按 fail 项把产出改完再向用户汇报做完了 自检结论 改了什么。直接拿原始结论汇报但不修复 违规。单章完工自检是清单里最重的逐项过任一未过就回去改不先放着以后修每章至少 1~2 处 CSS / SVG / Canvas / JS 视觉演示且不同 step 的主导动作不一样整章纯文字或全章同一种入场动画 验收不过清单 / 列表逐个揭示1 项 1 step讲到 Y 时 X 灰化保留作上下文hero 文字 ≥ 80px、舞台四边 ≥ 80px 安全区画面信息比口播稿多回了原文抽细节无紫粉渐变 / 圆角彩色边框 / emoji 图标 / 假数据假 logo缺素材用 placeholder 占位卡一张写着 image · 16:9 描述 的卡片按真实比例留位没有就承认没有颜色字体全走 tokennpx tsc --noEmit通过不通过禁止汇报做完了章节代码物理隔离narrations.ts长度与 step 一致且文本与 script 语义一致每步动画时长 ≤ 口播时长口播字数 ÷ 4≈ 秒数。七、反模式速查症状 → 原因 → 修复症状原因修复录屏中某步动画被切一半动画时长 该 step 口播时长Auto 模式没有等动画跑完兜底写更长口播 / 拆 step / 调动画速度三选一录屏后半段声音和画面对不上narrations.length≠ 代码最大 N 1音频段数漂移对齐两者以narrations.ts为唯一真相源回同步 outline改完章节后打开页面跳到奇怪位置旧持久化游标落在已删除 step 上bumpuseStepper.ts的STORAGE_KEY如 v4 → v5换主题后某一章颜色 / 字体没变该章节硬编码了 hex 色值或字体名找到硬编码改用 token——bug 在章节里不在主题里点了页面里的按钮整个 step 被推进可交互元素没标data-no-advance加属性Stage 对button, a, input, [data-no-advance]不触发翻页整章像 PPT纯文字堆叠、无视觉演示或一步把清单全 stagger 上来补 1~2 处动起来的图清单改成 1 项 1 stepchapter id X registered but no matching folder found章节文件夹不是NN-id格式或 id 与注册值不一致按命名链条统一id / key / 文件夹 / 音频目录同值mmx: command not found/mmx is not authenticatedmmx-cli 未安装或未登录npm install -g mmx-cli后mmx auth login --api-key sk-...全部段 FAILED 但 key 是对的model / voice 名字写错--voicealloy试默认值bash -x scripts/synthesize-audio.sh看请求体合成出的 mp3 浏览器播不了provider 实际输出 wav / opus 而非 mp3file public/audio/*/*.mp3看魔数函数末尾加 ffmpeg 转码口播稿一耳朵是机器味假共情 / 恰恰 / 反而 / 正是包装 / 自我标榜 / 万能模板 / ≥3 句同构排比五类逐条扫描去掉转折词意思没变的直接删八、文件地图不同阶段该读哪份文件长会话里 Agent 容易遗忘原则所以 skill 把文档切成按阶段取用的形态避免一次全读阶段必读按需查内容编写稿子 计划references/SCRIPT-STYLE.md references/OUTLINE-FORMAT.md article.md——选主题 / 对齐会——themes/*/theme.json动态读全部不硬编码清单、references/THEMES.md脚手架——scripts/scaffold.sh跑一次结尾自带指引实现单章每章都重复references/CHAPTER-CRAFT.md 单一入口十条原则 / 开工 5 问 / 关系→动作决策树 / 视觉工具箱 / 时长参考 / 反 AI 味 / 代码硬规则 / 完工自检 / 反馈速查 当前主题theme.json 本章 outline 段落 article.md对应段落references/EXAMPLES/hook-chapter / list-reveal / case-tech-review 结构示意——看形不照搬音频合成references/AUDIO.md含故障排查表templates/scripts/tts-providers/README.md换 provider 时录屏 后期references/RECORDING.md含?auto1自动录屏路径——选 / 造 / 切主题——references/THEMES.md完整 token 契约、23 套主题性格、创作流程、反模式九、它不解决什么说清楚边界比夸它更能帮你判断该不该用它不是视频渲染引擎。产出是网页 录屏不是逐帧导出的真实视频管线录屏质量受屏幕刷新率与录制工具约束。如果你要的是可编辑的多轨时间线、逐帧精确的合成粒子系统、3D去剪映 / DaVinci / After Effects这里不适合。它不替你想内容。用户只给主题词不给素材时skill 的第一反应是反问。内容创作、选题、脚本灵感不在射程内。它不做移动端优先。1920×1080 固定舞台是刻意的这个产物不适合直接当响应式网页发布它只是录制介质。TTS 不是播音级音色。内置 minimax / openai 对中文口播够用但要播客级声线得自己接 ElevenLabs 之类并挑音色——或者干脆跳过合成走手动配音路线。适合的场景反过来很清楚有一篇成稿的文章 / 口播稿、目标是 B 站 / YouTube / 视频号风格的横屏解说视频、希望画面在演事情而不是翻页、并且愿意让 Agent 按节拍驱动的方式开发页面。下一步的扩展方向也很直接按 THEMES.md 的创作新主题流程复制最接近的起点 → 按契约改tokens.css→ 改theme.json→ demo 章节测一遍做自己的主题 DNA按三函数契约在tts-providers/丢一个.sh接自己的 TTS 后端以及用同仓库的 gpt-image-2 skill 生成章节所需的真素材图替换 placeholder 占位卡——素材齐了第 1 章验收的画面信息密度这一关才真正过得硬。【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/16 8:42:53 · 阅读 1.2k 从一篇文章到一镜到底的成片：web-video-presentation 网页视频制作完整指南
从一篇文章到一镜到底的成片web-video-presentation 网页视频制作完整指南【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skills本指南面向希望把文章或口播稿做成 16:9 可录屏网页视频的开发者。读完你将掌握 web-video-presentation 这套 skill 的端到端制作链路口播稿转换、章节开发、TTS 音频合成与一镜到底录制并理解三条贯穿全程的工程红线——narrations.ts是步数与音频的唯一真相源、颜色字体必须走主题 token、动画时长不得超过该步口播时长。一、它解决什么问题最终产物是一部能一镜到底的 mp4文字内容转视频传统路径有两条各有硬伤PPT / 幻灯片录屏画面是静态的靠人点击翻页录出来像 PPT 不像视频剪辑软件里手工做动效每个镜头都要手动对齐音频、排时间线制作成本随时长线性增长。web-video-presentation位于 skills/web-video-presentation/走的第三条路是网页本身就是视频的生产面。它让 Agent 构建一个 Vite React TypeScript 项目每个口播节拍独占 1920×1080 的整屏舞台画面随节拍逐帧演出来最后用浏览器自动播放 屏幕录制录制产物即成片不需要后期对音轨。一句话差异化别的产品产出能翻页的网页这套 skill 产出能被录成视频的系统——网页里的每个 step 都是一帧被设计过的镜头音频驱动切帧录屏即后期。最终交付物是三件东西一个可npm run dev运行的普通 Vite React TS 项目含分章节的视觉实现按章节切分的口播音频public/audio/章节id/步序号.mp3用 Auto 模式一镜到底录出的 16:9 视频文件。它明确不做的事不替用户构思内容用户啥素材都没有时skill 会反问要素材或大纲、不产出真实渲染管线不是逐帧导出的视频引擎、也不绑定任何具体样式——它沉淀的是方法论 协作流程脚手架只提供 token、舞台原语和 23 套主题深色 8 套 浅色 15 套每套都有独立设计 DNA见 references/THEMES.md每个项目的视觉语言应当重新选择。二、六条设计决策每条背后的取舍这套系统的所有工作流细节都来自下面六个决策。理解为什么这么定 付出了什么代价比记住规则本身更重要。#决策原因代价 / 边界1固定 1920×1080 舞台外层transform scale缩放适配视口没有响应式断点录屏输出必须像素级稳定可复现内容写死在坐标系里任何视口只是等比缩放不存在手机上布局塌了网页不能直接当移动端页面用它是录制介质不是响应式站点2一个全局 step 游标章节是step的纯函数全程无定时器状态完全确定同一输入必然同一画面录屏可重放、可调试useStepper.ts里连游标持久化都会做sanitize钳位不允许时间驱动的自由动画——一切视觉动作必须挂在节拍上想慢放只能写更长口播3一步一想法每个 step 独占整屏不堆叠累积的要点这是视频感的来源观众每一步只接收一个聚焦信息进度 UI 平时 opacity 0 只在鼠标悬浮时出现保证录屏画面干净step 数量会膨胀必须靠每章 3~8 步 / 每章 30~60s的经验法则控制规模4outline.md只规划节奏 内容 信息密度不写任何动画写死动画章节开发者就退化成翻译机留白让每章按内容驱动决策树现场设计动画才有真正的视频感各章动画风格会有差异这是设计预期靠主题 token 兜底视觉统一5主题 一组 CSS token theme.json元数据全片只用一个主题、一个 accent 饱和色切换主题 一次cp tokens.css文件覆盖章节代码一行不动theme.json的bestFor字段还能支撑智能推荐表达力被收束不能加第二饱和色、不能在章节间翻转明暗录屏看起来像硬剪辑层级只能靠尺度 字重6每章一个narrations.ts数组长度即步数不再手写 totalSteps这是音频合成、运行时 stepper、章节代码三方的唯一真相源根除了网页 step 和音频文件数对不上的老问题多一个文件要和.tsx里的if (step N)保持严格同步破了就录音画不同步其中第 2 条值得展开一句所谓纯函数意味着章节组件拿到step就能决定渲染什么——没有useEffect里跑倒计时、没有命令式状态。这直接支撑了三种播放模式Manual / Audio / Auto由 templates/src/hooks/useAutoMode.ts 维护之间的无损切换URL 带?audio1是半自动播音频、手动翻页?auto1是全自动播完自动推进录制用按M键随时循环切换模式会同步回 URL 保证刷新不丢状态。三、端到端路径从素材到成片的完整走法下面按实际操作顺序走一遍。整条链路的中间产物都落在用户当前目录下my-video/ ├── article.md # 用户给原文时保留——不删画面细节的第二信息源 ├── script.md # 平台化口播稿决定节拍 ├── outline.md # 开发计划章节切分 每步屏幕内容 信息池 └── presentation/ # 脚手架产出的 Vite React TS 项目 ├── src/chapters/NN-id/ │ ├── Chapter.tsx │ ├── Chapter.css │ └── narrations.ts # ★ 步数 口播文本的唯一真相源 ├── scripts/ │ ├── extract-narrations.ts │ ├── synthesize-audio.sh │ └── tts-providers/ # minimax.sh默认 openai.sh ├── audio-segments.json └── public/audio/id/N.mp3第 1 步拿到 skill。git clone https://gitcode.com/GitHub_Trending/we/garden-skills第 2 步素材判定一次产出稿子 开发计划。输入分三种情况给的是原始文章书面语 / 公众号 / 论文 / 博客就按 references/SCRIPT-STYLE.md 一次产出script.mdoutline.md给的是现成口播稿落盘成script.md后补outline.md简化版什么素材都没有只说帮我做个 X 主题视频反问——skill 不替用户构思内容。口播稿的三条底线是硬指标信息保留度 ≥ 60%len(script.md) ÷ len(article.md) ≥ 0.6口播稿是换说法不是摘要关键数字、案例、论证链不能整段消失反方观点和限制条件最容易被误删去 AI 味假共情 / 假深刻 / 自我标榜 / 万能模板 / 排比堆砌五类腔调逐条扫描保持原文语言B 站风格只调节奏不改语言。形式上按 B 站默认基准单句 ≤ 20 字、开头 3 秒内砸出钩子悬念 / 反差 / 利益禁止大家好今天我们来讲讲、用---分隔每个完整想法——一个---就是一个 step 边界。换平台则按变体表调参抖音 ≤ 12 字 1 秒钩子YouTube long-form ≤ 30 字可 30 秒铺垫知乎 ≤ 25 字小红书 ≤ 15 字。outline.md按 references/OUTLINE-FORMAT.md 的格式写它是一份用户可以直接编辑的开发计划所以是 Markdown 不是 JSON顶部引用块给主题 / 总时长中文约 250 字/分钟/ 章节数章节标题## N. id — 标题S steps · ~Ts每章首段一个信息池从article.md抽数字 / 引用 / 案例每条必须带来源标注—— 来源 article §X / Lxx让章节开发者实现画面时按需取用step 列表每步一行- step N (~Ts) — 屏幕内容估时 该步口播字数 ÷ 4中文约 4 字/秒范围 3~10s。不写动画、不写毫秒、不写实现手段——这是第 4 条设计决策在格式层的落地。章节切分的经验法则每章 3~8 步少于 3 步太薄多于 8 步观众会忘总时长 ÷ 30 秒 ≈ 章节数章节边界落在讲者会换语气 / 换主题的位置。第 3 步停下来一次对齐五件事。这是整条链路最重的一个节点Agent 必须停下让用户同时确认① 稿子script.md要不要改② 开发计划outline.md要不要改重点看章节切分、step 数、估时、信息池细节、末尾素材清单③ 选哪个主题——Agent 要动态读全部themes/*/theme.json拿bestFor/descriptionZh不要硬编码清单主动推荐 2~3 套例如★ 暗色印刷 (midnight-press) — 因为 bestFor 命中『AI / 工具评测』暖暗底 火热橙电影感终端气质④ 真素材怎么准备Agent 从现有素材挑 / 用户提供 / 全 placeholder⑤ 开发模式选 A / B / C见第 5 步。主题必须明确才能开工——用户说你帮我选就取推荐第 1 个说清楚选了什么、为什么并给反悔机会。第 4 步一键脚手架。脚本是 scripts/scaffold.sh# 从 Skill 目录外调用生成 ./presentation 并选用 paper-press 主题 bash skills/web-video-presentation/scripts/scaffold.sh ./presentation --themepaper-press # 列出全部可用主题 bash skills/web-video-presentation/scripts/scaffold.sh --list-themes脚本行为值得知道都写在源码里set -euo pipefail严格模式默认主题midnight-press未知--*参数直接报错退出目标目录已存在且非空时中止先校验npm在 PATH。实际执行是npm create vitelatest target -- --template react-ts→npm install→ 装tsx给抽取脚本用→ 删掉 Vite 默认 boilerplate → 把 templates/ 下的舞台、hooks、组件、registry、示例章节和音频管线脚本整体拷入 → 用所选主题的tokens.css覆盖src/styles/tokens.css→ 主题 id 写入.theme标记文件 → 跑一次npx tsc --noEmit确认接线无误。音频管线同时被写进package.json的 scriptsextract-narrations/synthesize-audio不需要背命令。脚手架自带一个01-exampledemo 章节写第一章真实内容前要删掉rm -rf presentation/src/chapters/01-example # 同时移除 presentation/src/registry/chapters.ts 里 EXAMPLE_CHAPTER 的 import 和数组项第 5 步第 1 章做成风格锚点强制人工验收。第 1 章没有骨架版概念必须节奏 视觉 真素材一次到位。原因很实际它是整套章节开发指引在当前主题 当前题材下的第一次落地指引有盲区、主题 token 不够用第 1 章一定会暴露——此时改指引 / 调主题成本最低后续章节又要参考第 1 章的代码模式。做完必须停下来验收清单五项视觉气质是否符合主题预期、节奏是否合适、内容驱动动画是否到位有没有无脑入场动画、画面有没有口播没念但 article 能挂的细节、反 AI 味检查紫粉渐变 / 圆角彩色边框 / 假插画 / emoji 当图标。第 2~N 章按第 3 步选定的模式推进A 逐章确认每章做完暂停验收风险最低不明确选时默认走这个、B 顺序开发第 2~N 章主线程做完统一验收、C 并行开发subagent 并行最快用户控制并行数。并行时每个 subagent 的 prompt 必须包含当前章节 outline 段落含信息池、references/CHAPTER-CRAFT.md 的路径单一必读入口、当前主题theme.json的descriptionZh/mood/bestFor、第 1 章代码作为代码风格参考而非视觉抄袭对象、硬规则每章独立 CSS 类前缀如.cd-/.mg-不修改chapters.ts完工跑npx tsc --noEmit。用户随时可以中途切换模式。第 6 步可选合成口播音频。详见下文模块深挖标准链路两条命令cd presentation npm run extract-narrations # 扫所有章节 narrations.ts → audio-segments.json # 让用户先扫一眼这个 json确认文本和切分都对再烧 token npm run synthesize-audio # 默认 minimax provider增量跳过已存在 mp3 # 或换内置 openai export OPENAI_API_KEYsk-... PRESENTATION_TTSopenai npm run synthesize-audio合成完用ffprobe逐条校验时长重点关注 ≥ 15s 的条目——口播太长意味着该 step 的 narration 写得太密或 step 没拆够此时改稿重合或回章节代码拆 step。第 7 步一镜到底录屏。前置章节做完、每章有narrations.ts、音频已合成、dev server 在跑默认http://localhost:5173端口被占自动换。流程浏览器全屏 → URL 改成http://localhost:5173/?auto1→ 看到 Press SPACE to start 蒙层即就绪 → 打开屏幕录制macOS 用 CmdShift5 / QuickTime跨平台用 OBS 窗口捕获 1920×1080 / 60fps→ 按一次 Space绕过浏览器自动播放限制→ 整片自动播完 → 停止录制 → 裁掉头尾即成片。全程不点鼠标音视频天然同步没有后期对轨环节。跳过音频合成的项目走备用路径Manual 模式手动点击推进 后期用剪辑软件配音DaVinci Resolve / iMovie / CapCut。四、关键不变量绝不能破的六条约定这六条约定是上面所有流程能自洽的前提。每条都说明为什么存在、破了会发生什么。1.narrations.length 章节代码里if (step N)的最大 N 1。为什么extract-narrations.ts 靠数组长度决定切出多少段音频运行时 stepper 也用它算每章步数。破了会怎样音频比画面少一段录到一半没声音或多一段Auto 模式在错误时点推进录音画错帧而且这种漂移只在录完整片后才暴露。空字符串是合法值——表示无声过场合成时自动跳过不烧 token运行时退化到字数估时。2. 命名链条章节 id → 注册 key → 文件夹 → 音频目录四处同一个值。对象规则示例章节 id小写 连字符coldopen、why-good章节文件夹0N-idsrc/chapters/01-coldopen/章节组件PascalCaseColdopen.tsxCSS 类前缀章节缩写防止跨章冲突.cd-/.wg-音频文件step-N.mp31-indexedpublic/audio/coldopen/1.mp3为什么抽取脚本用正则从chapters.ts配对id和../chapters/folder/narrations导入id 与文件夹后缀对不上直接抛错chapter id X registered but no matching folder found音频路径由chapters.ts的 id 直接拼出。不合法的 idwhy_good、Hook、第一章会在注册或抽取阶段就炸。3. 章节结构变了必须 bumpSTORAGE_KEY。templates/src/hooks/useStepper.ts 里游标以presentation-cursor-v4为 key 持久化在 localStorage。增删章节、重排、或某章 narrations 长度变化后把它改成v5。为什么游标会跨会话存活不 bump 时旧游标可能落在已删除的 step 上虽有sanitize钳位兜底但会静默跳位。4. 颜色与字体家族只走 token其余尺度自由。必填 token 包括表面色--shell/--surface/--surface-2/--surface-3、文字四级--text/--text-2/--text-mute/--text-faint、线条--rule、accent 三件套--accent/--accent-soft/--accent-glow、字型四族--font-display-cn/--font-display-en/--font-body/--font-mono。hero 数字、分割线、卡片、舞台装饰走 primitive class.hero-num/.rule/.card/.stage-frame自动接入主题性格章节 CSS 不要重定义它们。字号、间距、动画时长、边框宽度可以硬编码。为什么这条线画在这里换主题只做一次cp themes/id/tokens.css presentation/src/styles/tokens.css章节代码一行不动破了的典型症状是换主题后某一章颜色没变——bug 在章节里硬编码了 hex / 字体名不在主题里。5. 动画时长 ≤ 该 step 的口播时长。这是整片最容易被忽视的一条。Auto 模式的推进规则只有一句每段音频播完 200ms 缓冲 → 自动 next没有等动画跑完的兜底。动画比口播长会被当场切到下一帧录出来就是演到一半跳戏。三选一修复写更长口播 / 拆 step / 调动画速度。音频缺失或 narration 为空串时退化到字数估时max(1500ms, 字数 × 250ms)只保证预览跑通不算达标。6.article.md不删。口播稿决定节拍原文章决定画面密度——这是双源原则屏幕上的细节具体数字、引用原话、案例维度、出处时间要回article.md抽让画面信息密度 口播信息密度。只拿口播稿内容做章节 把口播打字打了一遍 PPT。五、关键模块深挖脚手架、章节注册、音频管线5.1scaffold.sh——一次性环境搭建输入目标目录位置参数缺省presentation、--themeid缺省midnight-press、--list-themes。输出可npm run dev的完整项目舞台原语Stage/ProgressBar/MaskReveal/AutoStartGate/AutoToggle、四个 hooksuseStepper/useStageScale/useAudioPlayer/useAutoMode、registrychapters.ts/types.ts、01-example示例章节、音频管线三件套extract-narrations.ts/synthesize-audio.sh/tts-providers/、选定主题的tokens.css、.theme标记文件以及写入 package.json 的两条 npm scripts。结尾打印完整操作指引含三种录制模式 URL 和换主题命令。契约严格模式 前置校验主题必须存在且含tokens.css、目标目录不能非空、npm 必须在 PATH最后跑npx tsc --noEmit不过就 exit 1保证拷进去的接线是类型正确的。常见错误✗ 找不到主题 xxxid 拼错看报错里列出的可用清单✗ 目标目录已存在且非空已中止换目录或清空✗ 需要 npmNode 环境没进 PATH。5.2 章节注册chapters.tsnarrations.ts输入每章三件套Chapter.tsx/Chapter.css/narrations.ts加一条 registry 条目{ id, title, narrations, Component }。输出CHAPTERS数组——数组顺序即放映顺序步数由narrations数组长度隐式给出代码里没有任何totalSteps字段可维护。契约narrations导出一个string[]元素必须是 string旧{text, minHoldMs}结构已移除抽取脚本遇到会直接报错索引 i 对应step i那一屏文本与script.md对应段落语义一致可为 TTS 微调标点断句但不能漏关键短语每章物理隔离——独立文件夹、独立 CSS 前缀、不跨章 import可交互元素加data-no-advance防止误推进。常见错误narrations.ts in X must export an array named narrations导出名不对数组长度和if (step N)最大 N 1 不一致录屏错位改完结构忘 bumpSTORAGE_KEY游标跳位用setTimeout/setInterval驱动动画应该用 CSS keyframes。5.3 音频管线抽取 → 合成 → 校验输入全部narrations.ts经 extract-narrations.ts 按chapters.ts注册顺序展平。输出根目录audio-segments.json[{chapter, step, text, audio}]step 1-indexed空串 step 被跳过再由 synthesize-audio.sh 逐段合成到public/audio/id/step-N.mp3。契约runner 是 provider-agnostic 的——它自己不知道任何 TTS只循环 segments、跳过已存在文件断点续合不烧重复 token、串行执行避免 rate limit、打印进度[3/24] coldopen/3.mp3 ✓ 4s。每个 provider 是scripts/tts-providers/name.sh一个文件被 runnersource进来实现三函数契约完整说明在 templates/scripts/tts-providers/README.md附 5 段可粘贴片段ElevenLabs / edge-tts / macOSsay/ Azure / Google Cloud函数必需作用tts_synthesize text out_path [voice]✓把一段文字写成 mp3 到指定路径成功 exit 0失败非零runner 标 FAILED 继续下一段tts_check可选启动时校验 CLI / key / auth未就绪返回非零runner 立即终止tts_install_help可选失败时打印怎么装 / 怎么登录 / 在哪拿 key写 provider 的两个易踩点provider 被 source 进 runner 的 shell别cd、别改IFS、局部变量全部localmacOS 默认 bash 3.2 在set -u下展开空数组会炸unbound variable可选参数用两个 if 分支调命令别用local args()技巧。内置两个minimax.sh默认mmx-cli中文口播首选未装报mmx CLI not found in PATH未登录报mmx is not authenticated和openai.shcurl-basedOPENAI_API_KEY必须OPENAI_TTS_MODEL默认tts-1、tts-1-hd约 2 倍价音色 alloy / echo / fable / onyx / nova / shimmer 默认 alloy。常见错误TTS provider X not foundname.sh不存在provider X does not define tts_synthesize没实现必需函数合成被截断单段撞到 API 长度上限OpenAI ~4096 / MiniMax ~5000 / ElevenLabs ~5000 字符——先回去拆 stepmp3 浏览器播不了provider 实际出了 wav / opus函数末尾补一步 ffmpeg 转码全部 FAILEDbash -x scripts/synthesize-audio.sh看每段实际调了什么。六、质量闸门每个交付物过了自检才许推进这套 skill 把验收做成了流程的一部分而不是可选项。三个交付物每个完成后必须走自检 → 修复 → 再汇报/推进禁止做完直接汇报交付物自检清单出处script.mdSCRIPT-STYLE.md 三层自检形式8 条原则/ 风骨去 AI 味五类/念出来真的张嘴念念到这话我说不出口的就是 AI 味outline.mdOUTLINE-FORMAT.md 自检每 step 单行屏幕内容、无具体毫秒、每章信息池 ≥ 3 条且带来源、所有(~Ts)累加 ≈ 总时长误差 10%、素材清单 ✓ / ⚠️ 标清单章实现完成CHAPTER-CRAFT.md 完工自检核查方式按能力降级优先用更隔离的方式能开独立 reviewer agentAgent Teams就开传产出文件路径 对应清单 关键上下文让它逐项核查并严格汇报哪几条 pass / fail 证据 改写建议没有 Teams 能力就用 subagent 走同样流程都没有就自己严格逐项核——不允许目测一遍就放行。铁律拿到结论后先按 fail 项把产出改完再向用户汇报做完了 自检结论 改了什么。直接拿原始结论汇报但不修复 违规。单章完工自检是清单里最重的逐项过任一未过就回去改不先放着以后修每章至少 1~2 处 CSS / SVG / Canvas / JS 视觉演示且不同 step 的主导动作不一样整章纯文字或全章同一种入场动画 验收不过清单 / 列表逐个揭示1 项 1 step讲到 Y 时 X 灰化保留作上下文hero 文字 ≥ 80px、舞台四边 ≥ 80px 安全区画面信息比口播稿多回了原文抽细节无紫粉渐变 / 圆角彩色边框 / emoji 图标 / 假数据假 logo缺素材用 placeholder 占位卡一张写着 image · 16:9 描述 的卡片按真实比例留位没有就承认没有颜色字体全走 tokennpx tsc --noEmit通过不通过禁止汇报做完了章节代码物理隔离narrations.ts长度与 step 一致且文本与 script 语义一致每步动画时长 ≤ 口播时长口播字数 ÷ 4≈ 秒数。七、反模式速查症状 → 原因 → 修复症状原因修复录屏中某步动画被切一半动画时长 该 step 口播时长Auto 模式没有等动画跑完兜底写更长口播 / 拆 step / 调动画速度三选一录屏后半段声音和画面对不上narrations.length≠ 代码最大 N 1音频段数漂移对齐两者以narrations.ts为唯一真相源回同步 outline改完章节后打开页面跳到奇怪位置旧持久化游标落在已删除 step 上bumpuseStepper.ts的STORAGE_KEY如 v4 → v5换主题后某一章颜色 / 字体没变该章节硬编码了 hex 色值或字体名找到硬编码改用 token——bug 在章节里不在主题里点了页面里的按钮整个 step 被推进可交互元素没标data-no-advance加属性Stage 对button, a, input, [data-no-advance]不触发翻页整章像 PPT纯文字堆叠、无视觉演示或一步把清单全 stagger 上来补 1~2 处动起来的图清单改成 1 项 1 stepchapter id X registered but no matching folder found章节文件夹不是NN-id格式或 id 与注册值不一致按命名链条统一id / key / 文件夹 / 音频目录同值mmx: command not found/mmx is not authenticatedmmx-cli 未安装或未登录npm install -g mmx-cli后mmx auth login --api-key sk-...全部段 FAILED 但 key 是对的model / voice 名字写错--voicealloy试默认值bash -x scripts/synthesize-audio.sh看请求体合成出的 mp3 浏览器播不了provider 实际输出 wav / opus 而非 mp3file public/audio/*/*.mp3看魔数函数末尾加 ffmpeg 转码口播稿一耳朵是机器味假共情 / 恰恰 / 反而 / 正是包装 / 自我标榜 / 万能模板 / ≥3 句同构排比五类逐条扫描去掉转折词意思没变的直接删八、文件地图不同阶段该读哪份文件长会话里 Agent 容易遗忘原则所以 skill 把文档切成按阶段取用的形态避免一次全读阶段必读按需查内容编写稿子 计划references/SCRIPT-STYLE.md references/OUTLINE-FORMAT.md article.md——选主题 / 对齐会——themes/*/theme.json动态读全部不硬编码清单、references/THEMES.md脚手架——scripts/scaffold.sh跑一次结尾自带指引实现单章每章都重复references/CHAPTER-CRAFT.md 单一入口十条原则 / 开工 5 问 / 关系→动作决策树 / 视觉工具箱 / 时长参考 / 反 AI 味 / 代码硬规则 / 完工自检 / 反馈速查 当前主题theme.json 本章 outline 段落 article.md对应段落references/EXAMPLES/hook-chapter / list-reveal / case-tech-review 结构示意——看形不照搬音频合成references/AUDIO.md含故障排查表templates/scripts/tts-providers/README.md换 provider 时录屏 后期references/RECORDING.md含?auto1自动录屏路径——选 / 造 / 切主题——references/THEMES.md完整 token 契约、23 套主题性格、创作流程、反模式九、它不解决什么说清楚边界比夸它更能帮你判断该不该用它不是视频渲染引擎。产出是网页 录屏不是逐帧导出的真实视频管线录屏质量受屏幕刷新率与录制工具约束。如果你要的是可编辑的多轨时间线、逐帧精确的合成粒子系统、3D去剪映 / DaVinci / After Effects这里不适合。它不替你想内容。用户只给主题词不给素材时skill 的第一反应是反问。内容创作、选题、脚本灵感不在射程内。它不做移动端优先。1920×1080 固定舞台是刻意的这个产物不适合直接当响应式网页发布它只是录制介质。TTS 不是播音级音色。内置 minimax / openai 对中文口播够用但要播客级声线得自己接 ElevenLabs 之类并挑音色——或者干脆跳过合成走手动配音路线。适合的场景反过来很清楚有一篇成稿的文章 / 口播稿、目标是 B 站 / YouTube / 视频号风格的横屏解说视频、希望画面在演事情而不是翻页、并且愿意让 Agent 按节拍驱动的方式开发页面。下一步的扩展方向也很直接按 THEMES.md 的创作新主题流程复制最接近的起点 → 按契约改tokens.css→ 改theme.json→ demo 章节测一遍做自己的主题 DNA按三函数契约在tts-providers/丢一个.sh接自己的 TTS 后端以及用同仓库的 gpt-image-2 skill 生成章节所需的真素材图替换 placeholder 占位卡——素材齐了第 1 章验收的画面信息密度这一关才真正过得硬。【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考