我用剛更新的扣子2.0做了個公眾號 SVG 生成器，顯擺一下：先敲個金蛋

點擊砸蛋 好運等你來 大獎 iPhone 15 優(yōu)惠券 滿100減50 謝謝參與 再接再厲 優(yōu)惠券 滿200減80 大獎 MacBook Pro 謝謝參與 好運在后頭 謝謝參與 繼續(xù)努力 優(yōu)惠券 滿50減20 大獎 iPad Pro

通過這個 SVG 生成器，還可以做出更多的不同創(chuàng)意效果：刮刮卡、翻頁卡片、點擊揭秘、進(jìn)度條動畫....

甚至做類似這樣，實現(xiàn)各種花式交互，比如視錯覺3D（這個svg，能上下左右滑動，3D視覺）

大模型不認(rèn)識文字

它把每個詞都變成數(shù)字

每個詞都有個專屬的數(shù)字編碼

這樣它才能計算和理解

任意滑動，查看各詞向量

所有詞都有數(shù)字編號

這編號代表著詞的意思

意思差不多的那些詞

它們的編號也會更接近

詞語被轉(zhuǎn)換成數(shù)字代碼

這種代碼叫作詞向量

向量之間距離的遠(yuǎn)近

表示了詞語意思相關(guān)度

或者是這種，給大家?guī)c喜慶（隨便選下面的一給詞，其他內(nèi)容會發(fā)生改變）

方法我直接封裝成了扣子的 Skill，甚至還是免費的，非常良心

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

具體來說，三步搞定：描述需求、下載文件、粘貼進(jìn)公眾號

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

先訪問技能商店，搜索并找到 公眾號 SVG 生成器 這個 Skill

當(dāng)然，也可以直接訪問鏈接：https://www.coze.cn/?skills=7596602750406787124，就能看到這個了

對于這個 Skill，點擊使用，會進(jìn)入需求描述界面，輸入需求就好，比如「幫我做一個砸金蛋的互動，9個金蛋，點擊任意一個就碎掉露出獎品」

和扣子對話，描述需求第二步：下載生成的 HTML 文件

扣子會生成一個 HTML 預(yù)覽頁，里面包含了完整的 SVG 代碼

下載HTML預(yù)覽頁第三步：用瀏覽器打開，復(fù)制，粘貼到公眾號

用 Chrome 或 Safari 打開這個 HTML 文件，頁面上有個「復(fù)制 SVG」按鈕

點一下，打開公眾號后臺的文章編輯器，直接 Ctrl+V 粘貼

SVG 就會渲染出來，可以直接預(yù)覽和發(fā)布

復(fù)制粘貼到公眾號后臺

如果效果不滿意，繼續(xù)和扣子對話調(diào)整，比如讓他「金蛋變紅包」「獎品全部改成謝謝參與」，它會重新生成

能生成什么

點擊交互類
砸金蛋、刮刮卡、點擊消失/出現(xiàn)、翻頁效果

動畫類
進(jìn)度條、光標(biāo)閃爍、脈沖效果、循環(huán)動畫

布局模板
Mac 終端風(fēng)格、卡片式布局、深色/淺色主題

圖片處理
支持微信圖床圖片，自動處理圓角（用 pattern 方式，不會溢出）

營銷活動頁、互動小游戲、抽獎轉(zhuǎn)盤、信息卡片、教程引導(dǎo)....基本上公眾號里能見到的交互式 SVG 效果，都能生成

為什么要做這個 Skill

公眾號 SVG 這個東西，看起來很酷，但真正做過的人都知道有多折騰

微信對 SVG 的限制極其嚴(yán)格

簡而言之，是兩個不支持：這也不支持，那也不支持

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

• ? 不支持 CSS 動畫，@keyframes 和 transition 全部失效

• ? 不支持 id.click 引用觸發(fā)

• ? 不支持 pointer-events:none 穿透點擊

• ? 時間延遲動畫在移動端不可靠

• ? clipPath 裁剪圖片會溢出圓角

