ARTICLE DETAIL

资讯详情

深耕编程入门与网站建设的一线实战洞察。

用AI Agent和Skill将公众号文章自动转为手绘动画视频

用AI Agent和Skill将公众号文章自动转为手绘动画视频 公众号图文打开率越来越低这是做内容的人都逃不开的痛。我自己的号也是文章写得再用心读者点开读完的比例一直在降更别说转发。后来我开始把每篇长文做成视频发到视频号、B站但问题又来了真人出镜要化妆要布景剪辑成本高到离谱AI数字人又总觉得差点“人味儿”。直到我试了“手绘动画视频”这个路子——一支笔在屏幕上把文章里的关键概念画出来配合旁白讲解生动、有记忆点而且制作起来居然能全自动。更妙的是我把整个流程打包成了一个Skill现在从公众号文章到成片基本就是喂给AI一段正文就能出活。这篇文章就完整拆解一下我是怎么设计、实现这个“公众号文章生成手绘动画视频”Skill的。全程用我实际做过的方案来讲包括Skill的目录结构、核心代码、参数选择、踩坑记录。适合公众号运营者、视频创作者以及正在研究Agent Skill开发的技术玩家参考——不管你是想直接复现还是想借鉴思路做自己的自动化工作流应该都能从里面找到能直接用的东西。1. 整体设计与思路拆解1.1 这个Skill到底在解决什么问题先说痛点。公众号文章是图文形式优点是信息密度高、逻辑完整缺点是和用户的阅读习惯越来越不匹配。视频就不一样用户不需要主动阅读躺在床上就能听信息是“喂”到眼前的。但视频生产有个最大拦路虎素材和剪辑。要我为了每一篇文章都去录屏、找B-roll、配音、加字幕一篇文章下来三四个小时就没了长期根本坚持不了。手绘动画视频恰好是个折中方案。它不需要真人出镜也不需要实拍素材核心就两件事一支“电子笔”按顺序画出关键图形加上解说旁白。文字、图标、线条都是程序生成的理论上完全可以用代码做出来。我最初的目标非常明确让AI读一篇公众号文章自动提取出核心观点拆成若干个小段落为每个段落生成对应的手绘画面再合成配音和字幕最后输出一个半分钟到几分钟的解说视频。Skill的价值就在于把这一整条链路封装起来。它不是一段简单的脚本而是一套带说明、带工具、带流程的“技能包”可以被现在主流的AI Agent比如Claude Code、Codex这类命令行智能体直接加载调用。我只需要说一句“把这篇公众号文章做成手绘动画视频”Agent就会自己读Skill里的说明按步骤执行。1.2 为什么选“Agent Skill”而不是传统脚本在动手之前我其实纠结过很久要不要直接写一个Python脚本把文章输入进去输出视频后来发现这条路不现实。手绘视频的难点根本不在“渲染”而在“理解”。AI得先读懂文章在讲什么、哪些内容该保留、哪些该舍弃、用什么画面来表现一个抽象概念这些判断如果全用代码写死等于要把所有文章类型都穷举一遍根本做不完。Skill这个思路解决的就是“AI判断固定流程”的结合。Skill本质上是一个带说明文档的目录里面有明确的工作流程、工具调用方式、输出规范。AI Agent读了SKILL.md之后会按照里面定义的步骤去执行但在具体内容生成上——比如给某个段落设计什么画面、用什么颜色——它是自己判断的。这就把“理解力”交给了大模型把“执行力”交给了工程化流程。对比一下大概是这样方案理解文章内容生成分镜渲染视频扩展性纯Python脚本几乎无法实现只能靠模板可以差大模型直接生成视频可以可以各自为政难统一中Agent Skill可以可以工程化控制好所以我的选择是Skill做“流程管理者”大模型做“内容决策者”Python和FFmpeg做“最终执行者”。这样既能发挥AI在内容理解上的优势又能保证输出格式稳定、参数可控。1.3 全流程分解从文章到成片我做这个Skill时把整个流程拆成了六个环节内容输入接收公众号文章的标题和正文正文最好是Markdown格式这一步是所有后续工作的前提。语义拆解AI把文章按逻辑切成若干个小节每个小节提炼出主题句和关键词。分镜设计为每个小节设计对应的手绘画面包括画面元素、文字标注、绘制顺序。画面生成根据分镜设计生成SVG格式的手绘路径再渲染成带绘制过程的动画片段。配音生成用TTS引擎为每个小节生成中文旁白音频。视频合成把动画片段和音频按时间轴对齐加上字幕用FFmpeg合成最终MP4。这个链路看起来简单但每个环节都有不少细节怪坑。下面我会把每个环节单独拿出来讲清楚。2. Skill结构与核心技术细节2.1 Skill的标准目录结构一个合格的Skill首先得有一个清晰的目录结构让AI Agent一眼就知道该干什么。我最终用的结构是这样的wechat-video-skill/ ├── SKILL.md ├── requirements.txt ├── scripts/ │ ├── parse_article.py # 文章解析 │ ├── generate_script.py # 分镜脚本生成 │ ├── render_svg.py # SVG动画渲染 │ ├── tts.py # 配音生成 │ └── compose_video.py # 视频合成 ├── assets/ │ ├── fonts/ # 中文字体 │ ├── backgrounds/ # 背景底图 │ └── icons/ # 手绘风格图标库 └── examples/ └── sample_article.md # 示例文章SKILL.md是整个Skill的灵魂里面用清晰的Markdown写明了这个Skill的功能、适用场景、输入输出格式、调用步骤。Agent读到这个文件后就能理解“这个Skill是干什么的、按什么顺序调用脚本”。写SKILL.md有个要点不要写废话要写“Agent看得懂的指令”比如明确告诉它“文章超过800字时必须先拆分成多段每段对应一个独立的动画片段”。2.2 文章解析先把文字变成结构化数据公众号文章的正文其实很“脏”尤其如果你从浏览器直接复制会带上大量无关的样式、广告、推荐位。我处理的方式是不直接处理HTML而是建议先把文章转为干净Markdown然后交给脚本做结构化拆分。parse_article.py的核心逻辑并不复杂就是按语义切分。你可以用大模型切也可以用简单的规则切。为了稳定性我在Skill里默认用了规则大模型混合的方案先用正则把大段文本按空行、标题切成块再让AI对每一块生成一个3到5个词的小标题和主题句。这样既保证结构稳定又能让分镜内容有点“灵性”。一个关键的参数是“分段长度”。我实测下来每段中文文本控制在80到150字之间效果最好。太短了视频切得稀碎观看体验差太长了一段画面要承载太多信息手绘动画跟不上旁白节奏。2.3 手绘动效的实现原理这是整个Skill里最核心也最容易翻车的地方。很多人以为手绘动画就是“放一个写字过程的GIF”其实要让画面产生“有人在现场画给你看”的感觉关键在于绘制顺序和路径动画。我的方案是用SVG来描述每一帧画面然后用stroke-dasharray和stroke-dashoffset这两个属性实现“描边效果”。基本原理是一条线画好之后把它的虚线段长度设置成整条路径的长度然后把偏移量从最大值逐渐变为0视觉上就是线条从起点“画”到了终点。这个技术本身不新鲜但用在这里非常合适。render_svg.py做的就是这样一件事读取一个分镜的JSON描述里面包含若干个图形元素每个元素都有类型矩形、圆形、直线、手写文字、位置、大小、颜色、绘制顺序。脚本根据绘制顺序生成一段SVG动画序列再用截图工具逐帧输出为PNG图片。最后把PNG序列合成视频就是一支笔正在画面里“画”出内容的手绘效果。为了让手绘效果更自然我还在脚本里给每个元素加了“随机延迟”。比如同一个画面里有三条线如果同时开始画就完全没有手绘感但给第二条、第三条加0.2到0.5秒的随机延迟笔触就活了起来。这个随机延迟的区间可以写进Skill的参数配置里我觉得0.3秒左右观感最舒服。2.4 配音与字幕让视频真正“能听”手绘动画加旁白才算一个完整的解说视频。配音我用的是edge-tts微软的免费TTS接口中英文都支持而且声音质量在免费方案里算是非常能打的。实测下来中文用“zh-CN-XiaoxiaoNeural”这个音色的自然度最高语速默认就比较合适。做TTS时有一个细节不要一次性把整篇文章扔进去合成而是一个分镜接一个分镜地合成。这样每个片段都能单独控制后续如果某个画面的文案改了只需要重新生成对应片段的音频不用全部重来。字幕我也不是事后用语音识别生成而是在生成脚本时就保留了一份带时间戳的文本合成字幕时直接对齐准确率100%。3. 实操过程从零搭好这个Skill3.1 环境准备我是在一台普通的MacBook Pro上开发的Windows和Linux也完全可以跑主要依赖都是跨平台的。需要准备的东西有这些# Python 3.10 python3 -m venv .venv source .venv/bin/activate # 安装依赖 pip install edge-tts openai pillow # FFmpegmacOS用brew装Linux用apt装 brew install ffmpeg需要特别提醒的是SVG渲染那个环节如果你不想引入太重量的浏览器可以用cairosvg库把SVG转成PNG。这个库的渲染效果基本够用而且纯Python环境不用额外装Chrome。3.2 编写SKILL.md这是整个Skill的“说明书”也是AI Agent的行为准则。我写的第一版在这里# 公众号文章手绘动画视频生成 Skill ## 功能 将一篇公众号文章Markdown格式转换为手绘动画解说视频输出MP4文件。视频风格为白板手绘内容包括关键文字和图形的逐笔绘制过程配合中文旁白。 ## 适用范围 - 微信公众号文章、博客文章、知识类长文的视频化 - 适合制作1-5分钟的短视频解说 ## 输入 - article_title: 文章标题 - article_body: Markdown格式的公众号正文 ## 处理流程 1. 调用 parse_article.py 拆分正文为段落每段80-150字 2. 对每个段落生成分镜JSON包含画面元素、文本、绘制顺序 3. 调用 render_svg.py 将分镜渲染为PNG序列 4. 调用 tts.py 为每个段落生成中文旁白 5. 调用 compose_video.py 合成PNG序列音频字幕为MP4 ## 输出规范 - 分辨率: 1920x1080 - 帧率: 25fps - 视频格式: MP4 (H.264) - 旁白语言: 中文普通话这里面最容易被忽略的就是“输出规范”这一节。有了明确的分辨率、帧率、格式Agent在调用合成脚本时就不需要再问东问西直接按标准执行。3.3 核心代码实现出于篇幅考虑我把最关键的分镜生成代码精简一下贴出来# generate_script.py # 输入文章段落列表 # 输出分镜JSON列表 import json def generate_storyboards(paragraphs, llm_call_func): storyboards [] for idx, para in enumerate(paragraphs, 1): # 让大模型为每个段落生成画面描述 prompt f请为一个手绘动画视频设计分镜。 段落内容{para} 请输出JSON格式的分镜设计包含 - keywords: 画面中要突出的关键词不超过4个 - elements: 画面元素列表每个元素包含type(line/rect/circle/text)、content、x、y、order - voiceover: 用于配音的旁白文案口语化不超过50字 只输出JSON不要输出其他内容。 result llm_call_func(prompt) storyboards.append({ paragraph: para, scene: idx, design: json.loads(result) }) return storyboards实际运行时llm_call_func是一个调用大模型接口的函数可以接任何你习惯的LLM。这里的要点是把“旁白文案”也让模型一起生成而不是直接朗读原文。直接朗读原文会很枯燥让模型改写一遍之后口语感明显提升视频的完播率也会好很多。3.4 合成视频的关键参数最后一步是合成。我曾经被FFmpeg的音频对齐问题折磨过很久最终的解决方案是先分别生成每个片段的视频无声再把对应音频按时间戳一首接一首地拼起来最后一次性混流。这样音画同步相对可靠。合成命令参考如下ffmpeg -y \ -r 25 -i scene_%02d.png \ -i voiceover.mp3 \ -c:v libx264 -pix_fmt yuv420p \ -c:a aac -b:a 192k \ -shortest \ output.mp4注意-c:v libx264 -pix_fmt yuv420p这个组合pix_fmt一定不能省否则在某些播放器里会出现无法播放或颜色偏绿的问题。这些都是我用实际案例踩出来的坑。4. 常见问题与排查技巧4.1 公众号内容从哪来如何合规使用这几乎是每个看到这个Skill的人第一个问的问题。先说结论我做这个Skill默认处理的是你自己有版权的内容比如你自己的公众号文章、你获得授权的文章、或者你从公开渠道整理的自己原创素材。实际操作中我通常是把公众号后台文章编辑器里的内容直接复制出来粘贴成Markdown文件再丢给Skill处理。没有必要去碰任何形式的“采集”“抓取”“模拟登录”之类的东西一个是安全性没有保障另一个是版权上风险太大。如果你确实要帮别人做视频先拿到作者的授权这是底线。4.2 手绘效果不自然怎么办如果你生成的视频看起来像“幻灯片”而不是“手绘”九成是出在绘制顺序和速度上。我遇到过的情况包括所有线条同时出现、笔画速度过快、元素之间没有停顿。解决办法有三个确保每个画面里的元素按逻辑顺序编号主标题先画然后是图形最后才是批注文字。在render_svg.py里给每个元素增加随机延迟范围控制在0.2到0.5秒。降低画笔速度。如果你的动画是0.2秒画完一条线看起来会非常“急躁”改成0.6到0.9秒手绘感会强很多。4.3 中文旁白读出来“机器味”很重edge-tts默认音色其实已经不错但如果你觉得“机器味”重通常是因为缺少标点停顿。解决方案是生成旁白文本时强制在长句中间加逗号在段落结尾加句号。模型生成的旁白如果全是逗号连接的长句TTS一口气读下来怎么调都不自然。另外一个心得旁白不要直接引用原文先让大模型口语化改写再把改写后的文本喂给TTS。我自己测试过同一段文字原文朗读和口语化朗读的听感差别巨大后者完播率明显更高。4.4 视频渲染太慢怎么办1920x1080、25fps、几分钟的视频逐帧渲染确实需要一点时间。如果你只是做初稿预览建议先在Skill里加一个“预览模式”参数输出480p、12fps的版本确认分镜没问题后再用高清参数完整渲染。我实测预览模式能把渲染时间缩短到原来的五分之一左右。如果还是慢可以考虑把渲染并行化——每个独立片段的PNG序列是互不依赖的用Python的concurrent.futures就能轻松让多个场景同时渲染。4.5 从网页复制的公众号正文很乱从微信里直接复制文章粘出来的往往是带着一大堆样式和隐藏字符的碎文本。我推荐的清理流程是先粘贴到Markdown编辑器比如Typora、Obsidian里做一次“纯文本粘贴”把格式清干净再用“导入Markdown”的方式喂给Skill。这样能避免绝大多数编码问题和样式错乱问题。如果已经粘进来了也不要慌。在parse_article.py里加一个简单的清洗步骤——去掉空行、去掉以“点击”“关注”“长按”开头的导航语、合并被硬换行拆开的中文段落——基本就能恢复出干净正文。5. 这个Skill还能怎么扩展写完之后我自己又玩了一段时间发现这个Skill可以做的方向其实很多。比如把输出的视频直接配合一个“图文封面生成”的步骤就能一条龙产出视频号发布所需的封面图。再比如接入现在流行的“AI数字人口播”方案用同一个分镜JSON把手绘画面替换成数字人背景输出风格就完全不一样了。如果你做的是系列栏目比如每周一篇行业观察可以把每期的标题、关键词、发布日期维护成一个配置文件让Skill自动批量生成最后只人工审核一遍就发布。整个流程下来我从“写文2小时做视频3小时”变成了“写文2小时AI跑20分钟出片”效率差距是非常大的。对我来说这个Skill最有价值的不是“手绘动画”这个形式而是“把一件重复枯燥的工作封装成AI能直接执行的流程”的思路。现在Agent生态越来越成熟Skill这个形态正在变成新的“应用分发方式”把一个Skill做出来自己用是一层分享出去能让无数人复用又是一层。至少我身边不少朋友已经在我这个模子基础上改出了PPT转视频、小红书文案转动画的好几个版本。
返回列表