公众号 SVG 一键生成：我做了个 Coze Skill，免费用

我用刚更新的扣子2.0做了个公众号 SVG 生成器，显摆一下：先敲个金蛋

点击砸蛋 好运等你来 大奖 iPhone 15 优惠券 满100减50 谢谢参与 再接再厉 优惠券 满200减80 大奖 MacBook Pro 谢谢参与 好运在后头 谢谢参与 继续努力 优惠券 满50减20 大奖 iPad Pro

通过这个 SVG 生成器，还可以做出更多的不同创意效果：刮刮卡、翻页卡片、点击揭秘、进度条动画....

甚至做类似这样，实现各种花式交互，比如视错觉3D（这个svg，能上下左右滑动，3D视觉）

大模型不认识文字

它把每个词都变成数字

每个词都有个专属的数字编码

这样它才能计算和理解

任意滑动，查看各词向量

所有词都有数字编号

这编号代表着词的意思

意思差不多的那些词

它们的编号也会更接近

词语被转换成数字代码

这种代码叫作词向量

向量之间距离的远近

表示了词语意思相关度

或者是这种，给大家带点喜庆（随便选下面的一给词，其他内容会发生改变）

方法我直接封装成了扣子的 Skill，甚至还是免费的，非常良心

https://www.coze.cn/?skills=7596602750406787124 怎么用

具体来说，三步搞定：描述需求、下载文件、粘贴进公众号

第一步：打开 Skill，描述你想要的效果

先访问技能商店，搜索并找到 公众号 SVG 生成器 这个 Skill

当然，也可以直接访问链接：https://www.coze.cn/?skills=7596602750406787124，就能看到这个了

对于这个 Skill，点击使用，会进入需求描述界面，输入需求就好，比如「帮我做一个砸金蛋的互动，9个金蛋，点击任意一个就碎掉露出奖品」

和扣子对话，描述需求第二步：下载生成的 HTML 文件

扣子会生成一个 HTML 预览页，里面包含了完整的 SVG 代码

下载HTML预览页第三步：用浏览器打开，复制，粘贴到公众号

用 Chrome 或 Safari 打开这个 HTML 文件，页面上有个「复制 SVG」按钮

点一下，打开公众号后台的文章编辑器，直接 Ctrl+V 粘贴

SVG 就会渲染出来，可以直接预览和发布

复制粘贴到公众号后台

如果效果不满意，继续和扣子对话调整，比如让他「金蛋变红包」「奖品全部改成谢谢参与」，它会重新生成

能生成什么

点击交互类
砸金蛋、刮刮卡、点击消失/出现、翻页效果

动画类
进度条、光标闪烁、脉冲效果、循环动画

布局模板
Mac 终端风格、卡片式布局、深色/浅色主题

图片处理
支持微信图床图片，自动处理圆角（用 pattern 方式，不会溢出）

营销活动页、互动小游戏、抽奖转盘、信息卡片、教程引导....基本上公众号里能见到的交互式 SVG 效果，都能生成

为什么要做这个 Skill

公众号 SVG 这个东西，看起来很酷，但真正做过的人都知道有多折腾

微信对 SVG 的限制极其严格

简而言之，是两个不支持：这也不支持，那也不支持

• • 不支持 JavaScript，一行 JS 都不能有

• • 不支持 CSS 动画，@keyframes 和 transition 全部失效

• • 不支持 id.click 引用触发

• • 不支持 pointer-events:none 穿透点击

• • 时间延迟动画在移动端不可靠

• • clipPath 裁剪图片会溢出圆角

• • ....

更恶心的事...这些限制官方没有文档，全靠自己踩坑

比如点击触发动画，正常 SVG 写法是用begin="id.click"来触发，但微信不支持，得用begin="mousedown"直接写在元素上

再比如图片圆角，正常做法是用 clipPath 裁剪，但微信里图片会溢出圆角。得用 pattern 填充的方式，先定义 pattern 把图片放进去，再填充圆角矩形

这些细节，全靠一遍遍踩坑

我把这些经验整理成了一份文档，自己用的时候效果很好，生成的 SVG 基本都能在微信里正常跑

把经验做成 Skill

和扣子团队认识两年有余了，相互比较熟（第一次认识的时候，我们还是用邮件交流的，英文对话，互装老外）

这次扣子2.0，做了一轮大的品牌升级，定位「职场 AI，就用扣子」，整个产品线重新梳理了一遍

主产品扣子这边，核心强调四件事：复杂问题陪你拆解、工作产物直接交付、主动思考主动干活、职场前辈一键召唤

扣子编程也做更鲜明的品牌定位

另外还有个「计划」功能，可以设定长期目标，扣子会自动拆解任务、主动推进、定期汇报。比如「帮我运营一个10万粉的账号」，它会自己规划执行，回来跟你对齐。这个改天单独聊

扣子编程那边也做了升级，前后端全栈开发、零门槛一键部署，从想法到上线的链路打通了

说回 Skill，这东西的逻辑是：把专业经验打包成可复用的能力，别人直接调用

对于 Skill 更细致的教程与描述，可以看之前的那篇（一泽写的）
《Agent Skills 终极指南：入门、精通、预测》

然后，我就整理了一份有关微信 SVG 交互内容实践的 know-how，包括限制清单、最佳实践、代码模板，都塞进了一个 Skill，然后发布到了扣子上

这样，大家就不用从头踩坑，去挨个了解微信的各种奇怪限制，直接对着 AI 说「我要一个砸金蛋的效果」，Skill 会按照正确的方式生成 SVG，并且能够粘贴到公众号上

新人不用重新踩坑，这就是 Skill 的价值

你也可以发布 Skill

Skill 的逻辑：把你在某个领域的方法论打包，别人一键调用

投放素材审核的 SOP、财务报表分析框架、简历筛选标准、需求文档模板....这些以前只能存在脑子里或者写成内部文档的东西，现在可以做成 Skill，让 AI 带着你的经验去执行

你的经验，可能别人也需要

而创建 Skill，流程也并不复杂，大概四步：

第一步：整理你的方法论

把你在某个领域的经验、SOP、判断标准写清楚，就像教新人一样

第二步：在扣子里创建 Skill

登录扣子空间 space.coze.cn，找到创建 Skill 的入口，把方法论填进去，可以加一些示例

第三步：测试和调整

自己先用几次，看看生成结果符不符合预期，不满意就调整描述

第四步：发布到技能商店

测试没问题就可以发布，其他人就能在商店里找到并使用

创建Skill的流程，banana 还是太好用了 最后

最后「公众号 SVG 生成器」地址在这：
https://www.coze.cn/?skills=7596602750406787124

欢迎使用，免费的，很良心