我做了個(gè) Skill：讓 AI 幫你生成 Logo 和圖標(biāo)

前幾天想給 CodePilot 設(shè)計(jì)個(gè)新 Logo。

就跟 Gemini 聊了聊，讓它生成一些 SVG 格式的 Logo。

結(jié)果出乎意料——生成的幾個(gè)變體都很干凈、規(guī)整，幾何感很強(qiáng)。

我把這些 Logo 發(fā)到推上，熱度還挺高。

后來我又試著把這些 Logo 做成那種高級(jí)的展示圖，配上專業(yè)的背景，效果很驚艷。

發(fā)出去以后，發(fā)現(xiàn)很多朋友都有類似的需求：

自己做了個(gè)小工具或開源項(xiàng)目，需要個(gè)圖標(biāo)或 Logo。

但讓 AI 畫圖總是畫不好——要么細(xì)節(jié)不對(duì)，要么文字必錯(cuò)，要么就是太隨機(jī)。

找設(shè)計(jì)師吧，又覺得"不值得"，畢竟只是個(gè)小項(xiàng)目。

最后只能用個(gè)丑陋的字母縮寫，或者隨便找個(gè) icon 湊合。

其實(shí)大家的需求很簡(jiǎn)單：不需要多獨(dú)特，只要干凈、規(guī)整、稍微好看點(diǎn)就行。

所以我就想，能不能把這個(gè)流程做成一個(gè) Skill，讓每個(gè)人都能快速生成"夠用的好 Logo"？

Skill 核心能力：三步生成 Logo 和高級(jí)展示圖

推薦在 Gemini CLI 或者其他用 Gemini 驅(qū)動(dòng)的 Agent 里面用，Gemini 的 SVG 生成能力還是很強(qiáng)的。

當(dāng)然，你在 Claude Code 里也可以。

這個(gè) Logo Generator Skill 的核心邏輯就三步。

第一步：信息收集

Skill 會(huì)問你幾個(gè)簡(jiǎn)單的問題：

產(chǎn)品名稱是什么？

屬于什么行業(yè)或類別？（比如 AI、金融科技、設(shè)計(jì)工具）

核心概念是什么？（比如連接、流動(dòng)、安全、簡(jiǎn)潔）

有什么設(shè)計(jì)偏好？（比如極簡(jiǎn)/復(fù)雜、冷色/暖色、專業(yè)/友好）

當(dāng)然你也可以直接把你的項(xiàng)目介紹發(fā)給 AI。

好的設(shè)計(jì)來自理解，而不是隨機(jī)生成。

第二步：生成 6+ 設(shè)計(jì)變體

基于你提供的信息，Skill 會(huì)自動(dòng)匹配設(shè)計(jì)模式庫，生成至少 6 個(gè)不同風(fēng)格的 SVG Logo。

比如這里我把 Pi 這個(gè)開源項(xiàng)目的介紹發(fā)給他，他就給了六個(gè)選項(xiàng)：

1.

核心 Pi：希臘字母 π 的現(xiàn)代抽象化設(shè)計(jì)，由三條核心筆畫構(gòu)成。

2.

二進(jìn)制指令：利用圓角矩形點(diǎn)陣表現(xiàn)擴(kuò)展系統(tǒng)的模塊化特性。

3.

流動(dòng)智能：粗細(xì)不一的平行線代表代碼和數(shù)據(jù)在終端中的持續(xù)流動(dòng)。

4.

系統(tǒng)原點(diǎn)：幾何六邊形核心代表引擎高效、結(jié)構(gòu)化的基礎(chǔ)。

5.

語法殼：使用粗體括號(hào)將"支架"表現(xiàn)為一種保護(hù)殼。下劃線光標(biāo)代表工具的 CLI 屬性。

6.

膠囊支架：對(duì)項(xiàng)目中支架概念的進(jìn)階詮釋。

每個(gè)變體都會(huì)生成一個(gè)交互式網(wǎng)頁，你可以在瀏覽器里對(duì)比查看，選擇最喜歡的。

由于 AI 的特性，生成的作品一定會(huì)有好的也有差的。

如果你覺得這 6 個(gè)里邊有哪個(gè)不喜歡，或者覺得比較丑，你可以跟它說"換一個(gè)"。

它就會(huì)找其他可以套用的設(shè)計(jì)模式幫你替換。

你要是有具體的指導(dǎo)意見也可以提供給它，它也會(huì)幫你修改。

