公眾號(hào) SVG 一鍵生成：我做了個(gè) Coze Skill，免費(fèi)用

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

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

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

甚至做類(lèi)似這樣，實(shí)現(xiàn)各種花式交互，比如視錯(cuò)覺(jué)3D（這個(gè)svg，能上下左右滑動(dòng)，3D視覺(jué)）

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

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

每個(gè)詞都有個(gè)專(zhuān)屬的數(shù)字編碼

這樣它才能計(jì)算和理解

任意滑動(dòng)，查看各詞向量

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

這編號(hào)代表著詞的意思

意思差不多的那些詞

它們的編號(hào)也會(huì)更接近

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

這種代碼叫作詞向量

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

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

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

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

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

具體來(lái)說(shuō)，三步搞定：描述需求、下載文件、粘貼進(jìn)公眾號(hào)

第一步：打開(kāi) Skill，描述你想要的效果

先訪問(wèn)技能商店，搜索并找到 公眾號(hào) SVG 生成器 這個(gè) Skill

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

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

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

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

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

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

點(diǎn)一下，打開(kāi)公眾號(hào)后臺(tái)的文章編輯器，直接 Ctrl+V 粘貼

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

復(fù)制粘貼到公眾號(hào)后臺(tái)

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

能生成什么

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

動(dòng)畫(huà)類(lèi)
進(jìn)度條、光標(biāo)閃爍、脈沖效果、循環(huán)動(dòng)畫(huà)

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

圖片處理
支持微信圖床圖片，自動(dòng)處理圓角（用 pattern 方式，不會(huì)溢出）

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

為什么要做這個(gè) Skill

公眾號(hào) SVG 這個(gè)東西，看起來(lái)很酷，但真正做過(guò)的人都知道有多折騰

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

簡(jiǎn)而言之，是兩個(gè)不支持：這也不支持，那也不支持

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

• ? 不支持 CSS 動(dòng)畫(huà)，@keyframes 和 transition 全部失效

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

• ? 不支持 pointer-events:none 穿透點(diǎn)擊

• ? 時(shí)間延遲動(dòng)畫(huà)在移動(dòng)端不可靠

• ? clipPath 裁剪圖片會(huì)溢出圓角

• ? ....

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

比如點(diǎn)擊觸發(fā)動(dòng)畫(huà)，正常 SVG 寫(xiě)法是用begin="id.click"來(lái)觸發(fā)，但微信不支持，得用begin="mousedown"直接寫(xiě)在元素上

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

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

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

把經(jīng)驗(yàn)做成 Skill

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

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

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

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

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

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

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

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

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

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

新人不用重新踩坑，這就是 Skill 的價(jià)值

你也可以發(fā)布 Skill

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

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

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

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

第一步：整理你的方法論

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

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

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

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

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

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

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

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

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

歡迎使用，免費(fèi)的，很良心