尧图网站建设 
人工智能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技能下hook-chapter钩子型开场章节 anchor 的完整技术拆解。它回答视频制作中最关键的一个问题如何在开头 3~5 秒抓住观众——通过抛 N 张可疑图 → 逐个揭示反例 → 切大字 hero takeover的节奏把悬念型开场做成不像 PPT 的视频。读完本文你将掌握该 anchor 的六步结构骨架、每一步的节奏意图与视觉实现、为什么清单内容必须1 项 1 step逐个揭示、以及如何把这套骨架换装到bauhaus-bold、terminal-green、chalk-garden、midnight-press等不同主题。文中所有节奏决策、字号关系与动画手段均有 chapter.tsx 与 chapter.css 的源码级实现佐证。hook-chapter 是什么定位与适用场景在 web-video-presentation 技能的章节 anchor 体系中hook-chapter是视频开头最常用的章节类型。它的本质动作是抛 N 张可疑图 / 反例 / 截图 → 引出主题 → 切大字 hero takeover。参考文档 hook-chapter/README.md 给出了三个典型适用场景悬念型开头先甩 3~4 张让人怀疑 / 困惑的图再揭示原因今天聊聊 X 的几个翻车现场先看翻车再切主题产品发布的问题感开场先看痛点截图再揭示新功能。它和另一个 anchorlist-reveal列举型逐个揭示形成互补list-reveal 用于视频中段主题 N 个并列子项的清单类章节而 hook-chapter 专门服务开场的悬念铺垫。二者共享同一条底层原则——清单必须逐项揭示详见下文。⚠️ 重要前提hook-chapter 是结构示意不是抄袭模板。README 明确要求先走 CHAPTER-CRAFT.md 的开工五问保留 anchor 的 step 切分逻辑、字号关系、布局原则再按本项目主题与内容自由选择动作选型反过来直接照抄就是 CHAPTER-CRAFT.md 中整章只用一种入场动画的同质化反模式。结构骨架六步的 outline 章节段N2 步hook-chapter 的标准结构是N2 步N 张反例图 1 步 takeover 1 步收束对应 outline.md 中一段抽象章节。原文给出了可直接沿用的骨架6 steps 示例## 2. hook — 章节标题6 steps - **step 1** (~4s) — N 张可疑图片占位虚线 ghost 卡片 - **step 2** (~5s) — 第 1 张露出反例 1 描述独占视觉 - **step 3** (~5s) — 第 2 张露出反例 2 描述独占视觉 - **step 4** (~5s) — 第 3 张露出反例 3 描述独占视觉 - **step 5** (~4s) — 三张图同时缩入侧栏中间出 主题大字 takeover - **step 6** (~3s) — 切到下一句钩子被 brush 划掉从 chapter.tsx 的实现看章节组件是全局step计数器的纯函数step 0渲染三张 ghost 卡片step 1 step 3逐张渲染独占大图step 4渲染 takeover 场景其余情况渲染收束场景。这与 CHAPTER-CRAFT.md 的每步独占整屏原则完全对应——章节代码没有定时器、没有命令式状态。关键节奏决策每一步在演什么README 用一张表总结了每一步的节奏意图与视觉实现这是本 anchor 的灵魂逐行继承如下step节奏意图视觉1抛悬念 —— N 张未知虚线 ghost 卡片1/3 屏一张2-N每张图独占视觉—— 重点不是凑数是让观众盯着每张图想这是真的吗大图占据 ~70% 屏幕旁边小字标注图源N1takeover —— 揭示主题三张缩成左侧迷你卡中间巨字末钩子收束brush 划掉旧概念引下一章step 1ghost 卡片制造未知chapter.tsx 中step 1 用MaskReveal组件包住三张.hk-ghost卡片delay{idx * 200}错峰入场。卡片本身是虚线边框 01 / image编号占位对应 chapter.css 的.hk-grid三列网格与.hk-ghost16:9 虚线占位。key 设计是hk-kicker这几天 编号暗示有事情要发生但内容保持未知。step 2-N单图独占盯图生疑每张反例图独占一整屏chapter.tsx 通过reveals数组驱动.hk-solo-frame宽度 78%大图 aspect-ratio 16:9右上角叠一枚旋转 -8deg 的FAKE?印章.hk-stamp下方.hk-solo-meta用等宽字体标注01 / 03序号和来自 article 的反例 caption。注意chapter.tsx 里的src: /hook/asset-1.png与caption: 反例 1 caption...都是占位符真正的图源与文案必须来自本项目 outline 章节段与article.md对应段落双源原则见下文。step N1takeover 揭示主题三张图缩入左侧迷你卡.hk-mini140px 宽中间巨字 hero 用--t-display-1字号爆出accent 红条贯穿。从 chapter.css 可以看到三个动画的时序配合.hk-mini-shrink迷你卡从 scale 2.4 缩入、.hk-bar-grow红条 scaleX 从 0 生长delay 250ms、hero 文本由MaskReveal以 1100ms 时长 reveal——三者错峰构成缩入 爆出 贯穿的取代表演。末步brush 划掉旧概念收束场景chapter.tsx把下一句钩子放在.hk-quote中.hk-brush元素用.hk-brush-strikekeyframe700ms expo 缓动、500ms delay从左向右 scaleX 划出红条划掉旧概念、引出下一章。为什么 2-N 不能 stagger 同时上原则 8 的源码逻辑这是 hook-chapter 最容易被做错、也最值得强调的决策。README 明确解释口播会逐个念出来—— 必须 1 项 1 step。同时 stagger 上 观众扫一眼看完讲者还在念第一张 PPT 直觉。这对应 CHAPTER-CRAFT.md 中最重要的原则 8——当口播在说第一是 X、第二是 Y、第三是 Z这种清单时严禁一个 step 把 X/Y/Z 全部 stagger 上来。正确做法是1 项 1 stepX 只在它自己的 step 里独自亮起讲到 Y 时 X 灰化保留作上下文讲到 Z 时 X/Y 都灰化。判断标准很朴素讲者会一个一个念出来吗会 → 必须逐个揭示。从代码结构看reveals数组被 index 映射到step 1 step 3的分支chapter.tsx每次渲染只返回一张大图 角标 旁白天然规避了一屏三图齐上的 PPT 直觉。作为对比list-revealanchor 对同一原则的解法是单网格 N 槽位 每 step 只填一个槽位 位置不重排可参考 list-reveal/README.md。关键手段地板线一个 hook 章节最少要做的事README 给出的关键手段表定义了 hook 章节的地板线——新写章节时可以换动作形式但以下维度不能丢维度这个 anchor 怎么实现素材img src/hook/asset.png /真截图字号hero 144px serif (var(--t-display-1))主导动作brush-stroke 印章砸下newsroom 气质伴随动作accent 红条 scaleX 副标 stagger 200ms持续微动accent 红条光晕infinite呼吸图片 ken burns 缓推卡片样式drop-shadow 微旋转 1degtakeover三张图缩入 hero 巨字爆出 accent 红条贯穿其中真素材是关键提醒.hk-solo-img直接img src/hook/asset.png /引用真截图而不是 placeholder。同时 CHAPTER-CRAFT.md 的反 AI 味一节也提醒——持续微动按需挂不强求不要每步都挂 ken burns / 光晕呼吸 / 持续闪烁这是整章同质化动画的反模式。从源码看字号与动效的实现细节字号.hk-hero使用font-size: var(--t-display-1)并叠加letter-spacing: -0.025em、line-height: 0.95chapter.css。--t-display-1对应 ≥144px 的展示级字号满足 CHAPTER-CRAFT.mdhero 文字至少 80px 起的远观要求。印章砸下.hk-stamp的hk-stamp-dropkeyframe 从scale(2.4) opacity 0开始60% 处scale(0.92)回弹到 100%scale(1)配合 600ms 延迟、--dur-base时长与--ease-quart缓动chapter.css是印刷盖章气质的核心动作。卡片微旋转transform: rotate(-8deg)直接写死在.hk-stamp上属于按内容自由的尺度字号、间距、动画时长、旋转角度都是可硬编码项见 CHAPTER-CRAFT.md 代码层最小约束。MaskReveal贯穿全章的基础组件章节中大量使用的MaskReveal来自模板组件库 templates/src/components/MaskReveal.tsx实现的是clip-path 文字擦除非淡入淡出配合animations.css中的.mask-reveal与.mask-reveal.in使用。它接收show / delay / duration三个 props通过transitionDelay实现错峰——这正是 hook 章节里 ghost 卡200ms错峰、solo 大图与 meta 信息400ms错峰的来源。抄到真实项目时import 路径需改为../../components/MaskReveal与../../registry/types见 chapter.tsx 的注释说明。代码红线token 语义与 step 纯函数hook 章节能自由换主题而不破靠的是 CHAPTER-CRAFT.md 的代码层最小约束颜色必须走 token--surface/--text/--accent/--rule等禁止硬编码 hex / rgb。观察 chapter.css 会发现整份文件里没有一个硬编码颜色值——全部是var(--accent)、var(--text-mute)、var(--surface)这样的语义 token其中印章的半透明底还用了color-mix(in oklch, var(--surface) 60%, transparent)。字体家族必须走 token--font-display-cn/--font-display-en/--font-mono/--font-body禁止硬编码字体名。.hk-kicker、.hk-ghost-num、.hk-solo-meta均使用var(--font-mono).hk-hero使用var(--font-display-en)。章节是 step 的纯函数if (step N)逐分支返回整屏场景不用setTimeout/setInterval驱动动画全部动画走 CSS keyframes。章节代码物理隔离每章独立文件夹、独立 CSS 类前缀.hk-不跨章 import。从 templates/src/registry/types.ts 可以看到支撑这套机制的契约ChapterStepProps只有step: number一个字段ChapterDef要求narrations: Narration[]数组长度严格等于章节 step 总数作为 step 数与音频合成的唯一真相源SKILL.md 中强调if (step N)的最大 N 1 必须等于narrations.length否则录屏对不上嘴。hook 章节的 6 步结构意味着narrations.ts必须恰好是 6 个元素。切到其它主题时骨架不变动作换装README 专门给出切到其它主题的换装指引这是把 anchor 复用到任意项目的关键操作完整继承如下bauhaus-bold→ brush 划掉换 hard-cut 大色块hero 字体换 Archivo Blackterminal-green→ 三张图换FILE_001/002/003占位框hero 用打字机chalk-garden→ 粉笔感虚线 慢速 wiggle 入场midnight-press→ blur clear 慢镜入场 ken burns scanlinetakeover 改主标 blur 锐化 暖橙光晕呼吸。结构N2 步、独占节奏、takeover、收束保持不变——变的只是动作选型和字体气质。newsroom 主题的 token 佐证hook-chapter 默认绑定newsroom主题其 theme.json 定义 mood 为light / newspaper / editorial / serif / documentary / warmpreview 色为奶油底#ebe5d6 墨黑#1a1a1a 报头红#c9302c——这正是印章砸下 brush 划掉印刷气质的来源。对应的 tokens.css 给出完整 token 语义--dur-base: 650ms安静印刷节奏、--r-card: var(--r-flat)报纸无圆角、--rule-w: 1px细线、--surface-pattern纸纹 SVG等。换主题时只需替换整个 token 层章节 CSS 因全部走语义 token 而无需改动——这是颜色与字体必须走 token换主题不破的直接体现。双源原则落地hook 章节的画面密度从哪来hook 章节的画面不能只挂口播稿CHAPTER-CRAFT.md 的双源原则要求节奏 / 顺序 / 节拍切分跟script.md口播稿画面细节 / 数据 / 引用 / 案例回article.md原文章抽。在 hook 场景下的具体含义是reveals数组里每张反例图的caption、图源、角标数据必须来自article.md本章对应段落而不是口播稿的复述——让画面信息密度 口播信息密度。chapter.tsx 中的反例 1 caption来自 article §X占位符正是留给这一步的接口。具象应用科技测评类案例想看这个 anchor 在真实题材中的落地case-tech-review 案例是现成的参照一篇 AI / 工具 / 产品实测对比类文章切分为 7 章 36 步、约 6 分 30 秒。其中开场悬念正是 hook 结构的应用——从 outline-snippet.md 可以看到 coldopen 章 5 步的写法暗场远景粒子云 钩子字幕 → 排行榜慢镜聚焦 主分数 hero 数字 → 第 2 名对比横条 差距分 → 官方原话 pull-quote → 主持人介绍 4 件事预告。它的节奏与 hook 骨架同构但主题换成了midnight-press电影感慢镜、blur clear、暖橙 accent、scanline并明确禁止砸下 shake / 弹簧 / emoji——这就是结构不变、动作换装的完整示范。完工自检写完 hook 章节必须过的红线结合 CHAPTER-CRAFT.md 的完工自检清单一个合格的 hook 章节至少要满足每章至少 1~2 处 CSS / SVG / Canvas / JS 视觉演示hook 里是印章砸下、brush 划掉、红条生长不同 step 的主导动作不一样ghost 错峰入场、独占大图 印章、takeover 缩入爆出、brush 收束四种动作不重复清单逐个揭示1 项 1 step三张反例绝不齐上颜色和字体家族全部走 token无硬编码 hex / 字体名narrations.ts存在且长度 step 总数6每个 step 的视觉动画时长 ≤ 口播时长口播字数 ÷ 4≈ 秒数超出会被 Auto 模式当场切断缺的素材用 placeholder不编数字、不找无关图凑。自检执行顺序按能力降级优先 Agent Teams 开独立 reviewer agent 逐项核查 → subAgent → 自身严格逐项核查拿到结论后先修复再汇报不允许先放着以后修。结语把 hook-chapter 当结构模板而不是代码模板hook-chapter 的价值在于它把悬念型开场的内在节奏固化成了可复制的骨架N2 步、每张图独占、takeover 揭示、brush 收束。真正做出视频感靠的是按 CHAPTER-CRAFT.md 的原则针对当前题材重做动作选型再通过 chapter.tsx 与 chapter.css 这样零硬编码、全 token的实现落进真实项目。参考更多 anchor 与案例可继续阅读 EXAMPLES 目录中的list-reveal与case-tech-review以及完整方法论入口 CHAPTER-CRAFT.md。赞分享人工智能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 技能/插件提示工程LongCat-Video开源长视频生成模型实战指南LongCat Video开源长视频生成模型实战指南 在AI视频生成技术快速迭代的今天美团LongCat团队正式开源了136亿参数的LongCat Vide人工智能基础模型大模型计算机视觉NixOS构建后钩子(post-build-hook)实战指南NixOS构建后钩子 post build hook 实战指南 什么是构建后钩子 构建后钩子是NixOS中一个强大的功能它允许用户在每次构建完成后自动执行自定包管理器开发工具CLI构建工具上一篇Leasot与CI/CD集成在持续集成中自动生成TODO报告下一篇Sapiens2-Pose-0.4B 论文解读Meta 最新人体姿态估计算法核心突破创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 钩子型开场（hook-chapter）实战指南：用 web-video-presentation 打造悬念式视频开头
人工智能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技能下hook-chapter钩子型开场章节 anchor 的完整技术拆解。它回答视频制作中最关键的一个问题如何在开头 3~5 秒抓住观众——通过抛 N 张可疑图 → 逐个揭示反例 → 切大字 hero takeover的节奏把悬念型开场做成不像 PPT 的视频。读完本文你将掌握该 anchor 的六步结构骨架、每一步的节奏意图与视觉实现、为什么清单内容必须1 项 1 step逐个揭示、以及如何把这套骨架换装到bauhaus-bold、terminal-green、chalk-garden、midnight-press等不同主题。文中所有节奏决策、字号关系与动画手段均有 chapter.tsx 与 chapter.css 的源码级实现佐证。hook-chapter 是什么定位与适用场景在 web-video-presentation 技能的章节 anchor 体系中hook-chapter是视频开头最常用的章节类型。它的本质动作是抛 N 张可疑图 / 反例 / 截图 → 引出主题 → 切大字 hero takeover。参考文档 hook-chapter/README.md 给出了三个典型适用场景悬念型开头先甩 3~4 张让人怀疑 / 困惑的图再揭示原因今天聊聊 X 的几个翻车现场先看翻车再切主题产品发布的问题感开场先看痛点截图再揭示新功能。它和另一个 anchorlist-reveal列举型逐个揭示形成互补list-reveal 用于视频中段主题 N 个并列子项的清单类章节而 hook-chapter 专门服务开场的悬念铺垫。二者共享同一条底层原则——清单必须逐项揭示详见下文。⚠️ 重要前提hook-chapter 是结构示意不是抄袭模板。README 明确要求先走 CHAPTER-CRAFT.md 的开工五问保留 anchor 的 step 切分逻辑、字号关系、布局原则再按本项目主题与内容自由选择动作选型反过来直接照抄就是 CHAPTER-CRAFT.md 中整章只用一种入场动画的同质化反模式。结构骨架六步的 outline 章节段N2 步hook-chapter 的标准结构是N2 步N 张反例图 1 步 takeover 1 步收束对应 outline.md 中一段抽象章节。原文给出了可直接沿用的骨架6 steps 示例## 2. hook — 章节标题6 steps - **step 1** (~4s) — N 张可疑图片占位虚线 ghost 卡片 - **step 2** (~5s) — 第 1 张露出反例 1 描述独占视觉 - **step 3** (~5s) — 第 2 张露出反例 2 描述独占视觉 - **step 4** (~5s) — 第 3 张露出反例 3 描述独占视觉 - **step 5** (~4s) — 三张图同时缩入侧栏中间出 主题大字 takeover - **step 6** (~3s) — 切到下一句钩子被 brush 划掉从 chapter.tsx 的实现看章节组件是全局step计数器的纯函数step 0渲染三张 ghost 卡片step 1 step 3逐张渲染独占大图step 4渲染 takeover 场景其余情况渲染收束场景。这与 CHAPTER-CRAFT.md 的每步独占整屏原则完全对应——章节代码没有定时器、没有命令式状态。关键节奏决策每一步在演什么README 用一张表总结了每一步的节奏意图与视觉实现这是本 anchor 的灵魂逐行继承如下step节奏意图视觉1抛悬念 —— N 张未知虚线 ghost 卡片1/3 屏一张2-N每张图独占视觉—— 重点不是凑数是让观众盯着每张图想这是真的吗大图占据 ~70% 屏幕旁边小字标注图源N1takeover —— 揭示主题三张缩成左侧迷你卡中间巨字末钩子收束brush 划掉旧概念引下一章step 1ghost 卡片制造未知chapter.tsx 中step 1 用MaskReveal组件包住三张.hk-ghost卡片delay{idx * 200}错峰入场。卡片本身是虚线边框 01 / image编号占位对应 chapter.css 的.hk-grid三列网格与.hk-ghost16:9 虚线占位。key 设计是hk-kicker这几天 编号暗示有事情要发生但内容保持未知。step 2-N单图独占盯图生疑每张反例图独占一整屏chapter.tsx 通过reveals数组驱动.hk-solo-frame宽度 78%大图 aspect-ratio 16:9右上角叠一枚旋转 -8deg 的FAKE?印章.hk-stamp下方.hk-solo-meta用等宽字体标注01 / 03序号和来自 article 的反例 caption。注意chapter.tsx 里的src: /hook/asset-1.png与caption: 反例 1 caption...都是占位符真正的图源与文案必须来自本项目 outline 章节段与article.md对应段落双源原则见下文。step N1takeover 揭示主题三张图缩入左侧迷你卡.hk-mini140px 宽中间巨字 hero 用--t-display-1字号爆出accent 红条贯穿。从 chapter.css 可以看到三个动画的时序配合.hk-mini-shrink迷你卡从 scale 2.4 缩入、.hk-bar-grow红条 scaleX 从 0 生长delay 250ms、hero 文本由MaskReveal以 1100ms 时长 reveal——三者错峰构成缩入 爆出 贯穿的取代表演。末步brush 划掉旧概念收束场景chapter.tsx把下一句钩子放在.hk-quote中.hk-brush元素用.hk-brush-strikekeyframe700ms expo 缓动、500ms delay从左向右 scaleX 划出红条划掉旧概念、引出下一章。为什么 2-N 不能 stagger 同时上原则 8 的源码逻辑这是 hook-chapter 最容易被做错、也最值得强调的决策。README 明确解释口播会逐个念出来—— 必须 1 项 1 step。同时 stagger 上 观众扫一眼看完讲者还在念第一张 PPT 直觉。这对应 CHAPTER-CRAFT.md 中最重要的原则 8——当口播在说第一是 X、第二是 Y、第三是 Z这种清单时严禁一个 step 把 X/Y/Z 全部 stagger 上来。正确做法是1 项 1 stepX 只在它自己的 step 里独自亮起讲到 Y 时 X 灰化保留作上下文讲到 Z 时 X/Y 都灰化。判断标准很朴素讲者会一个一个念出来吗会 → 必须逐个揭示。从代码结构看reveals数组被 index 映射到step 1 step 3的分支chapter.tsx每次渲染只返回一张大图 角标 旁白天然规避了一屏三图齐上的 PPT 直觉。作为对比list-revealanchor 对同一原则的解法是单网格 N 槽位 每 step 只填一个槽位 位置不重排可参考 list-reveal/README.md。关键手段地板线一个 hook 章节最少要做的事README 给出的关键手段表定义了 hook 章节的地板线——新写章节时可以换动作形式但以下维度不能丢维度这个 anchor 怎么实现素材img src/hook/asset.png /真截图字号hero 144px serif (var(--t-display-1))主导动作brush-stroke 印章砸下newsroom 气质伴随动作accent 红条 scaleX 副标 stagger 200ms持续微动accent 红条光晕infinite呼吸图片 ken burns 缓推卡片样式drop-shadow 微旋转 1degtakeover三张图缩入 hero 巨字爆出 accent 红条贯穿其中真素材是关键提醒.hk-solo-img直接img src/hook/asset.png /引用真截图而不是 placeholder。同时 CHAPTER-CRAFT.md 的反 AI 味一节也提醒——持续微动按需挂不强求不要每步都挂 ken burns / 光晕呼吸 / 持续闪烁这是整章同质化动画的反模式。从源码看字号与动效的实现细节字号.hk-hero使用font-size: var(--t-display-1)并叠加letter-spacing: -0.025em、line-height: 0.95chapter.css。--t-display-1对应 ≥144px 的展示级字号满足 CHAPTER-CRAFT.mdhero 文字至少 80px 起的远观要求。印章砸下.hk-stamp的hk-stamp-dropkeyframe 从scale(2.4) opacity 0开始60% 处scale(0.92)回弹到 100%scale(1)配合 600ms 延迟、--dur-base时长与--ease-quart缓动chapter.css是印刷盖章气质的核心动作。卡片微旋转transform: rotate(-8deg)直接写死在.hk-stamp上属于按内容自由的尺度字号、间距、动画时长、旋转角度都是可硬编码项见 CHAPTER-CRAFT.md 代码层最小约束。MaskReveal贯穿全章的基础组件章节中大量使用的MaskReveal来自模板组件库 templates/src/components/MaskReveal.tsx实现的是clip-path 文字擦除非淡入淡出配合animations.css中的.mask-reveal与.mask-reveal.in使用。它接收show / delay / duration三个 props通过transitionDelay实现错峰——这正是 hook 章节里 ghost 卡200ms错峰、solo 大图与 meta 信息400ms错峰的来源。抄到真实项目时import 路径需改为../../components/MaskReveal与../../registry/types见 chapter.tsx 的注释说明。代码红线token 语义与 step 纯函数hook 章节能自由换主题而不破靠的是 CHAPTER-CRAFT.md 的代码层最小约束颜色必须走 token--surface/--text/--accent/--rule等禁止硬编码 hex / rgb。观察 chapter.css 会发现整份文件里没有一个硬编码颜色值——全部是var(--accent)、var(--text-mute)、var(--surface)这样的语义 token其中印章的半透明底还用了color-mix(in oklch, var(--surface) 60%, transparent)。字体家族必须走 token--font-display-cn/--font-display-en/--font-mono/--font-body禁止硬编码字体名。.hk-kicker、.hk-ghost-num、.hk-solo-meta均使用var(--font-mono).hk-hero使用var(--font-display-en)。章节是 step 的纯函数if (step N)逐分支返回整屏场景不用setTimeout/setInterval驱动动画全部动画走 CSS keyframes。章节代码物理隔离每章独立文件夹、独立 CSS 类前缀.hk-不跨章 import。从 templates/src/registry/types.ts 可以看到支撑这套机制的契约ChapterStepProps只有step: number一个字段ChapterDef要求narrations: Narration[]数组长度严格等于章节 step 总数作为 step 数与音频合成的唯一真相源SKILL.md 中强调if (step N)的最大 N 1 必须等于narrations.length否则录屏对不上嘴。hook 章节的 6 步结构意味着narrations.ts必须恰好是 6 个元素。切到其它主题时骨架不变动作换装README 专门给出切到其它主题的换装指引这是把 anchor 复用到任意项目的关键操作完整继承如下bauhaus-bold→ brush 划掉换 hard-cut 大色块hero 字体换 Archivo Blackterminal-green→ 三张图换FILE_001/002/003占位框hero 用打字机chalk-garden→ 粉笔感虚线 慢速 wiggle 入场midnight-press→ blur clear 慢镜入场 ken burns scanlinetakeover 改主标 blur 锐化 暖橙光晕呼吸。结构N2 步、独占节奏、takeover、收束保持不变——变的只是动作选型和字体气质。newsroom 主题的 token 佐证hook-chapter 默认绑定newsroom主题其 theme.json 定义 mood 为light / newspaper / editorial / serif / documentary / warmpreview 色为奶油底#ebe5d6 墨黑#1a1a1a 报头红#c9302c——这正是印章砸下 brush 划掉印刷气质的来源。对应的 tokens.css 给出完整 token 语义--dur-base: 650ms安静印刷节奏、--r-card: var(--r-flat)报纸无圆角、--rule-w: 1px细线、--surface-pattern纸纹 SVG等。换主题时只需替换整个 token 层章节 CSS 因全部走语义 token 而无需改动——这是颜色与字体必须走 token换主题不破的直接体现。双源原则落地hook 章节的画面密度从哪来hook 章节的画面不能只挂口播稿CHAPTER-CRAFT.md 的双源原则要求节奏 / 顺序 / 节拍切分跟script.md口播稿画面细节 / 数据 / 引用 / 案例回article.md原文章抽。在 hook 场景下的具体含义是reveals数组里每张反例图的caption、图源、角标数据必须来自article.md本章对应段落而不是口播稿的复述——让画面信息密度 口播信息密度。chapter.tsx 中的反例 1 caption来自 article §X占位符正是留给这一步的接口。具象应用科技测评类案例想看这个 anchor 在真实题材中的落地case-tech-review 案例是现成的参照一篇 AI / 工具 / 产品实测对比类文章切分为 7 章 36 步、约 6 分 30 秒。其中开场悬念正是 hook 结构的应用——从 outline-snippet.md 可以看到 coldopen 章 5 步的写法暗场远景粒子云 钩子字幕 → 排行榜慢镜聚焦 主分数 hero 数字 → 第 2 名对比横条 差距分 → 官方原话 pull-quote → 主持人介绍 4 件事预告。它的节奏与 hook 骨架同构但主题换成了midnight-press电影感慢镜、blur clear、暖橙 accent、scanline并明确禁止砸下 shake / 弹簧 / emoji——这就是结构不变、动作换装的完整示范。完工自检写完 hook 章节必须过的红线结合 CHAPTER-CRAFT.md 的完工自检清单一个合格的 hook 章节至少要满足每章至少 1~2 处 CSS / SVG / Canvas / JS 视觉演示hook 里是印章砸下、brush 划掉、红条生长不同 step 的主导动作不一样ghost 错峰入场、独占大图 印章、takeover 缩入爆出、brush 收束四种动作不重复清单逐个揭示1 项 1 step三张反例绝不齐上颜色和字体家族全部走 token无硬编码 hex / 字体名narrations.ts存在且长度 step 总数6每个 step 的视觉动画时长 ≤ 口播时长口播字数 ÷ 4≈ 秒数超出会被 Auto 模式当场切断缺的素材用 placeholder不编数字、不找无关图凑。自检执行顺序按能力降级优先 Agent Teams 开独立 reviewer agent 逐项核查 → subAgent → 自身严格逐项核查拿到结论后先修复再汇报不允许先放着以后修。结语把 hook-chapter 当结构模板而不是代码模板hook-chapter 的价值在于它把悬念型开场的内在节奏固化成了可复制的骨架N2 步、每张图独占、takeover 揭示、brush 收束。真正做出视频感靠的是按 CHAPTER-CRAFT.md 的原则针对当前题材重做动作选型再通过 chapter.tsx 与 chapter.css 这样零硬编码、全 token的实现落进真实项目。参考更多 anchor 与案例可继续阅读 EXAMPLES 目录中的list-reveal与case-tech-review以及完整方法论入口 CHAPTER-CRAFT.md。赞分享人工智能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 技能/插件提示工程LongCat-Video开源长视频生成模型实战指南LongCat Video开源长视频生成模型实战指南 在AI视频生成技术快速迭代的今天美团LongCat团队正式开源了136亿参数的LongCat Vide人工智能基础模型大模型计算机视觉NixOS构建后钩子(post-build-hook)实战指南NixOS构建后钩子 post build hook 实战指南 什么是构建后钩子 构建后钩子是NixOS中一个强大的功能它允许用户在每次构建完成后自动执行自定包管理器开发工具CLI构建工具上一篇Leasot与CI/CD集成在持续集成中自动生成TODO报告下一篇Sapiens2-Pose-0.4B 论文解读Meta 最新人体姿态估计算法核心突破创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考