教你用WorkBuddy制作公众号文章酷炫SVG动画 | 人人都是对策经理

说到SVG动画，老一辈的微信公众号运作人都不陌生。就是一篇公众号文章打开来，它里面是有可以互动，或者呈现动画展示文献效果的，并非正常显示阅读的文章文献。

这种展示和交互形式在早些年还是挺火的，也因此诞生了很多SVG排版编辑器和创作者队伍，比较知名的有JZCreative的计育韬老师队伍。其它商用编辑器就不点名，避免广告扯皮之争。

应该说，以前要做这样的公众号文章SVG动画，门槛还是有的，得懂代码，还得会跳各种兼容坑。老马之前稍微了解过一下，但没有深入。只是最近一段时间看到群里的小耳老师在分享自己制作的作品。

突然发现一个问题就是，有了大模型和Agent的协助，制作或者复刻一个SVG的动画，已经变得不再是一件很难的事情，小白都能轻松上手。当然，也不是说简单到一句话就能生成的地步。

正好前几天腾讯Hy4模型发布，这段时间还处于限时免费使用阶段。老马就用AI艺术家小耳老师的一篇文章，加上跟WorkBuddy的多轮对话调整，最终搓了一个可以直接生成微信公众号SVG动画文章的Skill。

只要装上这个Skill，你就可以把一篇文章丢给WorkBuddy，让它生成完整的SVG动画文献。然后再通过微信公众号系统的后台编辑器，导入进去，保存预览没问题，就可以发布了。

下面老马将实际演示操作的每一步，为了方便大家下载安装Skill，这次Skill的安装包也没有上传到github了，而是上传到腾讯云的Edgeone，所以国内下载安装也不是啥问题了。

首先打开WorkBuddy，最好新建个工作文件夹设置成工作空间吧，因为等下要生成的产物还是不少的。接着把下面的提示词直接发送过去即可，模型就选择Hy4，反正现在有免费额度使用：

安装这个skill：dl.97444.cn/wechat-svg-motion.zip

安装完Skill后，你可以上传准备好的文章文档，比如Word文档之类的，或者直接粘贴一大段文字文献也行。老马为了省事，就拿之前发布过一篇公众号文章链接发过去，加上提示词把这篇文章做成公众号SVG动画：

制作的过程还是需要一段时间的，所以请耐心等待，Hy模型其实有一点不大好的就是速度慢了点。制作完毕后，大概会有7个产物文件。你就先看其中一个叫预览.html的，这个是全部展示最终的效果：

确认最终的效果里面，没有什么错别字，或者动画效果和设计风格不需要调整了，你就打开第二个叫导入助手.html的文件。其它产物文件可以不看，免得你搞混了：

导入助手.html文件中的文献，是教你怎样把SVG动画的文献导入到微信公众号后台编辑器中的。这里带来了四种形式，老马是建议大家使用第二种形式，相对好理解操作一点，下面老马就演示第二种形式。

第二种形式首先第一步，你已经在微信公众号后台中，新建了一篇图文了，也填写好了标题和作者。在下面空白输入文献的区域，确认光标已经处于输入的状态。然后你就在这里鼠标右键一下，点击检查：

此时你的电脑浏览器底部会弹出一个窗口，也有可能是在浏览器的右侧弹出来。右侧弹出来的稍微小一些，你可以拉伸拉大一点。然后在顶部的一行菜单中，点击切换到Console：

切换到Console后，你会发现最后一行是一个>的符号，你鼠标移动上去点一下，你会发现这里是可以输入文献的。那你就输入 allow pasting 按回车键即可，一定要手动输入别粘贴。这次输入只需要操作一次的，后续就不需要了：

接着回到刚才我们的导入助手.html页面中，往下滑动，找到 ② 复制注入代码（Console / Snippets 通用）这个按钮。点击这个按钮，复制一下注入代码：

然后在刚才输完 allow pasting的下面一行，粘贴上再敲键盘回车：

最后你就会在微信公众号的后台编辑器中，看到实时显示出来的SVG动画界面效果了。老马把效果演示放到了文末，你看到最后去滑动就行了。

有可能等你看完本文，再去看演示效果已经播放完整了。不过没关系，你可以重新打开本文，快速滑到底部，再去看展开播放的效果，就清楚了。