• ? ....

更惡心的事...這些限制官方?jīng)]有文檔，全靠自己踩坑

比如點擊觸發(fā)動畫，正常 SVG 寫法是用begin="id.click"來觸發(fā)，但微信不支持，得用begin="mousedown"直接寫在元素上

再比如圖片圓角，正常做法是用 clipPath 裁剪，但微信里圖片會溢出圓角。得用 pattern 填充的方式，先定義 pattern 把圖片放進(jìn)去，再填充圓角矩形

這些細(xì)節(jié)，全靠一遍遍踩坑

我把這些經(jīng)驗整理成了一份文檔，自己用的時候效果很好，生成的 SVG 基本都能在微信里正常跑

把經(jīng)驗做成 Skill

和扣子團(tuán)隊認(rèn)識兩年有余了，相互比較熟（第一次認(rèn)識的時候，我們還是用郵件交流的，英文對話，互裝老外）

這次扣子2.0，做了一輪大的品牌升級，定位「職場 AI，就用扣子」，整個產(chǎn)品線重新梳理了一遍

主產(chǎn)品扣子這邊，核心強(qiáng)調(diào)四件事：復(fù)雜問題陪你拆解、工作產(chǎn)物直接交付、主動思考主動干活、職場前輩一鍵召喚

扣子編程也做更鮮明的品牌定位

另外還有個「計劃」功能，可以設(shè)定長期目標(biāo)，扣子會自動拆解任務(wù)、主動推進(jìn)、定期匯報。比如「幫我運營一個10萬粉的賬號」，它會自己規(guī)劃執(zhí)行，回來跟你對齊。這個改天單獨聊

扣子編程那邊也做了升級，前后端全棧開發(fā)、零門檻一鍵部署，從想法到上線的鏈路打通了

說回 Skill，這東西的邏輯是：把專業(yè)經(jīng)驗打包成可復(fù)用的能力，別人直接調(diào)用

對于 Skill 更細(xì)致的教程與描述，可以看之前的那篇（一澤寫的）
《Agent Skills 終極指南：入門、精通、預(yù)測》

然后，我就整理了一份有關(guān)微信 SVG 交互內(nèi)容實踐的 know-how，包括限制清單、最佳實踐、代碼模板，都塞進(jìn)了一個 Skill，然后發(fā)布到了扣子上

這樣，大家就不用從頭踩坑，去挨個了解微信的各種奇怪限制，直接對著 AI 說「我要一個砸金蛋的效果」，Skill 會按照正確的方式生成 SVG，并且能夠粘貼到公眾號上

新人不用重新踩坑，這就是 Skill 的價值

你也可以發(fā)布 Skill

Skill 的邏輯：把你在某個領(lǐng)域的方法論打包，別人一鍵調(diào)用

投放素材審核的 SOP、財務(wù)報表分析框架、簡歷篩選標(biāo)準(zhǔn)、需求文檔模板....這些以前只能存在腦子里或者寫成內(nèi)部文檔的東西，現(xiàn)在可以做成 Skill，讓 AI 帶著你的經(jīng)驗去執(zhí)行

你的經(jīng)驗，可能別人也需要

而創(chuàng)建 Skill，流程也并不復(fù)雜，大概四步：

第一步：整理你的方法論

把你在某個領(lǐng)域的經(jīng)驗、SOP、判斷標(biāo)準(zhǔn)寫清楚，就像教新人一樣

第二步：在扣子里創(chuàng)建 Skill

登錄扣子空間 space.coze.cn，找到創(chuàng)建 Skill 的入口，把方法論填進(jìn)去，可以加一些示例

第三步：測試和調(diào)整

自己先用幾次，看看生成結(jié)果符不符合預(yù)期，不滿意就調(diào)整描述

第四步：發(fā)布到技能商店

測試沒問題就可以發(fā)布，其他人就能在商店里找到并使用

創(chuàng)建Skill的流程，banana 還是太好用了 最后

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

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