第三步：高級(jí)展示圖

選好 Logo 之后，Skill 會(huì)幫你生成專業(yè)的展示圖。這一步提供兩種方案：

方案 1：Nano Banana 圖片生成（12 種專業(yè)背景）

用 Nano Banana（Gemini 的圖片生成能力）生成高質(zhì)量的靜態(tài)展示圖，提供 12 種專業(yè)背景風(fēng)格：

暗色系（6 種）：

The Void（絕對(duì)虛空）：純黑 + 銀色微噪點(diǎn)，硬核科技感

Frosted Horizon（磨砂穹頂）：鈦灰色 + 有機(jī)紋理，高端產(chǎn)品感

Fluid Abyss（流體深淵）：深紫/深藍(lán) + 流體融合，AI 原生感

Studio Spotlight（物理影棚）：碳灰色 + 編輯級(jí)打光，雜志質(zhì)感

Analog Liquid（物理流體）：純色底（橙/藍(lán)/綠）+ 金屬光澤，創(chuàng)意品牌感

LED Matrix（數(shù)字硬件）：發(fā)光點(diǎn)陣 + 數(shù)字復(fù)古，賽博朋克感

亮色系（6 種）：

Editorial Paper（紙本編輯）：米白色 + 紙張紋理，人文品牌感

Iridescent Frost（幻彩透砂）：銀灰色 + 全息暗示，科技硬件感

Morning Aura（晨霧光域）：暖象牙色 + 柔和色彩，親和 AI 感

Clinical Studio（無菌影棚）：純白 + 幾何陰影，算法驅(qū)動(dòng)感

UI Container（容器化界面）：磨砂玻璃容器，SaaS 平臺(tái)感

Swiss Flat（瑞士扁平）：絕對(duì)扁平 + 純色塊，永恒權(quán)威感

每種風(fēng)格都有特定的視覺特征和適用場(chǎng)景。

比如做 AI 產(chǎn)品，可以選 Fluid Abyss 或 Morning Aura；

做硬件產(chǎn)品，可以選 Iridescent Frost 或 LED Matrix。

注意這里需要填寫你的 AI Studio 的 API 才行，但是也支持三方的 Nano Banana API。

方案 2：WebGL 動(dòng)態(tài)背景（6 種交互式背景）

用 WebGL Shader 生成的動(dòng)態(tài)背景，可以隨意縮放、支持鼠標(biāo)交互，非常適合放在官網(wǎng)首頁或產(chǎn)品頁：

6 種動(dòng)態(tài)風(fēng)格：

LED Matrix（LED 矩陣）：90×90 高密度 LED 網(wǎng)格 + 流動(dòng)波浪動(dòng)畫，自適應(yīng)主題色

Fluid Warping（流體扭曲）：域扭曲 + 分形布朗運(yùn)動(dòng)（FBM），3 色漸變混合 + 鼠標(biāo)交互

Fabric Wave（織物波浪）：絲綢般起伏 + 交叉波紋，深灰底色 + 微光閃爍

Off-Center Ripple（角落漣漪）：雙漣漪從對(duì)角發(fā)散 + 指數(shù)衰減，中灰底色

Holographic Dispersion（全息色散）：虹彩流體 + RGB 色差，深鈦灰底 + 棱鏡般色彩分離

Spiral Vortex（螺旋漩渦）：旋轉(zhuǎn)螺旋 + 角動(dòng)量，淺灰底色 + 色帶

WebGL 背景的優(yōu)勢(shì)：

動(dòng)態(tài)交互：鼠標(biāo)移動(dòng)時(shí)背景會(huì)實(shí)時(shí)響應(yīng)，漣漪、扭曲、流動(dòng)效果

無限縮放：基于代碼生成，放大縮小都不失真

性能優(yōu)化：60 FPS 流暢運(yùn)行，自動(dòng)適配設(shè)備像素比

直接可用：生成的是 HTML 代碼，可以直接嵌入網(wǎng)頁

你可以把這些放在官網(wǎng)首頁，PPT 或動(dòng)態(tài)背景都可以用。

同一個(gè) Logo，在不同背景下的感覺完全不同。

靜態(tài)圖片適合社交媒體、文檔、海報(bào)；

動(dòng)態(tài)背景適合網(wǎng)頁、演示、交互場(chǎng)景。

最終交付物：完成這三步之后，你會(huì)得到一個(gè)完整的設(shè)計(jì)資產(chǎn)包：

