公眾號 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

歡迎使用，免費的，很良心