16 种画风，把知识讲成动画 chengfeng-video-styles

从样片看懂：同一内容怎样换画风

一篇文章、一段口播稿，或一个想解释的概念，都可以做成知识动画。chengfeng-video-styles 会先用你的内容生成不同画风的短样片，供你比较；选好方向后，再完成一条 10 秒动画。

上方的演示视频用纸艺场景解释“视频制作从时间线转向工作流”：一排胶片方块逐渐围成一圈，环绕着中间的角色，字幕随讲解依次出现。可以观察它怎样用排列变化表达观点，而不只是把原文放上屏幕。纸艺来自作者额外提供的参考，不是内置 16 种风格之一。

作者在原始文章中介绍了使用 Claude Opus 5.5 制作的过程。这套技能支持 Claude Code 和 Codex，实际画面效果会随所用模型和制作要求而变化。

下面用“提醒不只是通知，还要让人知道下一步做什么”练习。先比较不同画风怎样表现同一个变化，再将内容换成自己的产品或知识点。以下对话示例由本站编写，尚未实际生成视频验证；安装方法和制作流程已根据 README 与技能本身的 SKILL.md 核对。

安装技能，准备自己要讲的一个知识点

先安装 Node.js 18 或更高版本，在终端运行：

npx -y github:Agentchengfeng/chengfeng-video-styles install

安装器将技能放进 ~/.claude/skills/chengfeng-video-styles/，并为 Codex 建立软链接。安装后，新开一个 Claude Code 或 Codex 会话。如果要确认是否安装成功，运行：

npx -y github:Agentchengfeng/chengfeng-video-styles doctor

第一次练习先选一个观点，写清希望观众记住的结论，不必把整篇文章压进十秒。可以在 AI 对话中输入：

使用 chengfeng-video-styles，把下面的内容做成知识动画：
提醒不只是告诉我“有事要做”，还应该让我知道下一步怎么做。
观众：正在设计待办或日程产品的人。
先展示“有事待处理”的通知，再出现“查看待办”按钮，用动画模拟点击后打开一条具体任务的过程。
结论：好的提醒，让下一步更清楚。
先制作不同风格的短样片，等我选定后再做全片。

这里把抽象观点变成了能比较的两个状态：“只收到通知”和“看见下一步”。换成自己的产品时，要提供准确的按钮名称、任务内容和功能说明，避免 AI 为了画面完整而编造功能。

比较 3 秒样片，再确定方向

技能列出 16 种风格，每种先做约 3 秒的 HTML 样片，放到 样片筛选.html 中循环展示。其中“小黑手绘”需要另外安装 chengfeng-videocut-xiaohei 技能；未安装时会跳过，并在筛选页说明。因此，没有提供额外参考、也未安装“小黑手绘”时，通常会看到 15 个样片。

不要只挑颜色最好看的一个。比较同一个通知出现时，哪种画法最容易让人理解“还不知道做什么”和“下一步已经明确”的区别。比如白板手绘可以逐笔画出按钮，扁平 MG（动态图形）可以让通知卡片逐渐变成任务卡片。

如果有喜欢的参考视频或截图，也可以一起发给 AI。它会另做一个参考风格的样片，放在同一页供你比较。

筛选页没有自动打开时，去任务所在目录找到 样片筛选.html。看完后将实际选中的编号发给 AI，例如：

我选 [筛选页里的编号]。
保留这个样片的配色、线条和卡片变化。
把“查看待办”按钮再放大一些，让文字更容易读清。
按这个样片的画风和上述修改，制作完整动画。

沿用选中的画风，完成整条动画

默认交付一个 HTML 文件，在浏览器中打开即可循环播放 16:9、10 秒的动画。画面由代码绘制，使用 Canvas 2D、SVG、WebGL 或 three.js，不需要先生成一套图片素材。技能提供的是画面要求与筛选页模板，具体动画代码仍由 AI 根据你的内容编写。

本例可以先展示没有说明具体任务的通知，再展示按钮和任务内容，最后保留一句结论。把这段要求交给 AI：

按选中的样片完成 10 秒动画。
先展示“有事待处理”的通知，再出现“查看待办”按钮，用动画模拟点击后打开具体任务的过程。
前后状态要有明显区别，不增加新的产品功能。
结尾只保留“好的提醒，让下一步更清楚”，至少停留 1.5 秒。
交付可播放的 HTML，并告诉我文件位置。

打开 HTML 后完整看一遍，尤其检查按钮文字是否来得及读、前后两个状态是否能分清，以及结尾是否还有其他内容遮挡。技能要求交付前检查开头、中段和结尾三帧；静帧能检查布局，完整播放才能判断节奏。

修改一处文字或动作，保留其他部分

假设通知消失太快，不必重新描述整条动画。指出问题、要保留的部分，以及需要一起调整的内容：

通知刚出现就切走了，看不清它和下一张卡片的区别。
请延长第一张通知的停留，适当缩短中间转场，总时长仍为 10 秒。
保留画风、配色、任务内容和结尾停顿。
先给我看修改后的这一段，再交付更新后的 HTML。

技能约定网址带 ?t=秒 时显示指定时刻的静帧，例如 ?t=6；可以用它检查文字与布局。这个参数不是导出 MP4 的命令。随机效果也应使用固定种子，让同一时刻能得到同一画面。

导出 MP4，补充音效与字幕

HTML 可以在浏览器里播放，发布到视频平台通常还需要 MP4。作者的文章展示了进一步导出、添加合成音效和字幕的过程；当前仓库没有附带现成的 MP4 导出脚本或音频工具。AI 需要根据生成的动画选择浏览器录制或逐帧渲染的方式，再转成视频；所需工具取决于具体方案。

可以继续提出：

将确认后的 HTML 动画导出为 MP4。
先说明需要的工具和导出方式，再执行；保留 HTML 源文件。
在通知出现和模拟点击按钮时添加轻微音效，并加入与内容对应的字幕。
这里只需要音效和字幕，不添加旁白。
导出后检查声音、字幕和动作是否同步。

亲自听一遍成片。若某处音效太响，告诉 AI 具体秒数、哪个声音，以及希望怎样调整。文章里提到的制作耗时仅供参考，实际时间取决于电脑配置和动画内容；这套技能本身也没有内置配音方案。

换成自己的主题、数据或产品内容

把下面的占位内容换成自己的信息：

使用 chengfeng-video-styles。
给谁看：[观众]
要讲的一个知识点：[原文、观点或产品用途]
画面中的变化：[开始状态 → 关键动作 → 最后状态]
结论：[希望观众记住的一句话]
必须准确的信息：[数字、名称、按钮文案与来源]
参考：[视频或截图路径，可留空]
先给短样片供我比较，选定后做 16:9、10 秒 HTML 动画。
其他交付要求：[是否需要 MP4、字幕或音效]

讲数据时，给出数据来源和单位；讲操作时，说明操作前后有什么变化；介绍产品时，围绕一个用户问题展示解决过程。如果十秒讲不清，就先减少这条视频要讲的内容，给观众留够读字幕的时间。

仓库使用 Apache-2.0，转载、改编或再分发时保留 LICENSE 与 NOTICE 中的署名。参考视频和图片的使用权限另行确认，技能的许可证不包含这些参考素材的使用授权。