SVG 文件：可編輯的矢量格式

PNG 導(dǎo)出：多種尺寸（1024x1024、2048x2048 等）

展示圖：4 種專業(yè)背景風(fēng)格

交互式網(wǎng)頁：可以隨時(shí)查看和對(duì)比所有變體

為什么不直接讓 AI 畫 Logo？

大家看到了我是先讓 Gemini 生成 SVG ，再生成展示圖"。

而不是直接讓 Nano Banana 一步到位生成 Logo 圖片。

簡(jiǎn)單聊一下為什么這么做。

圖片模型生成 Logo 的局限性：

1.

控制精度差：你想要一個(gè)圓角半徑 8px 的圓角矩形？AI 畫圖很難精準(zhǔn)控制這些參數(shù)。

2.

無法編輯：生成的是位圖，想調(diào)整顏色、改個(gè)形狀、調(diào)整間距？只能重新生成，碰運(yùn)氣。

3.

不是矢量：放大就糊，做不了響應(yīng)式設(shè)計(jì)，也沒法用在不同尺寸的場(chǎng)景。

SVG 有非常多的優(yōu)勢(shì)。

SVG 是代碼，可以直接復(fù)制到 Figma 這些專業(yè)設(shè)計(jì)軟件里，進(jìn)行精細(xì)化調(diào)整。

可以做成設(shè)計(jì)體系，可以做動(dòng)效，可以變成 loading 動(dòng)畫。

可以用在不同場(chǎng)景（網(wǎng)站、App、文檔）。

矢量無損，放大縮小都不失真，適配各種分辨率。

比如這里，我用 Gemini 生成的 CodePilot Logo SVG，導(dǎo)入 Figma 后：

加了漸變色（從單色變成漸變）、加了內(nèi)陰影和外發(fā)光、調(diào)整了點(diǎn)陣數(shù)量和大小

最終的 Logo 比原始 SVG 精致很多，但基礎(chǔ)幾何結(jié)構(gòu)是 AI 生成的。

這就是"AI 生成基礎(chǔ)，人工精修細(xì)節(jié)"的工作流。

所以這個(gè) Skill 的設(shè)計(jì)思路是：用 AI 生成可編輯的 SVG 基礎(chǔ)，再用 AI 生成高級(jí)的展示圖。

兩步結(jié)合，既保證了可控性，又有專業(yè)的視覺效果。

使用場(chǎng)景拓展：不只是 Logo

這個(gè) Skill 的使用場(chǎng)景其實(shí)挺廣的：

快速生成 Vibecoding 項(xiàng)目圖標(biāo)，不需要獨(dú)特性，但要專業(yè)、干凈。

創(chuàng)業(yè)團(tuán)隊(duì)早期品牌：預(yù)算有限，但需要視覺資產(chǎn)。

可以先用 Skill 生成，后期再找設(shè)計(jì)師優(yōu)化。

設(shè)計(jì)師的輔助工具：

快速生成多個(gè)方案給客戶選擇，或者作為靈感來源。

12 種背景風(fēng)格不只能用來展示 Logo，還可以：

用在網(wǎng)頁設(shè)計(jì)的背景

截圖做 PPT 背景

展示其他產(chǎn)品截圖（比如 App 界面、網(wǎng)站首頁）

開源 + 安裝方式

這個(gè) Skill 是完全開源的。

GitHub 地址：https://github.com/op7418/logo-generator-skill

安裝方式：

告訴你的 AI 助手： "幫我安裝 logo-generator skill，地址是：

https://github.com/op7418/logo-generator-skill.git"

結(jié)尾

這個(gè) Skill 的價(jià)值，是降低設(shè)計(jì)門檻，讓每個(gè)開發(fā)者都能快速獲得"夠用的好 Logo"。

它不是要替代專業(yè)設(shè)計(jì)師。

設(shè)計(jì)師做的是"獨(dú)特性"和"品牌故事"，而 Skill 做的是"快速可用"。

就像 Canva 沒有替代設(shè)計(jì)師，而是讓更多人能做出"夠用的海報(bào)"一樣。

工具應(yīng)該是開放的，讓更多人能用上 AI 的設(shè)計(jì)能力。

歡迎試用、反饋和貢獻(xiàn)，覺得有幫助可以幫我點(diǎn)個(gè)贊，或者轉(zhuǎn)發(fā)給需要的朋友。