人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载本文是 garden-skills 仓库中 web-video-presentation 技能把文章/口播稿做成伪装成视频的 16:9 点击驱动网页演示的单章开发权威指引。它以skills/web-video-presentation/references/CHAPTER-CRAFT.md为骨架结合模板源码skills/web-video-presentation/templates/src/与主题 token 系统讲透每章至少 1~2 处视觉演示、逐步揭示、双源原则、反 AI 味、代码最小约束、narrations.ts 真相源、完工自检这整套方法论。读完你将掌握写出一章有视频感、可录屏、换主题不破的章节的全部要领以及落地时的代码级红线与可执行的自检流程。一、定位校准这是视频不是 PPT章节开发的出发点不是做一页好看的幻灯片而是做视频网页——讲者点击 口播 录屏发出去给观众看。CHAPTER-CRAFT.md给出了三条非常朴素的验收标准判断每一步做对没有标准具体要求不像 PPT观众感觉是在看视频不是在看翻页幻灯。页面中不得包含页眉页脚突出主视觉元素看起来舒服配色、字体、节奏都让人放松。不得出现大量的纯文字、不得出现字体太小的文字有视觉冲击画面在演事情不只是文字堆砌。不得一次性全部罗列所有元素关键元素随进度逐步推进展现这三条贯穿后续所有章节视觉演示第二条要求的落地手段、逐步揭示第三条的落地手段、基本审美第二条的落地手段都是从它们推导出来的。值得注意不得包含页眉页脚是硬约束templates/src/styles/base.css里虽然提供了.masthead杂志刊头等辅助类但那属于框架已搭好、理解即可的演示元素章节自己的内容不要出现浏览器式页眉页脚。二、底线每章必须用 CSS / SVG / Canvas / JS 做视觉演示这是全文最重要的一条底线每一章都至少要有 1~2 处动起来的图 / 演示元素。整章只有纯文字 验收不过 回去重做。视频感最强的来源是用户看见了被讲解的东西在屏幕上演给他看。CHAPTER-CRAFT.md列出的演示形式包括数字在递增 / 横条在生长 / 排名在交换流程节点依次点亮 / 连线自绘对比被一刀切开 / 聚光灯扫过 / 形状在变形粒子聚拢成形 / 噪声背景流动 / 字符雨下落模拟终端交互、模拟 AI 对话窗口、模拟文件目录树怎么组合发挥都行——但每章必须用不允许整章纯文字。从模板源码可以印证这套要求的落地方式。脚手架自带的示例章节 Example.tsx 每个 step 都借助MaskReveal组件做遮罩式揭示if (step 0) { return ( div classNameex-scene scene-pad {/* ... */} h1 classNameex-cover-h MaskReveal show duration{900} span classNameserif-cn这是nbsp;/span /MaskReveal MaskReveal show delay{300} duration{900} span classNameserif-it ex-emfirstnbsp;step/span /MaskReveal MaskReveal show delay{650} duration{900} span classNameserif-cn./span /MaskReveal /h1 {/* ... */} /div ); }注意delay参数的错峰使用——同一个 step 内部文字逐段浮现而不是整体同时出现。这正是画面在演事情的最小实现一次点击推进后观众能眼睁睁看到内容以有节奏的方式登场。真正的内容驱动演示数字递增、流程点亮、聚光灯扫过、字符雨则要按本章主题从references/EXAMPLES/下的结构示意hook / list-reveal / case-tech-review里找灵感但那不是抄袭模板——SKILL.md明确先按内容自由设计卡壳才翻。三、逐步揭示整页内容由全局 step 驱动一项 一个 step整页内容由全局step计数器驱动——点击空白处或按 → 键推进一步。设计每一步时心里要默念这一步演什么下一步演什么。最重要的那条规则当口播在说第一是 X、第二是 Y、第三是 Z这种清单 / 列表时严禁一个 step 把 X / Y / Z 全部 stagger 上来。正确做法是一项 一个 stepX 只在它自己的 step 里独自亮起讲到 Y 时X 灰化保留作上下文 Y 亮起讲到 Z 时X / Y 都灰化 Z 亮起。判断标准讲者会一个一个念出来吗会 → 必须逐个揭示。源码级印证step 到底是怎么驱动的全局 step 由 useStepper.ts 实现章节组件本身只是step的纯函数——没有定时器、没有命令式状态。其核心机制包括每章 step 数由narrations数组长度决定useStepper通过chapters[chapter].narrations.length计算每章步数见sanitize与next/prev实现章节.tsx里if (step N)出现的最大 N 1 必须等于narrations.length。这也是 types.ts 中ChapterDef.narrations注释所强调的Length total steps in this chapter.键盘全局监听ArrowRight/Space前进ArrowLeft/Backspace后退Home回到开头End跳到末尾数字键1~9直接跳章节代码见useStepper.ts的onKey。游标防漂移游标持久化在localStorageSTORAGE_KEY presentation-cursor-v4每次读取都经sanitize重新 clamp 到当前章节列表范围内避免章节增删后持久化游标落到不存在的 step 上。这正是 SKILL.md 中大改后 bump STORAGE_KEY的由来。点击推进的边界data-no-advanceStage.tsx 的点击处理是onClick{(e) { const t e.target as HTMLElement; if (t.closest(button, a, input, [data-no-advance])) return; onAdvance(); }}章节内的可交互元素按钮 / 自定义控件必须加data-no-advance否则点它会连带着被舞台误推进 step。注意ProgressBar自己也带data-no-advance见 ProgressBar.tsx因为它是一个需要可点击的覆盖层控件。四、内容取舍与双源原则节奏跟口播稿细节回原文章视频是音 画口播负责把信息线性讲清楚画面负责把节拍重点放大、节奏感拉出来。内容取舍每个 step 屏幕上只挂这个节拍最值得放大的 1~3 个东西——一个 hero 标语 / 一个数字 / 一组对比 必要的视觉演示。不要试图把原文每个字都搬上去。那是论文阅读不是视频。双源原则CHAPTER-CRAFT.md的明确要求节奏 / 顺序 / 节拍切分跟script.md口播稿——关键顺序不能乱画面细节 / 数据 / 引用 / 案例回article.md原文章抽。outline.md已经在每章首段抽了「信息池」做参考但实现章节时也必须回去翻article.md本章对应段落——那里有比口播稿多得多的细节具体数字、引用原话、案例维度、出处时间。把这些挂到画面上让画面信息密度 口播信息密度。如果你只用了口播稿的内容做章节——屏幕等于把口播打字打了一遍——那就是 PPT不是视频。SKILL.md的 Phase 1 也印证了这一点script.md决定节拍与article.md画面信息源不删是两份并列的产出物而outline.md只规划节奏与信息密度、不规划动画——动画由章节开发时按CHAPTER-CRAFT.md的法则即时设计避免 chapter agent 退化成翻译机。五、视频演示基本审美字号、留白、配色、动画视频观众离屏幕远、注意力浮动所以字号要大hero 文字至少 80px 起远观也能看清留白要多舞台四边都要让出大留白画面不要塞满配色要舒服颜色和字体家族必须用主题 token保证换主题不破字号 / 间距 / 时长这些章节按内容自由发挥动画要舒服 炫酷出现得干净利落停下来不抢戏炫酷靠设计巧思内容驱动的演示动画不靠速度暴力或密集闪烁。源码层面字号与留白都有可参考的默认刻度。base.css 定义了完整的设计 token 字号阶梯--t-display-1约 140~200px、--t-display-2约 80~128px、--t-h1约 56~88px、--t-h2约 40~60px、--t-body20px和舞台留白默认值--stage-pad-x: 96px; --stage-pad-y: 80px;。章节点缀使用这些 token 即可轻松满足hero 至少 80px、四周大留白的要求——具体数值可以由章节自由覆写但方向不能违背。六、避免 AI 味视觉指纹清单与 placeholder 原则AI 生成的网页有几种共有的视觉指纹全部不要紫粉 / 蓝紫对角渐变背景圆角卡片 彩色左边框装饰渐变按钮 大圆角药丸emoji 当图标用假数据 / 假 logo / 假X 万用户整章 N 步用同一种入场动画全场 fade / 全场 blur每步都挂 ken burns / 光晕呼吸 / 持续闪烁每屏右下角都挂 mono 角标 / 序号缺的东西承认缺——用 placeholder 占位卡一张写着image · 16:9 描述的卡片按真实比例留位。不要用 emoji 凑、不要找无关图凑、不要编数字。没有就承认没有比 fake 强一百倍。这同时对应完工自检里的硬条目缺的素材用 placeholder不是 fake以及章节交付时主动告诉用户本章还缺这些素材。这里可以观察到一个设计自洽框架其实提供了mono 角标类.corner-mark/.click-cue/.label-mono见base.css但CHAPTER-CRAFT.md明确禁止每屏右下角都挂 mono 角标 / 序号这种滥用——原生语是每屏都挂才是问题克制使用仍是允许的。判断标准是为内容服务不是为装饰服务。七、框架已搭好的部分理解就好不需重写脚手架已经把视频的骨架全部搭好章节开发只需理解、不可重写已搭好的机制说明16:9 固定舞台内容设计在 1920×1080 上外层 transform scale 缩到任何视口外围 letterbox 留黑——没有响应式断点舞台居中 大留白上下左右四边都让出至少 80px 的安全区隐形进度条屏幕底部默认完全透明鼠标悬到底部边缘才出现支持点击跳转章节录屏时摄像头看不到任何 chrome 控件全局 step 驱动点击舞台空白处 / 键盘 ←/→ 推进章节是 step 的纯函数没有定时器、没有命令式状态源码印证三层舞台结构Stage.tsx 的注释解释了 3 层嵌套布局的设计意图.app-shell← 全视口flex 居中.stage-fitter← 尺寸为实际可见像素1920 × scale×1080 × scale让布局系统诚实地看到屏幕上到底是什么从而在任何视口 / DPR 下都能稳稳居中.stage-frame← 原始 1920×1080 盒子从左上角按transform: scale(scale)缩放进 fitter。缩放比例由 useStageScale.ts 计算scale min(可用宽 / 1920, 可用高 / 1080)其中可用宽高已为进度条等绝对定位 UI 预留marginX 80/marginY 100的呼吸空间——这正是四边至少 80px 安全区的源码出处。舞台底色 / 圆角 / 阴影 / 装饰图案 / vignette 全部由主题的.stage-frame规则自动接管见base.css的--surface-pattern、--surface-vignette等变量章节什么都不用做。隐形进度条ProgressBar.tsx 固定在视口底部pb-hover默认隐藏、悬停浮现点击章节药丸可整章跳转当前章节内的每个 step 都有独立 pip.pb-pip支持点击精确跳到任意一步。章节变更时当前章节自动scrollIntoView居中保证悬停弹出的瞬间就能看到当前进度。录屏时由于默认透明摄像头画面里看不到任何 chrome 控件。八、代码层最小约束token 铁律与工程红线CHAPTER-CRAFT.md规定了一套不能踩的红线其它怎么写都行的约束分为三档。必须用 token换主题不破的底线颜色--shell/--surface/--surface-2/--surface-3/--text/--text-2/--text-mute/--text-faint/--rule/--accent/--accent-soft/--accent-glow——禁硬编码 hex / rgb / 颜色名。字体家族--font-display-cn/--font-display-en/--font-body/--font-mono——禁硬编码字体名。主题性格签名通过 primitive class 自动接入不要在章节 CSS 里重定义它们Primitive class主题决定什么.hero-numhero 数字风格衬线 / 等宽 / 粗黑.rule分割线1px 实线 / 4px 实线 / 2px 虚线.card卡片圆角 阴影性格.stage-frame舞台底色 / 圆角 / 阴影 / 装饰图案 / vignette 全自动源码里能看到这套性格签名的真实落点。以 chalk-garden/tokens.css 为例主题通过--rule-w: 2px; --rule-style: dashed让全站分割线都变成粉笔虚线通过--hero-num-font / --hero-num-style / --hero-num-weight定义 hero 数字的手写风格通过--surface-patternSVG 噪点加胶片颗粒、--surface-vignette加暗角——章节代码只要用.hero-num、.rule这些类就自动获得该主题的性格换主题时无需改动任何章节代码。反之若章节里硬编码了一个 hex 或字体名换主题立刻破功。可硬编码 / 可 token按内容自由解锁章节自由设计字号想要 80px 就写 80px想用var(--t-h1)也行间距 / padding / margin按画面节奏写具体值动画时长 / 缓动 / keyframe按动画意图写具体值节奏气质参考theme.json的mood——慢主题别写 200ms 的快动画边框宽度 / 非性格圆角 / 字距随手写gap / grid 布局尺寸按画面构图写。base.css头部注释也明确了这条所有权划分主题拥有 COLOR / FONTS 与性格旋钮章节强制消费颜色 字体 token 与四个 primitive class其余一切字号、间距、动效时长、缓动、边框宽度、通用圆角章节自由书写token 或硬编码均可。其它工程红线不用setTimeout/setInterval驱动动画——用 CSS keyframes。这保证了章节是step 的纯函数也让 Auto 模式见下节的推进完全由音频驱动不受 JS 定时器干扰。章节内的可交互元素按钮 / 自定义控件加data-no-advance否则点了会被舞台误推进 stepStage.tsx的closest检查。章节代码物理隔离每章独立文件夹、独立 CSS 类前缀.cd-/.mg-等不跨章 import不修改chapters.ts之外的共享文件。这是模式 C 并行开发subagent能安全进行的前提。每章必须有narrations.ts与Chapter.tsx同目录数组长度章节代码里if (step N)出现的最大 N 1每个元素 一个 string该 step 要播的口播文本来自script.md对应段语义一致——可微调标点 / 断句以适配 TTS但不能漏关键短语完全无音频的过场 step 用空串Auto 模式会按字数估时撑过这是音频合成 Auto 模式自动推进的唯一真相源写错或漏写会让录屏对不上嘴。动画时长必须 ≤ 该 step 的口播时长——Auto 模式严格按音频结束推进没有等动画跑完的兜底。动画太长 → 三选一写更长口播 / 拆 step / 调动画速度。详细机制见 AUDIO.md。示例章节的 narrations.ts 完整示范了这三条约束3 个元素严格对应Example.tsx中step 0 / 1 / 2三屏每个元素是与口播语义一致的中文文本文件头注释明确写着Length number of steps the chapter component renders以及no minimum hold knob。为什么 narrations.length 是唯一真相源chapters.ts 的注释给出了设计动机每章只维护narrations数组不再有独立的totalSteps。数组长度既是 step 数又是音频合成extract-narrations.ts扫描它生成audio-segments.json与运行时 stepperuseStepper按它计算步数的唯一依据。这一设计保证了音频合成管线、运行时 stepper、章节.tsx的 step 分支三者永不漂移——SKILL.md称之为 5 处script / outline / 章节代码 / chapters.ts / 音频文件永不漂移的关键。九、narrations.ts 与音频 / Auto 模式的联动CHAPTER-CRAFT.md反复强调动画时长必须 ≤ 口播时长其根源在 useAudioPlayer.ts 的 Auto 模式推进逻辑有音频监听audio的ended事件trailMs默认 200ms 缓冲后自动next()无音频 / 文件缺失 / 播放失败退化为字数估时estimateFallbackMs max(1500ms, 字数 × 250ms)约 4 字/秒见 App.tsx 的estimateMs明确没有最小停留旋钮useAudioPlayer的注释直言Audio playback is the sole driver of step duration——there is intentionally no minimum hold knob。视觉动画比口播长就会被当场切断。三种播放模式的切换由 useAutoMode.ts 管理URL?auto1进 Auto、?audio1进半自动 Audio、按M键循环 manual → audio → autoAuto 模式首次需要按一次Space启动绕过浏览器自动播放限制此后整片全自动跑完录屏可一镜到底。详细的合成流程、provider 选择与故障排查见 AUDIO.md。这一联动就是narrations 写错 录屏对不上嘴的直接原因narration 文本会原样进入 TTS 合成每段音频长度又直接决定每个 step 的停留时间——所以完工自检要求每条 narration 文本与script.md对应段落语义一致并要求每个 step 的视觉动画时长 ≤ 口播时长口播字数 ÷ 4 ≈ 秒数。十、完工自检写完每章强制执行的硬性流程CHAPTER-CRAFT.md规定章节实现完成后必须走自检 → 修复 → 汇报三步禁止实现完成 → 直接汇报给用户。执行方式按能力降级优先 Agent Teams开一个独立的 reviewer agent传入本章代码路径 完工自检清单让它逐项核查 出结论哪几条 pass / 哪几条 fail 证据其次 subAgent当前 agent 没有 Teams 能力但能开 subagent用 subagent 走同样的流程都没有当前 agent 自己严格逐项核查不允许目测一遍就放行。拿到自检结论后先按 fail 项改完代码然后再向用户汇报做完了 自检结论 改了什么。直接拿原始结论汇报但不修复 违规。SKILL.md的硬性自检协议把这套流程推广到了script.md与outline.md。写完一章 在浏览器点完一遍后逐项过以下清单每章至少 1~2 处 CSS / SVG / Canvas / JS 视觉演示——没有 回去补不同 step 的主导动作不一样——全章一种动画 回去重做字号大、留白舒服、配色舒服清单 / 列表逐个揭示1 项 1 step画面信息比口播稿多回了原文章抽细节挂上来没有紫粉渐变 / 圆角彩色边框 / emoji / 假数据 / 假 logo缺的素材用 placeholder不是 fake颜色和字体家族全部走 token无硬编码 hex / 字体名hero 数字 / 卡片 / 分割线 / 舞台用 primitive class 接入主题性格——这两条不达标 换主题就破章节交付时主动告诉用户本章还缺这些素材禁止出现小号字体、大量纯文字出现后必须回去改禁止出现任何形式的页眉页脚仅展示关键内容出现后必须回去改npx tsc --noEmit通过——不通过禁止汇报做完了章节代码物理隔离独立 CSS 类前缀.cd-/.mg-/ ...未跨章 import未修改chapters.ts之外的共享文件narrations.ts存在且narrations.length 章节代码里if (step N)用到的最大 N 1不一致 Auto 模式录屏会错位每条 narration 文本与script.md对应段落语义一致关键短语 / 数字 / 引用全部保留可为 TTS 微调标点断句——录屏画外音应当能被观众听成同一段稿子每个 step 的视觉动画时长 ≤ 口播时长口播字数 ÷ 4≈ 秒数——超出会被 Auto 模式当场切断动画演到一半就跳下一步任一未过 → 回去改。不要先放着以后修。结语把这份指引当单一必读入口用CHAPTER-CRAFT.md在SKILL.md的各阶段文件读取指南中被定义为Phase 2.4 实现单章的单一必读入口——十条原则 / 开工自问 / 内容驱动决策 / 视觉工具箱 / 时长参考 / 反 AI 味反模式 / 代码硬规则含 narrations.ts 强制约束/ 完工自检 / 反馈速查全部并入了这一份文件。写章节时只读它 当前主题的theme.json 当前章节的outline.md段落 article.md本章对应段落 素材清单即可references/EXAMPLES/不是必读卡壳才翻。把这套视频不是 PPT、每章必须有视觉演示、逐步揭示、双源原则、token 铁律、narrations 真相源、完工必自检的方法论内化到每一次章节开发中产出的就不是会翻页的幻灯片而是真正有电影感的可录屏视频网页。赞分享人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载相关推荐web-video-presentation 的 outline.md 格式规范把口播稿拆解为可开发的视频章节规划web video presentation 的 outline.md 格式规范把口播稿拆解为可开发的视频章节规划 导读 outline.md 是 web v人工智能AI 技能/插件提示工程web-video-presentation 的 list-reveal anchor列举型章节逐项揭示的实现指南web video presentation 的 list reveal anchor列举型章节逐项揭示的实现指南 导读 list reveal 是 ga人工智能AI 技能/插件提示工程Pixelle-Video 视频模板开发完全指南从内置模板到自定义 HTML 模板Pixelle Video 视频模板开发完全指南从内置模板到自定义 HTML 模板 本指南系统讲解 Pixelle VideoAI 全自动短视频引擎中视频人工智能AI 应用音视频媒体生成上一篇WriteGPT性能深度评测不同硬件配置下的AI创作表现对比分析下一篇research_tao深度解析从选题到发表的完整科研流程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考