把一篇两三千字的公众号推文变成一支两三分钟的手绘动画短视频放在一年前我觉得这是团队活文案要重新改写、分镜要一帧帧设计、画师要逐张出图、剪辑要卡着节奏拼装。直到我把这套流程拆给一个自定义的 Skill 去跑才发现这件事完全可以一个人完成——文章进去视频出来中间那些繁琐的拆解、绘制、编排全被自动化了。这个 Skill 不是某个画图工具的预设也不是一段简单的提示词而是一个真正跑在 Agent 环境里的可复用工作流模块。它自己读文章、自己列分镜、自己生成手绘风格的视觉元素再调脚本把元素排列组合成视频。我用了大概一个下午的时间把它搭起来之后处理一篇普通公众号文章从拿到正文到出片基本控制在十分钟以内。做出来的东西不是那种 PPT 式翻页动画而是有运镜、有缓动、有笔触感的动态画面。这篇文章就写写这个 Skill 是怎么设计的、我踩过哪些坑、以及你可以怎么照着搭一个自己的版本。适合对 AI 编程工作流感兴趣的开发者也适合公众号运营、知识博主这类有批量视频化需求的内容生产者。1. 为什么公众号内容偏偏适合做成手绘动画1.1 短视频化的真实需求不只是追热点这两年公众号图文内容的打开率整体在降但你不能说公众号不行了。更准确地说是用户的注意力开始往短视频和视频号迁移而公众号里沉淀的选题、观点、案例和深度内容恰恰是短视频最缺的东西。我见过很多运营者的做法是把文章段落直接截图配上背景音乐做成所谓的视频。那种东西观众不买账因为本质上还是图文只是换了个载体播放。真正适合视频化的是有逻辑链条的内容——一篇讲清楚一个方法、一个原理、一个案例的文章天然就是一支短视频的脚本底稿。问题只在于怎么把它转成画面语言而手绘动画恰好是最贴合这种内容的视觉形式之一。手绘动画的优势在哪儿它自带讲解感。一支笔在屏幕上勾画出图形、箭头、流程图、人物剪影观众会下意识觉得有人在自己面前边画边讲。这种形式对解释型内容极其友好比如概念科普、方法论拆解、历史事件梳理、产品功能演示都比实拍或普通图文视频更有记忆点。1.2 手绘风 vs 传统图文视频优势与成本我最初也考虑过两条路一条是把文章改写成口播脚本用 AI 配音加实拍或静态配图另一条是用现成的模板工具做图文视频。两条路各有各的问题。口播路线的问题是人的存在感。没有出镜的话光靠配音加图片观众的跳出率很高出镜的话拍摄成本和剪辑成本全部回来了那就脱离了一个人快速量产的初衷。模板工具路线的问题是同质化。你打开任何一款主流图文视频工具模板就那几百个观众刷到的视频长得一模一样根本谈不上品牌辨识度。手绘动画路线恰好避开了这两点。它不依赖真人出镜也不需要昂贵素材核心成本就是绘制和动效两部分。而这两部分恰恰是 AI 最擅长替代的绘制交给语言模型生成 SVG 元素动效交给脚本编排。我实测下来一篇 2000 字左右、结构清晰的文章拆成 6 到 8 个镜头从拆解到出片大概需要 8 到 12 分钟其中真正需要我手动干预的只有最后检查一遍字幕和节奏。1.3 先说清楚 Skill 是什么不是什么在聊搭建细节之前必须先统一一下概念因为Skill这个词最近被用得很泛。在 Claude Code、Codex 这类 Agent 编程工具里Skill 指的是一个带说明文档和可执行脚本的工作流模块它通常包含一个清单文件SKILL.md、若干参考脚本和知识库数据。Agent 在干活时先读 SKILL.md按里面的步骤、规范和边界条件执行任务而不是靠一段临时的对话提示词临时发挥。所以 Skill 和普通 prompt 的本质区别是prompt 是一次性的、被动的Skill 是结构化的、可复用的它能把拆解文章→生成分镜→绘制元素→合成视频这套流程固化下来甚至可以在多个项目里反复调用。它还允许你挂脚本、挂规则、挂参考样例让 Agent 的输出稳定性大幅提升。它也不是一个传统的插件。插件一般是指给某个软件扩展功能的独立程序而 Skill 是 Agent 生态里的技能包更像是一套带操作手册的自动化工具集合。基于这个理解我们来拆它。2. Skill 的完整工作流一篇文章是怎么变成一支视频的2.1 六步流水线的整体设计这个 Skill 的完整流程我拆成了六个阶段。一开始其实只有四步后来在实测中发现有些环节需要单独兜底才逐渐补齐成六步。阶段做什么产物关键工具1. 获取正文从公众号文章取到干净的文本纯文本文档后台编辑器、API2. 内容拆解提取核心观点、案例、逻辑链结构化大纲LLM 分析3. 场景规划把大纲转成分镜脚本JSON 分镜表LLM 规则模板4. 元素绘制为每个镜头生成手绘风视觉元素SVG / PNG 切片LLM 生成 SVG5. 动画编排按分镜表生成动效描述动画脚本 JSONPython 脚本6. 视频合成渲染并输出最终视频MP4 文件Pillow、ffmpeg我自己的实践里最耗 token 的是第 4 步最需要靠规则约束的是第 3 步最容易被忽略但最终决定视频质量的是第 5 步。后面每一节都会展开讲。2.2 为什么中间层选 SVG 而不是直接出视频设计这个 Skill 时我面临一个关键决策视觉素材用位图还是矢量图现在有很多 AI 绘图工具能直接生成插画风的 PNG但我在实测中发现如果让模型直接生成一张完整的插画级位图经常遇到风格漂移、元素不可拆分、尺寸不可控的问题。一张 16:9 的插画换个镜头又要重画一遍效率极低。所以我把中间层定为 SVG。SVG 有几个特性特别适合这个场景。第一它是文本格式大模型生成 SVG 的稳定性和可控性远高于生成位图出错也好修。第二它是矢量的缩放不糊可以在 ffmpeg 里做缩放平移运镜而不损失画质。第三它是可拆解的一个图层一个元素后期编排动画时可以分别控制每个元素的位置、透明度、旋转角度。当然SVG 也有它的短板复杂的渐变、噪点、笔触纹理表达起来比位图麻烦。我的处理思路是界面元素用 SVG背景纹理用位图素材叠加。比如一个讲解时间管理四象限的镜头四个象限的方框、箭头、图标用 SVG 绘制而纸面背景用一张扫描纸纹 PNG 垫底两层叠加之后手绘感一下就出来了。2.3 哪些环节交给模型哪些环节交给脚本这是设计 Skill 时最核心的问题。如果把所有事情都丢给模型它会在动画编排环节频繁翻车——比如忘记给元素加淡出指令或者把关键帧时间算错。反过来如果全部用规则脚本写死又没办法处理千变万化的文章内容。我的划分方式是模型负责理解与决策脚本负责计算与渲染。模型干三件事读文章、定分镜、写 SVG。这三件事都需要语义理解能力恰好是模型的强项。脚本干另外三件事解析 JSON 分镜表、计算关键帧数值、组装 ffmpeg 命令。这三件事需要精确计算恰好是脚本的强项。两者之间的接口就是 JSON 分镜表——模型输出严格按 schema 填写的 JSON脚本读取后按字段渲染。这套划分的好处是任何一环出错都能准确定位。视频里某个元素没动我就去查动画 JSON 里有没有这个元素的 motion 字段而不是去猜是模型画错了还是脚本渲染错了。3. 从零搭建你的公众号手绘动画 Skill3.1 Skill 目录结构和 SKILL.md 的写法先看目录结构。我的 Skill 放在 Agent 的 skills 目录下命名为article-to-sketch-videoarticle-to-sketch-video/ ├── SKILL.md ├── scripts/ │ ├── parse_article.py │ ├── build_scenes.py │ ├── render_svg.py │ └── compose_video.py ├── templates/ │ ├── scene_schema.json │ └── style_guide.md └── assets/ ├── paper_texture.png └── fonts/SKILL.md 是 Agent 首先读取的说明书。它的作用不是写一大堆概念而是告诉 Agent这个 Skill 的输入是什么、执行步骤是什么、输出规范是什么、常见错误怎么规避。我写的 SKILL.md 开头长这样# Article to Sketch Video 将一篇公众号文章转换为手绘动画风格短视频。 ## 输入 - 文章纯文本保存在 input/article.txt - 视频参数宽高、时长、字幕开关写在 input/config.json ## 执行步骤 1. 运行 parse_article.py提取标题、段落、核心观点输出 data/outline.json 2. 将 outline.json 按 templates/scene_schema.json 的格式转换为分镜列表 data/scenes.json 3. 对每一个 scene用 SVG 绘制该镜头的视觉元素存为 frames/scene_XX.svg 4. 运行 render_svg.py 将 SVG 渲染为透明背景 PNG 5. 运行 compose_video.py 生成视频并输出到 output/final.mp4 ## 输出规范 - 视频分辨率默认 1080x1920竖屏如 config.json 另有配置则按配置执行 - 每个镜头时长 4~9 秒 - 字幕字号不低于 48px保证手机端可读 ## 常见错误 - 不要试图在一个 SVG 里画完整镜头按元素拆分 - 镜头切换不要用生硬剪切必须加 8 帧以上的淡入淡出 - 如果文章段落过长先拆成小节再规划场景这段说明文字的价值在于它把决策规则前置给了 Agent让 Agent 在生成过程中主动规避我踩过的坑。比如镜头切换必须加淡入淡出这条就是我做完第一版视频后发现太生硬写进 SKILL.md 之后才解决的问题。3.2 文章获取合法且稳定的输入方式获取公众号文章正文是这个流程里最现实的一环。我试过多种方式最终稳定使用的是下面这几种按推荐程度排序自己的公众号直接在公众号后台编辑器里复制正文这是最干净、最合规的方式。如果你有原创文章的编辑权限复制下来的文本基本是纯文本连图片描述都能顺手整理出来。我日常处理自己的文章九成都是走这个入口。已获授权的转载内容如果文章不是你写的但作者明确授权你使用仍然建议用复制粘贴的方式保存正文。不要走任何技术手段去绕过公众平台的前端限制授权边界先谈清楚后面做视频、分发都省心。API 接口读取如果你是开发者且文章归属自己的公众号可以通过微信公众平台的接口拉取图文素材。这里的重点是一定要走官方开放能力而且要严格按照平台规则控制调用频率。获取正文之后我会顺手做一遍文本清洗\u2014\u2014去掉多余空行、去掉表情符号、去掉文末的广告和引导关注段落。这个清洗步骤看似简单但对后续拆解的影响非常大。我一开始偷懒没做结果模型把感谢阅读、点击关注当成了正文核心观点给了一句鸡汤配了整整一个镜头非常浪费。3.3 场景与分镜拆解这是最重要的提示词工程拿到干净的正文之后Skill 要做的第一件事是把文章拆成可以画的场景。这一步是整个 Skill 的魂它的质量直接决定视频能不能看。我的分镜 schema 长这样{ title: 选题标题, duration: 8, narration: 这一镜头的旁白文本建议不超过60个字, visual_elements: [ {type: text, content: 四象限法, style: handwritten}, {type: shape, shape: square, style: sketchy_border}, {type: arrow, from: 左下, to: 右上, style: dashed} ], transition: fade }对模型的要求是一个 scene 只承载一个核心信息点visual_elements 不超过 6 个元素narration 用文章原意改写、不要照抄长句。这些约束全都写进了 scene_schema.json 和 SKILL.md 的规则里。这里有三个我反复强调给模型的规则第一每镜头只有一个核心信息。文章里一段话可能包含观点、案例、数据、结论四层信息但视频镜头承载不了这么多。模型需要做取舍把一段话浓缩成一个画面能讲清楚的一件事。第二画面优先服务逻辑关系。如果文章讲的是时间顺序画面就应该是一条横向时间轴如果是因果论证画面就应该有箭头连接如果是罗列要点画面就应该是一张逐步点亮的分点列表。模型在规划分镜时要能识别文章的底层逻辑结构而不是每段配一幅示意图。第三旁白必须口语化、短句化。公众号文章的书面语到视频旁白之间需要转译。直接朗读原文会显得又长又密我要求模型把旁白控制在正常语速 3 到 5 秒能念完的长度最多不超过 60 字然后配合画面留给观众消化的空间。3.4 视觉元素绘制和动画脚本生成分镜确定之后进入我前面说的最耗 token 的环节SVG 元素绘制。我先让模型为每个 scene 生成一个独立的 SVG 文件。这个 SVG 里画的是静态画面中所有会出现的元素但不考虑它们的运动状态。比如一个讲解早睡早起好处的镜头SVG 里画一个拟人化的小太阳、一张床、一个时钟、两条花体字元素之间的相对位置摆好就行。然后我把这个 SVG 文件喂给 render_svg.py用 Python 的 svglib 或者 cairosvg 把它渲染成带透明通道的 PNG。这里我强烈建议用 cairosvg它处理文本转曲和滤镜效果比 svglib 稳定得多尤其在 Linux 服务器环境里表现更好。PNG 渲染好了之后动画编排脚本开始工作。它读取 scenes.json为每个元素计算关键帧def build_motion(element, scene_duration, delay0): return { element_id: element[id], start_time: delay, appear: {opacity: 0, scale: 0.8}, mid_time: delay scene_duration * 0.3, mid_state: {opacity: 1, scale: 1.0, x: 0, y: 0}, end_time: scene_duration, end_state: {opacity: 1, scale: 1.02} }我默认给每个元素加0.3 秒淡入 轻微放大回弹的入场效果这个组合是我试了很多参数之后觉得最有手绘质感又不油腻的动效。它模拟的是手正在把元素画上去的过程配合纸面纹理素材观感上非常接近真实的 sketch 讲解视频。3.5 视频合成与环境依赖所有镜头渲染完毕、每个元素的运动关键帧算好之后就交给 compose_video.py 来合成。这个脚本做三件事第一用 Pillow 把每个镜头按时间轴拼接成帧序列第二根据关键帧把 PNG 元素合成到画布上第三用 ffmpeg 把帧序列编码成 H.264 的 MP4。我使用的合成方案是逐帧渲染再编码而不是直接让 ffmpeg 做 filter 动画。逐帧渲染的好处是可控性强任何一帧你想改成什么样都能精确干预代价是渲染速度稍慢1080x1920 分辨率、30fps、30 秒视频大概需要一两分钟。对我来说这个代价完全可接受换来的是几乎无限的自由度。环境依赖方面核心就三样Python 3.10、cairosvg、ffmpeg。Pillow 和 moviepy 被我用来做帧合成和音频混流。fontconfig 需要装一下不然中文字体经常渲染成方块。中文字体我用的是开源字库比如思源黑体或者站酷快乐体后者在标题场景里的手写感非常强。如果你也想跑起来可以直接在项目目录下写一个 requirements.txt把cairosvg、Pillow、moviepy、python-ffmpeg列进去然后让 Agent 帮你安装。第一次搭环境是最容易劝退人的环节但其实避坑要点就一条检查 ffmpeg 是否真的进了 PATH。很多渲染到一半报错的案例最后查出来都是 ffmpeg 没装上或者版本不对。4. 让手绘动画活起来的细节打磨4.1 手绘笔触和配色怎么统一跑通第一版之后画面上最大的问题不是内容缺失而是风格不统一。模型在生成不同镜头的 SVG 时经常换画风第一个镜头是粗线条简笔画第二个镜头突然变成细线描边风第三个镜头又冒出一堆圆角扁平图标。单看每个镜头都还行合在一起就像换了好几个画师。我把风格约束提炼成一段 style_guide.md挂在 templates 目录下让模型每次画 SVG 前先读一遍。里面写了四类硬约束线条SVG 的 stroke 宽度统一在 4 到 6 之间stroke-linecap 使用 round制造手绘笔触的圆润感描边所有形状不用纯黑作为描边色统一用深棕色#4A3B32模拟马克笔或针管笔的效果填充主体元素用低饱和度的暖色系填充主色不超过三种背景色统一用米白色#F9F6F0字体标题使用手写风字体正文解释用圆体或黑体禁止用宋体这条 style guide 上线之后镜头的连续感提升了一个档次。现在几段视频连起来看观众能明显感觉到是同一个风格系列品牌辨识度也出来了。4.2 动效节奏停留、位移、缩放和淡入淡出手绘动画视频和普通 PPT 视频最核心的区别在于笔不停止的感觉。真实手绘视频里画师的手一直在动要么在画新元素要么在圈重点要么在移动画面。如果画面停住超过 2 秒观众就会产生这是静态图的错觉整个视频的生气就丢了。我的动效规则是每个镜头至少保证两个元素有动画。具体来说入场元素默认带淡入和缩放回弹主体元素在镜头中段加一次微小的位移动画模拟画笔在描摹轮廓如果要强调某个重点就用一个draw 轨迹效果——让一个元素的 stroke-dasharray 从 0 到全长模拟笔画被一笔笔画出来的过程。draw 轨迹效果是点睛之笔实现也不复杂在 SVG 里先算好路径总长度然后把 stroke-dasharray 设为0 总长度通过动画把它变成总长度 0。我在 compose_video.py 里用 Python 动态改 SVG 的 style 属性来实现这个效果实测下来非常流畅。另一个值得注意的点是镜头切换不能太频繁。一开始我追求节奏快每个镜头只给 3 秒结果观众还在看画面就被切走了。后来我把单个镜头时长调整为 5 到 9 秒整体节奏反而更舒服。信息密度靠旁白撑着镜头切换是给观众换换口味不是让人眼花缭乱的。4.3 字幕、音效和配乐的处理字幕这东西做视频时最容易忽视但恰恰是手绘动画视频里观众最依赖的元素。手绘动画的视觉语言偏抽象如果字幕跟不上观众很容易看不懂画面上讲的是什么。我一开始只在画面底部放白色半底黑字后来发现手机端播放时太小果断改成大字居中偏下48px 起步。音频方面我的配置很简单背景音乐一条音量压到 -22dB 左右用来垫底音效用三种——笔刷音效在每个元素入场时触发、翻页音效镜头切换时触发、强调音效重点内容出现时触发。素材我都是从一个免费音效库里挑的剪辑时把音效触发点对齐到关键帧时间就行了。旁白配音我暂时用的是 TTS 引擎生成放在最后混流时叠加到视频上。TTS 的音色选择很重要我实测了几款常见的国产 TTS 引擎普遍的问题是需要调节语速——默认语速念 60 字旁白大约需要 20 秒太拖沓了按 1.15 到 1.25 倍速处理后才能达到预期的节奏感。4.4 不同公众号内容类型的适配模板文章风格千差万别不可能用一套分镜规则通吃所有内容。我在 Skill 里内置了三套分镜模板模型在读取文章时先按标题和正文风格判断类型再选择对应模板。干货教程类知识科普、方法教学默认步骤流程模板。画面按步骤顺序出现每一步配一个图标和一句话旁白。视觉上多用箭头串联或者画一条弯曲的路径把每个步骤标注在路径上。观点观点类时事评论、行业分析默认论点-论据模板。开场直接抛出核心观点大字然后用论据卡片逐张飞出每张卡片对应一个案例或数据表现。视觉上多用对比、加粗、高亮元素。故事叙事类个人经历、品牌故事默认时间线模板。画面采用横版时间轴或者竖版滚动画面按时间顺序展开事件节点。情感类的文章在底色上可以用一点偏暖的纸纹纹理。这三套模板不要求模型死板套用但给了它一个较好的起点。实测下来模型根据模板生成的分镜结构比完全自由发挥稳定得多返工率大幅降低。5. 实际使用中踩过的坑和我的兜底方案5.1 拆解失败文章结构不清晰时怎么兜底公众号文章并不总是逻辑清晰。有些作者喜欢意识流写法想到哪写到哪一段话里塞了三四个观点或者通篇都是情绪的渲染没有明确的论点。这种情况下拆解出来的分镜经常是散的每个镜头都在讲一个飘忽的点连起来看就是一个没有主题的拼盘。我试过让模型强行拆效果不行。后来改成先概括再拆解的两段式流程模型第一遍把文章压缩成一段 200 字以内的核心概括和五个以内的要点第二遍再根据要点规划分镜。这个先收窄再展开的方式对结构混乱的文章有奇效——先逼模型读完整篇文章理出主线再动手拆画面。如果概括阶段模型自己都理不清主线我会直接在 SKILL.md 里加一条无法明确提炼核心观点时输出提示并结束流程的规则。这个兜底方案看似浪费时间实际上省下了后面所有环节的无效产出。5.2 token 超限和绘制中断的处理公众号文章动辄 3000 字如果再加上分镜 JSON 和 SVG 内容单次对话很容易触发上下文超限。我一开始会一次性把整篇文章和全部分镜要求塞给模型结果频繁在第三个镜头开始后出现生成中断的尴尬局面。后来我把流程改成逐个镜头生成——模型先把全部场景规划和旁白写出来然后每生成一个镜头的 SVG 就立刻保存再继续下一个。这样每个镜头的 SVG 生成只占用很短的上下文窗口把中断风险控制在最多丢一个镜头的范围。真遇到中断也没关系因为 scenes.json 已经保存了完整的分镜规划重新让模型从失败的镜头开始续跑就行。为了让续跑更顺利我在 SKILL.md 里给模型加了一个规则生成 SVG 前先输出正在绘制第 N 个镜头镜头标题这个输出成为日志里的进度锚点重启续跑时一眼就能定位断点。5.3 视频参数适配多平台发布同一个视频发视频号、发抖音、发小红书对尺寸和时长的要求不一样。我默认产出的是 1080x1920 竖屏视频这个尺寸在手机端竖屏平台通用性最好。但如果要发 B 站或者视频号横屏场景我会直接改 config.json 里的 width 和 height让渲染脚本重新生成。这里有个容易踩的坑是改分辨率不只是改数字字幕大小、元素摆放位置、字体缩放比例全都要跟着变。如果直接拿竖屏的 SVG 渲染成横屏画面会留出大片空白。我的处理方式是让 compose_video.py 读取 config.json 后把画布从 1080x1920 切换到 1920x1080同时按画布宽度的比例重新计算所有元素的位置和字号。SVG 元素用了 viewBox 相对坐标可以比较自然地完成这个换算。时长方面我的经验是控制在一分钟到两分钟。这个时长覆盖了大多数短视频平台的推荐流量区间也足够承载一篇公众号文章的核心信息。超过三分钟的视频完播率会明显下降除非内容信息量极大否则不建议做太长。5.4 关于内容授权和发布边界的提醒最后必须得说一句实在话这个 Skill 适合处理你自己写的、或者你拥有合法使用权的文章。公众号生态里互相转载、洗稿的乱象一直存在但做工具的人不应该给这种乱象添柴火。我在 SKILL.md 的第一条就写明了使用边界——仅用于处理归属清晰的内容如果你要拿别人的文章做视频先获得作者的明确授权。实际操作中我甚至会保留每一个视频对应的原始文章链接和授权记录放在项目的 README 里。这不是什么大道理纯粹是给自己省事——万一出现版权争议白纸黑字的授权记录就是最有力的说明。做内容的人手里的素材越干净未来的路就越宽。另外视频里如果涉及数据引用、第三方商标、名人肖像也建议先判断一下是否在合理使用范围内。我个人的习惯是拿不准的素材一律不用换一种表达方式或者自己画一个示意图形比起在版权问题上反复横跳要踏实得多。整个流程跑顺之后我现在处理一篇新文章的节奏是这样的先在公众号后台复制正文保存到 input 目录改好 config 里的标题和平台参数然后让 Agent 按 SKILL.md 跑一遍。中间我会去倒杯水回来检查一遍生成的字幕和几个关键镜头的 SVG觉得某个镜头表达不到位就让 Agent 重新画那一镜。最后看一遍成片顺手转存到发布后台。这中间当然还有很多可以继续折腾的地方比如给 Skill 加一个自动抓取公开授权文章的桥接模块或者把 TTS 换成更自然的真人音色克隆。不过就目前这个版本它已经把我的公众号内容视频化成本压到了可以忽略不计的程度。你在搭自己的版本时不需要照搬我的分镜规则或动效参数只要把握住模型负责理解、脚本负责精确这个核心思路再把你最常做的内容类型沉淀成模板这个 Skill 很快就能长成你自己的形状。我最近正在研究的是把文章里的数据图表也自动画成手绘风的折线图和柱状图思路和画流程图差不多等这版稳定了我再写篇文章分享。