Garden Skills章节设计十条原则CHAPTER-CRAFT方法论全解析【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skillsGarden Skills 是 ConardLi 开源的 Agent 技能集合其中的 web-video-presentation 技能能把一篇文章做成看起来像视频的点击式网页演示。本文完整解析该技能的章节设计核心——CHAPTER-CRAFT 方法论的十条原则帮你理解动态 PPT、但不像 PPT背后的设计思想零基础也能看懂。一、先搞懂什么是 CHAPTER-CRAFT 方法论web-video-presentation技能把一篇文章变成可录屏的 16:9 网页演示整个流程分四个阶段内容编写 → 网页开发 → 可选音频合成 → 录屏后期。而写每一章之前必读的那份文档就是 CHAPTER-CRAFT.md。它是章节开发的单一入口按 Part 0~8 组织Part内容作用Part 0十条原则设计的总纲Part 1开工 5 问写代码前先想清楚Part 2关系→动作决策树这一步该演什么Part 3视觉工具箱动效手段清单Part 5反 AI 味反模式避坑黑名单Part 6代码硬规则不能踩的红线Part 7完工自检交付前的逐项检查配套文档还有口播稿规范 SCRIPT-STYLE.md、开发计划规范 OUTLINE-FORMAT.md、音频流程 AUDIO.md 和主题系统 THEMES.md它们共同构成完整的方法论体系。二、十条原则逐条拆解十条原则的完整速览表在 SKILL.md下面逐条展开。原则 1-316:9 固定舞台 全局 step 驱动这是整个方法论的地基三个原则环环相扣原则 1 · 16:9 固定舞台所有内容设计在 1920×1080 的坐标系上再整体缩放到任意窗口没有响应式断点。因为产物是录屏视频不是给人刷网页看的。原则 2 · 全局 step 计数器点击屏幕或按 → 键推进一个步骤。页面内容是 step 的纯函数——没有定时器、没有命令式状态天然可回放。原则 3 · 每步独占整屏每一步就是一整屏画面绝不堆叠项目符号。 一句话总结页面像电影的每一帧step 就是帧序号。原则 4口播节拍 step口播稿念出一个节拍画面就推进一步一个 step 一个聚焦的想法。这意味着章节结构直接由你会怎么念决定——先写稿再切步。原则 5-6隐形 UI舞台无 chrome原则 5进度条、翻页器等控件默认完全透明鼠标悬停才出现。原则 6舞台上没有页眉、页脚、页码、品牌条。两条原则服务于同一目的录屏时摄像头看不到任何网页控件观众只看到纯粹的画面——这是不像 PPT的第一道保障。原则 7内容驱动动画最核心的一条先问这一步的内容内在动作是什么——数字在增长流程在点亮对比被切开找不到内在动作才允许用入场动画兜底。持续微动、光晕呼吸这类为动而动的装饰要慎用。炫酷靠设计巧思不靠速度暴力。原则 8多点逐个揭示口播念第一是 X、第二是 Y、第三是 Z时严禁一步把 XYZ 全部弹出来。正确做法一项 一个 step讲到 Y 时X 灰化保留作上下文 Y 亮起布局不重排只变单元格内容观众视线始终锁定新揭示的项判断标准很简单讲者会一个一个念出来吗会 → 必须逐个揭示。原则 9整片同一主题颜色字体走 token整片不允许中途翻表面色。所有颜色和字体家族必须走主题 token如--accent、--font-display-cn禁止硬编码色值——这是换一套主题整个片子不破的底线。内置主题如 newsroom/theme.json 和对应的 tokens.css 就是典型示例。原则 10双源原则节奏、顺序→ 跟script.md口播稿顺序不能乱画面细节→ 回article.md原文章抽具体数字、引用、案例目标是画面信息密度 口播信息密度。如果只把口播稿打在屏幕上那就是 PPT不是视频。三、底线要求每章必须有东西在动CHAPTER-CRAFT.md 把这条写成了硬性底线每章至少 1~2 处动起来的图 / 演示元素整章只有纯文字 验收不过。视频感最强的来源是让观众亲眼看见被讲解的东西在屏幕上演给他看数字递增、横条生长、流程节点依次点亮、对比被一刀切开、粒子聚拢成形、模拟终端交互……怎么组合都行但每章必须用。四、反 AI 味一张视觉指纹黑名单AI 生成的网页有共有的视觉指纹方法论明确要求全部不要❌ 反模式说明紫粉 / 蓝紫对角渐变背景一眼 AI 的招牌色圆角卡片 彩色左边框装饰模板味太重渐变按钮 大圆角药丸同上emoji 当图标用用真图标或占位卡假数据 / 假 logo / 假X 万用户没有就承认没有整章 N 步用同一种入场动画全场 fade / 全场 blur 同质化素材缺失时的正确做法用写着image · 16:9 描述的placeholder 占位卡按真实比例留位而不是用 emoji 凑、找无关图凑、编数字——没有比 fake 强一百倍。五、代码红线与完工自检写章节时只有几类东西不能自由发挥其余字号、间距、动画时长按画面需要随意写必须走 token颜色、字体家族以及.hero-num/.card/.rule等主题原语类不用setTimeout/setInterval驱动动画——用 CSS keyframes每章必须有narrations.ts数组长度 该章最大 step 数 1它是口播音频合成和自动播放模式的唯一真相源动画时长 ≤ 该 step 的口播时长口播字数 ÷ 4 ≈ 秒数否则自动模式会把动画演到一半就切走章节代码物理隔离每章独立文件夹 独立 CSS 前缀不跨章 import写完一章后还要走强制自检流程自检 → 修复 → 再汇报。优先开一个独立的 reviewer 逐项核查清单任何 fail 项必须改完才能交付——先放着以后修是被明确禁止的。六、新手上手从零做出第一个章节如果你想亲手体验完整上手路径如下克隆仓库git clone https://gitcode.com/GitHub_Trending/we/garden-skills读总纲SKILL.md 了解四阶段工作流与硬性检查点准备内容按 SCRIPT-STYLE.md 写口播稿按 OUTLINE-FORMAT.md 切章节搭脚手架运行 scaffold.sh 一键生成 Vite React TS 项目并选定主题写第一章每次动手前重读 CHAPTER-CRAFT.md 的十条原则——它是单一必读入口卡壳时翻示例hook-chapter 示例悬念型开场和 list-reveal 示例列举型逐个揭示只提供结构骨架请按自己的主题换动作选型照抄反而是反模式自检 → 验收 → 继续下一章✍️写在最后CHAPTER-CRAFT 方法论最精髓的一点是——它不规定长什么样只规定怎么判断做对了。16:9 固定舞台、step 驱动、逐个揭示、双源取料、反 AI 味……每一条都能直接翻译成一条可执行的验收标准。这也是它被称为方法论而非模板的原因换任何主题、任何题材这套判断标准都成立。【免费下载链接】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），仅供参考
Garden Skills章节设计十条原则：CHAPTER-CRAFT方法论全解析
Garden Skills章节设计十条原则CHAPTER-CRAFT方法论全解析【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skillsGarden Skills 是 ConardLi 开源的 Agent 技能集合其中的 web-video-presentation 技能能把一篇文章做成看起来像视频的点击式网页演示。本文完整解析该技能的章节设计核心——CHAPTER-CRAFT 方法论的十条原则帮你理解动态 PPT、但不像 PPT背后的设计思想零基础也能看懂。一、先搞懂什么是 CHAPTER-CRAFT 方法论web-video-presentation技能把一篇文章变成可录屏的 16:9 网页演示整个流程分四个阶段内容编写 → 网页开发 → 可选音频合成 → 录屏后期。而写每一章之前必读的那份文档就是 CHAPTER-CRAFT.md。它是章节开发的单一入口按 Part 0~8 组织Part内容作用Part 0十条原则设计的总纲Part 1开工 5 问写代码前先想清楚Part 2关系→动作决策树这一步该演什么Part 3视觉工具箱动效手段清单Part 5反 AI 味反模式避坑黑名单Part 6代码硬规则不能踩的红线Part 7完工自检交付前的逐项检查配套文档还有口播稿规范 SCRIPT-STYLE.md、开发计划规范 OUTLINE-FORMAT.md、音频流程 AUDIO.md 和主题系统 THEMES.md它们共同构成完整的方法论体系。二、十条原则逐条拆解十条原则的完整速览表在 SKILL.md下面逐条展开。原则 1-316:9 固定舞台 全局 step 驱动这是整个方法论的地基三个原则环环相扣原则 1 · 16:9 固定舞台所有内容设计在 1920×1080 的坐标系上再整体缩放到任意窗口没有响应式断点。因为产物是录屏视频不是给人刷网页看的。原则 2 · 全局 step 计数器点击屏幕或按 → 键推进一个步骤。页面内容是 step 的纯函数——没有定时器、没有命令式状态天然可回放。原则 3 · 每步独占整屏每一步就是一整屏画面绝不堆叠项目符号。 一句话总结页面像电影的每一帧step 就是帧序号。原则 4口播节拍 step口播稿念出一个节拍画面就推进一步一个 step 一个聚焦的想法。这意味着章节结构直接由你会怎么念决定——先写稿再切步。原则 5-6隐形 UI舞台无 chrome原则 5进度条、翻页器等控件默认完全透明鼠标悬停才出现。原则 6舞台上没有页眉、页脚、页码、品牌条。两条原则服务于同一目的录屏时摄像头看不到任何网页控件观众只看到纯粹的画面——这是不像 PPT的第一道保障。原则 7内容驱动动画最核心的一条先问这一步的内容内在动作是什么——数字在增长流程在点亮对比被切开找不到内在动作才允许用入场动画兜底。持续微动、光晕呼吸这类为动而动的装饰要慎用。炫酷靠设计巧思不靠速度暴力。原则 8多点逐个揭示口播念第一是 X、第二是 Y、第三是 Z时严禁一步把 XYZ 全部弹出来。正确做法一项 一个 step讲到 Y 时X 灰化保留作上下文 Y 亮起布局不重排只变单元格内容观众视线始终锁定新揭示的项判断标准很简单讲者会一个一个念出来吗会 → 必须逐个揭示。原则 9整片同一主题颜色字体走 token整片不允许中途翻表面色。所有颜色和字体家族必须走主题 token如--accent、--font-display-cn禁止硬编码色值——这是换一套主题整个片子不破的底线。内置主题如 newsroom/theme.json 和对应的 tokens.css 就是典型示例。原则 10双源原则节奏、顺序→ 跟script.md口播稿顺序不能乱画面细节→ 回article.md原文章抽具体数字、引用、案例目标是画面信息密度 口播信息密度。如果只把口播稿打在屏幕上那就是 PPT不是视频。三、底线要求每章必须有东西在动CHAPTER-CRAFT.md 把这条写成了硬性底线每章至少 1~2 处动起来的图 / 演示元素整章只有纯文字 验收不过。视频感最强的来源是让观众亲眼看见被讲解的东西在屏幕上演给他看数字递增、横条生长、流程节点依次点亮、对比被一刀切开、粒子聚拢成形、模拟终端交互……怎么组合都行但每章必须用。四、反 AI 味一张视觉指纹黑名单AI 生成的网页有共有的视觉指纹方法论明确要求全部不要❌ 反模式说明紫粉 / 蓝紫对角渐变背景一眼 AI 的招牌色圆角卡片 彩色左边框装饰模板味太重渐变按钮 大圆角药丸同上emoji 当图标用用真图标或占位卡假数据 / 假 logo / 假X 万用户没有就承认没有整章 N 步用同一种入场动画全场 fade / 全场 blur 同质化素材缺失时的正确做法用写着image · 16:9 描述的placeholder 占位卡按真实比例留位而不是用 emoji 凑、找无关图凑、编数字——没有比 fake 强一百倍。五、代码红线与完工自检写章节时只有几类东西不能自由发挥其余字号、间距、动画时长按画面需要随意写必须走 token颜色、字体家族以及.hero-num/.card/.rule等主题原语类不用setTimeout/setInterval驱动动画——用 CSS keyframes每章必须有narrations.ts数组长度 该章最大 step 数 1它是口播音频合成和自动播放模式的唯一真相源动画时长 ≤ 该 step 的口播时长口播字数 ÷ 4 ≈ 秒数否则自动模式会把动画演到一半就切走章节代码物理隔离每章独立文件夹 独立 CSS 前缀不跨章 import写完一章后还要走强制自检流程自检 → 修复 → 再汇报。优先开一个独立的 reviewer 逐项核查清单任何 fail 项必须改完才能交付——先放着以后修是被明确禁止的。六、新手上手从零做出第一个章节如果你想亲手体验完整上手路径如下克隆仓库git clone https://gitcode.com/GitHub_Trending/we/garden-skills读总纲SKILL.md 了解四阶段工作流与硬性检查点准备内容按 SCRIPT-STYLE.md 写口播稿按 OUTLINE-FORMAT.md 切章节搭脚手架运行 scaffold.sh 一键生成 Vite React TS 项目并选定主题写第一章每次动手前重读 CHAPTER-CRAFT.md 的十条原则——它是单一必读入口卡壳时翻示例hook-chapter 示例悬念型开场和 list-reveal 示例列举型逐个揭示只提供结构骨架请按自己的主题换动作选型照抄反而是反模式自检 → 验收 → 继续下一章✍️写在最后CHAPTER-CRAFT 方法论最精髓的一点是——它不规定长什么样只规定怎么判断做对了。16:9 固定舞台、step 驱动、逐个揭示、双源取料、反 AI 味……每一条都能直接翻译成一条可执行的验收标准。这也是它被称为方法论而非模板的原因换任何主题、任何题材这套判断标准都成立。【免费下载链接】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），仅供参考
