用 WorkBuddy 把公众号文章做成 SVG 互动动画的实操教程
教你用WorkBuddy制作公众号文章酷炫SVG动画
- 1作者用 WorkBuddy 多轮对话做出可直接生成公众号 SVG 动画文章的 Skill，基于限时免费的腾讯 Hy4 模型。
- 2流程是把文章丢给 WorkBuddy，生成约 7 个产物文件，重点看预览.html 和导入助手.html 两个。
- 3导入方式为在公众号后台右键检查切到 Console，手动输入 allow pasting 后粘贴注入代码实时显示。
- 4Skill 目前仅 8 个配色、9 个场景和 5 个动效，不满意可继续对话调整或换其他模型重试。
公众号 SVG 互动动画从需要懂代码的专业制作，变成运营借助 Agent Skill 能自助完成的内容工作。
- 影响：公众号互动动画的制作门槛降到运营可自助尝试的程度，活动推广类内容可以低成本加入交互；但该 Skill 模板有限，深度定制仍要靠反复对话和换模型调整。
- 参考：有公众号运营的团队可考虑挑一篇活动推文试跑全流程，记录自产耗时；值得对比外部 SVG 制作团队的报价，判断这类交互内容自产是否划算。
- 依据：判断基于作者本人实测的完整操作流程，演示效果挂在作者公众号文末，属个人实测口径，暂无第三方验证；模板与产物数量以作者描述为准。
以前做公众号 SVG 动画得懂代码、会跳兼容坑，现在作者用 WorkBuddy 搓了个 Skill：把文章丢进去，产出预览和导入助手两个文件，再在浏览器 Console 粘贴一段注入代码，动画就实时显示在后台编辑器里。
说到SVG动画，老一辈的微信公众号运营人都不陌生。就是一篇公众号文章打开来，它里面是有可以互动，或者呈现动画展示内容效果的，并非正常显示阅读的文章内容。
这种展示和交互形式在早些年还是挺火的，也因此诞生了很多SVG排版编辑器和创作者团队，比较知名的有JZCreative的计育韬老师团队。其它商用编辑器就不点名，避免广告扯皮之争。
应该说，以前要做这样的公众号文章SVG动画，门槛还是有的，得懂代码，还得会跳各种兼容坑。老马之前稍微了解过一下，但没有深入。只是最近一段时间看到群里的小耳老师在分享自己制作的作品。
突然发现一个问题就是，有了大模型和Agent的协助，制作或者复刻一个SVG的动画，已经变得不再是一件很难的事情，小白都能轻松上手。当然，也不是说简单到一句话就能生成的地步。
为什么搓了这么一个Skill
正好前几天腾讯Hy4模型发布，这段时间还处于限时免费使用阶段。老马就用AI艺术家小耳老师的一篇文章，加上跟WorkBuddy的多轮对话调整，最终搓了一个可以直接生成微信公众号SVG动画文章的Skill。
只要装上这个Skill，你就可以把一篇文章丢给WorkBuddy，让它生成完整的SVG动画内容。然后再通过微信公众号平台的后台编辑器，导入进去，保存预览没问题，就可以发布了。
下面老马将实际演示操作的每一步，为了方便大家下载安装Skill，这次Skill的安装包也没有上传到github了，而是上传到腾讯云的Edgeone，所以国内下载安装也不是啥问题了。
装好Skill，把文章丢进去
首先打开WorkBuddy，最好新建个工作文件夹设置成工作空间吧，因为等下要生成的产物还是不少的。接着把下面的提示词直接发送过去即可，模型就选择Hy4，反正现在有免费额度使用：
安装这个skill：dl.97444.cn/wechat-svg-motion.zip
安装完Skill后，你可以上传准备好的文章文档，比如Word文档之类的，或者直接粘贴一大段文字内容也行。老马为了省事，就拿之前发布过一篇公众号文章链接发过去，加上提示词把这篇文章做成公众号SVG动画：
等产物生成，先看预览效果
制作的过程还是需要一段时间的，所以请耐心等待，Hy模型其实有一点不大好的就是速度慢了点。制作完毕后，大概会有7个产物文件。你就先看其中一个叫预览.html的，这个是全部展示最终的效果：
确认最终的效果里面，没有什么错别字，或者动画效果和设计风格不需要调整了，你就打开第二个叫导入助手.html的文件。其它产物文件可以不看，免得你搞混了：
导入助手.html文件中的内容，是教你怎样把SVG动画的内容导入到微信公众号后台编辑器中的。这里提供了四种方式，老马是建议大家使用第二种方式，相对好理解操作一点，下面老马就演示第二种方式。
打开检查，切到Console
第二种方式首先第一步，你已经在微信公众号后台中，新建了一篇图文了，也填写好了标题和作者。在下面空白输入内容的区域，确认光标已经处于输入的状态。然后你就在这里鼠标右键一下，点击检查：
此时你的电脑浏览器底部会弹出一个窗口，也有可能是在浏览器的右侧弹出来。右侧弹出来的稍微小一些，你可以拉伸拉大一点。然后在顶部的一行菜单中，点击切换到Console：
切换到Console后，你会发现最后一行是一个>的符号，你鼠标移动上去点一下，你会发现这里是可以输入内容的。那你就输入 allow pasting 按回车键即可，一定要手动输入别粘贴。这次输入只需要操作一次的，后续就不需要了：
复制注入代码，粘贴回车
接着回到刚才我们的导入助手.html页面中，往下滑动，找到 ② 复制注入代码（Console / Snippets 通用）这个按钮。点击这个按钮，复制一下注入代码：
然后在刚才输完 allow pasting的下面一行，粘贴上再敲键盘回车：
最后你就会在微信公众号的后台编辑器中，看到实时显示出来的SVG动画界面效果了。老马把效果演示放到了文末，你看到最后去滑动就行了。
有可能等你看完本文，再去看演示效果已经播放完整了。不过没关系，你可以重新打开本文，快速滑到底部，再去看展开播放的效果，就清楚了。
先预览再发布，不满意就接着改
保存一下公众号文章后，建议是先预览一下，发送到手机微信上看看显示的效果怎样，确实没问题了，再去加上封面图什么的发布出去。
还有就是，老马这个Skill目前只8个配色，9个场景和5个动效，可能最终呈现的动画效果并不是你自己想要的。没有关系，Skill不是死的，SVG动画也不是死的。
你可以进一步跟WorkBuddy沟通，或者给它一些参考的设计资料，其它的SVG动画公众号文章啥的。让它根据你给的上下文材料去修改完善，如果Hy4模型改了很久还是效果不好，那你就换一个别的模型试试。
作者：马佳彬 公众号：马佳彬
本文由 @马佳彬 原创发布于人人都是产品经理。未经作者许可，禁止转载
题图来自 Unsplash，基于CC0协议
来源：人人都是产品经理 · woshipm.com