我用剛更新的扣子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
歡迎使用,免費的,很良心
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.