我做了個 Skill：讓 AI 幫你生成 Logo 和圖標
整理版優先睇
呢個 Skill 三步幫你生成可編輯 SVG Logo 再加專業展示圖，令業餘項目都有專業視覺。
作者 Op7418 本身係開發者，佢為自己個項目 CodePilot 設計 Logo 時，發現用 Gemini 生成 SVG 效果好好，幾何感強、乾淨規整。佢將成果放上 Twitter 反應熱烈，同時發現好多朋友都有類似需求：自己做咗小工具或開源項目，需要一個圖標或 Logo，但 AI 畫圖成日出錯（細節唔啱、文字必錯、太隨機），揾設計師又覺得唔值得，最後求其用字母縮寫。於是佢整咗個開源嘅 Logo Generator Skill，等每個人都可以快速得到「夠用嘅好 Logo」。
呢個 Skill 嘅核心流程分三步：第一步，收集產品名稱、行業、核心概念同設計偏好，因為「好的設計來自理解，而不是隨機生成」；第二步，基於設計模式庫生成至少 6 個不同風格嘅 SVG 變體，如果唔鍾意可以叫 AI「換一個」；第三步，生成高級展示圖，提供兩種方案——Nano Banana 靜態生成（12 種專業背景，分暗色系同亮色系）同 WebGL 動態背景（6 種交互式效果，可嵌入網頁）。完成後你會得到 SVG、PNG、展示圖同一個互動網頁。
作者特別解釋點解唔直接叫 AI 畫 Logo：因為圖片模型控制精度差、無法編輯、唔係向量，而 SVG 係代碼，可以複製到 Figma 精細調整，做到「AI 生成基礎，人工精修細節」。呢個 Skill 嘅價值係降低設計門檻，唔係取代專業設計師，而係令開發者快速獲得可用嘅視覺資產。佢已經開源咗個 Skill…
- 作者發現用 Gemini 生成 SVG Logo 效果好好，解決咗 AI 畫 Logo 細節差、無法編輯、唔係向量嘅問題。
- Skill 三步流程：收集資訊 → 生成 6+ SVG 變體 → 生成展示圖（靜態 12 種背景 + 動態 6 種 WebGL）。
- SVG 相比位圖有優勢：可編輯、向量無損、可導入設計軟件精修，做到「AI 生成基礎，人工精修細節」。
- 展示圖分兩種方案：Nano Banana 靜態生成（12 種專業風格）同 WebGL 動態背景（6 種交互式），適合唔同場景。
- 呢個 Skill 開源可用，唔單止 Logo，仲可以生成項目圖標、創業早期品牌視覺、設計師靈感工具。
Logo Generator Skill GitHub Repo
開源倉庫，包含安裝方式同完整程式碼
點解要整呢個 Skill？
作者 Op7418 想為自己嘅開源項目 CodePilot 設計新 Logo，試咗用 Gemini 生成 SVG，結果出嚟嘅變體「乾淨、規整，幾何感好強」。佢將成果分享出去，發現好多人都有同樣煩惱：自己做咗小工具或開源項目，需要圖標但 AI 畫圖成日出錯，揾設計師又覺得唔值。
「好的設計來自理解，而不是隨機生成」
大家嘅需求其實好簡單：唔需要多獨特，只要乾淨、規整、稍微好睇就得。所以作者決定將呢個流程做成 Skill，降低設計門檻。
核心三步：收集、生成、展示
例如作者用 Pi 呢個開源項目做測試，生成咗六個風格：核心 Pi、二進制指令、流動智能、系統原點、語法殼、膠囊支架。每個都可以喺瀏覽器對比揀選。
點解唔直接叫 AI 畫 Logo？
作者解釋咗圖片模型生成 Logo 嘅三大侷限：
- 控制精度差：例如想要圓角半徑 8px，AI 好難做到。
- 無法編輯：生成嘅位圖想改顏色改形狀，只能重新生成碰運氣。
- 唔係向量：放大就模糊，做唔到響應式設計。
SVG 係代碼，可以直接複製去 Figma 等設計軟件精細調整，做到「AI 生成基礎，人工精修細節」。
SVG 嘅優勢：可編輯、向量無損、可做動效、可融入設計體系
作者展示咗將 AI 生成嘅 CodePilot SVG 導入 Figma 後，加咗漸變色、內陰影同外發光，效果精緻好多，但基礎幾何結構係 AI 生成嘅。
使用場景同開源方式
呢個 Skill 唔止適合 Logo，仲可以用於：Vibecoding 項目圖標、創業團隊早期品牌視覺、設計師快速產出方案畀客戶。
「降低設計門檻，令每個開發者都能快速獲得夠用嘅好 Logo」
作者強調呢個 Skill 唔係取代專業設計師，而係好似 Canva 咁，令更多人做到「夠用嘅海報」。工具應該開放，所以佢將 Skill 開源咗。
安裝方法好簡單：直接同你嘅 AI 助手講「幫我安裝 logo-generator skill，地址係 https://github.com/op7418/logo-generator-skill.git」就得。
前幾日想幫 CodePilot 設計一個新 Logo。
就跟 Gemini 傾咗下，叫佢生成啲 SVG 格式嘅 Logo。
結果出乎意料——生成嘅幾個變體都好乾淨、規整，幾何感好強。
我將呢啲 Logo 發咗上 Twitter，反應都幾熱烈。
後尾我又試嚇將呢啲 Logo 整成嗰啲高級嘅展示圖，配埋專業嘅背景，效果好驚豔。
發咗出去之後，發現好多朋友都有類似嘅需求：
自己整咗個小工具或者開源項目，需要個圖標或者 Logo。
但係叫 AI 畫圖成日都畫得唔好——一係細節唔啱，一係文字實錯，一係就太隨機。
揾設計師啦，又覺得「唔值得」，畢竟只係一個小項目。
最後只能用一個好樣衰嘅字母縮寫，或者是但揾個 icon 是但用住先。
其實大家嘅需求好簡單：唔需要好獨特，只要乾淨、規整、少少好睇就得。
所以我諗，可唔可以將呢個流程整成一個 Skill，令到每個人都可以快速生成「夠用嘅好 Logo」？
Skill 核心能力：三步生成 Logo 同高級展示圖
建議喺 Gemini CLI 或者其他用 Gemini 驅動嘅 Agent 裏面用，Gemini 嘅 SVG 生成能力都仲係好強。
當然，你喺 Claude Code 裏面都得。
呢個 Logo Generator Skill 嘅核心邏輯得三步。
第一步：收集資訊
Skill 會問你幾個簡單嘅問題：
產品名稱係咩？
屬於咩行業或者類別？（例如 AI、金融科技、設計工具）
核心概念係咩？（例如連接、流動、安全、簡潔）
有咩設計偏好？（例如極簡/複雜、冷色/暖色、專業/友好）
當然你都可以直接將你嘅項目介紹發俾 AI。
好嘅設計來自理解，而唔係隨機生成。
第二步：生成 6 個以上設計變體
根據你提供嘅資訊，Skill 會自動匹配設計模式庫，生成至少 6 個唔同風格嘅 SVG Logo。
例如呢度我將 Pi 呢個開源項目嘅介紹發俾佢，佢就畀咗六個選項：
核心 Pi：希臘字母 π 嘅現代抽象化設計，由三條核心筆畫構成。
二進制指令：利用圓角矩形點陣表現擴展系統嘅模塊化特性。
流動智能：粗幼不一嘅平行線代表代碼同數據喺終端裏面嘅持續流動。
系統原點：幾何六邊形核心代表引擎高效、結構化嘅基礎。
語法殼：使用粗體括號將「支架」表現為一種保護殼。下劃線光標代表工具嘅 CLI 屬性。
膠囊支架：對項目中支架概念嘅進階詮釋。
每個變體都會生成一個互動式網頁，你可以喺瀏覽器裏面對比查看，揀最鍾意嘅。
由於 AI 嘅特性，生成嘅作品一定會有好嘅亦有差嘅。
如果你覺得呢 6 個裏面有邊個唔鍾意，或者覺得比較樣衰，你可以同佢講「換一個」。
佢就會揾其他可以套用嘅設計模式幫你替換。
如果你有具體嘅指導意見都可以提供俾佢，佢都會幫你修改。
第三步：高級展示圖
揀好 Logo 之後，Skill 會幫你生成專業嘅展示圖。呢一步提供兩種方案：
方案 1：Nano Banana 圖片生成（12 種專業背景）
用 Nano Banana（Gemini 嘅圖片生成能力）生成高質量嘅靜態展示圖，提供 12 種專業背景風格：
暗色系（6 種）：
The Void（絕對虛空）：純黑 + 銀色微噪點，硬核科技感
Frosted Horizon（磨砂穹頂）：鈦灰色 + 有機紋理，高端產品感
Fluid Abyss（流體深淵）：深紫/深藍 + 流體融合，AI 原生感
Studio Spotlight（物理影棚）：碳灰色 + 編輯級打光，雜誌質感
Analog Liquid（物理流體）：純色底（橙/藍/綠）+ 金屬光澤，創意品牌感
LED Matrix（數字硬件）：發光點陣 + 數字復古，賽博朋克感
亮色系（6 種）：
Editorial Paper（紙本編輯）：米白色 + 紙張紋理，人文品牌感
Iridescent Frost（幻彩透砂）：銀灰色 + 全息暗示，科技硬件感
Morning Aura（晨霧光域）：暖象牙色 + 柔和色彩，親和 AI 感
Clinical Studio（無菌影棚）：純白 + 幾何陰影，算法驅動感
UI Container（容器化界面）：磨砂玻璃容器，SaaS 平台感
Swiss Flat（瑞士扁平）：絕對扁平 + 純色塊，永恆權威感
每種風格都有特定嘅視覺特徵同適用場景。
例如做 AI 產品，可以揀 Fluid Abyss 或者 Morning Aura；
做硬件產品，可以揀 Iridescent Frost 或者 LED Matrix。
注意呢度需要填寫你嘅 AI Studio 嘅 API 先得，不過都支援第三方嘅 Nano Banana API。
方案 2：WebGL 動態背景（6 種互動式背景）
用 WebGL Shader 生成嘅動態背景，可以隨意縮放、支援鼠標互動，非常適合放喺官網首頁或者產品頁：
6 種動態風格：
LED Matrix（LED 矩陣）：90×90 高密度 LED 網格 + 流動波浪動畫，自適應主題色
Fluid Warping（流體扭曲）：域扭曲 + 分形布朗運動（FBM），3 色漸變混合 + 鼠標互動
Fabric Wave（織物波浪）：絲綢般起伏 + 交叉波紋，深灰底色 + 微光閃爍
Off-Center Ripple（角落漣漪）：雙漣漪從對角發散 + 指數衰減，中灰底色
Holographic Dispersion（全息色散）：虹彩流體 + RGB 色差，深鈦灰底 + 稜鏡般色彩分離
Spiral Vortex（螺旋漩渦）：旋轉螺旋 + 角動量，淺灰底色 + 色帶
WebGL 背景嘅優勢：
動態互動：鼠標移動時背景會實時響應，漣漪、扭曲、流動效果
無限縮放：根據代碼生成，放大縮小都唔會失真
性能優化：60 FPS 流暢運行，自動適配設備像素比
直接用得：生成嘅係 HTML 代碼，可以直接嵌入網頁
你可以將呢啲放喺官網首頁，PPT 或者動態背景都用得。
同一個 Logo，喺唔同背景下嘅感覺完全唔同。
靜態圖片適合社交媒體、文檔、海報；
動態背景適合網頁、演示、互動場景。
最終交付物：完成呢三步之後，你會得到一個完整嘅設計資產包：
SVG 文件：可編輯嘅矢量格式
PNG 導出：多種尺寸（1024x1024、2048x2048 等）
展示圖：4 種專業背景風格
互動式網頁：可以隨時查看同對比所有變體
點解唔直接叫 AI 畫 Logo？
大家都見到我先叫 Gemini 生成 SVG，再生成展示圖。
而唔係直接叫 Nano Banana 一步到位生成 Logo 圖片。
簡單講下點解要咁做。
圖片模型生成 Logo 嘅侷限性：
控制精度差：你想要一個圓角半徑 8px 嘅圓角矩形？AI 畫圖好難精準控制呢啲參數。
冇得編輯：生成嘅係位圖，想調整顏色、改個形狀、調整間距？只能重新生成，靠運氣。
唔係矢量：放大就矇，做唔到響應式設計，都冇辦法用喺唔同尺寸嘅場景。
SVG 有非常多嘅優勢。
SVG 係代碼，可以直接複製到 Figma 呢啲專業設計軟件裏面，進行精細化調整。
可以整成設計體系，可以做動效，可以變成 loading 動畫。
可以用喺唔同場景（網站、App、文檔）。
矢量無損，放大縮小都唔會失真，適配各種分辨率。
例如呢度，我用 Gemini 生成嘅 CodePilot Logo SVG，導入 Figma 之後：
加咗漸變色（由單色變做漸變）、加咗內陰影同外發光、調整咗點陣數量同大小
最終嘅 Logo 比原始 SVG 精緻好多，但基礎幾何結構係 AI 生成嘅。
呢個就係「AI 生成基礎，人工精修細節」嘅工作流。
所以呢個 Skill 嘅設計思路係：用 AI 生成可編輯嘅 SVG 基礎，再用 AI 生成高級嘅展示圖。
兩步結合，既保證咗可控性，又有專業嘅視覺效果。
使用場景拓展：唔止係 Logo
呢個 Skill 嘅使用場景其實都幾廣：
快速生成 Vibecoding 項目圖標，唔需要獨特性，但要專業、乾淨。
創業團隊早期品牌：預算有限，但需要視覺資產。
可以用 Skill 生成先，後期再揾設計師優化。
設計師嘅輔助工具：
快速生成多個方案俾客戶揀，或者作為靈感來源。
12 種背景風格唔止可以用嚟展示 Logo，仲可以：
用喺網頁設計嘅背景
截圖做 PPT 背景
展示其他產品截圖（例如 App 界面、網站首頁）
開源 + 安裝方式
呢個 Skill 係完全開源嘅。
GitHub 地址：https://github.com/op7418/logo-generator-skill
安裝方式：
結尾
呢個 Skill 嘅價值，係降低設計門檻，令到每個開發者都可以快速獲得「夠用嘅好 Logo」。
佢唔係要取代專業設計師。
設計師做嘅係「獨特性」同「品牌故事」，而 Skill 做嘅係「快速可用」。
就好似 Canva 冇取代設計師，而係令到更多人能夠整出「夠用嘅海報」一樣。
工具應該係開放嘅，令到更多人可以用到 AI 嘅設計能力。
歡迎試用、反饋同貢獻，覺得有幫助可以幫我㩒個讚，或者轉發俾需要嘅朋友。
✦
前幾天想給 CodePilot 設計個新 Logo。
就跟 Gemini 聊了聊，讓它生成一些 SVG 格式的 Logo。
結果出乎意料——生成的幾個變體都很乾淨、規整，幾何感很強。
我把這些 Logo 發到推上，熱度還挺高。
後來我又試着把這些 Logo 做成那種高級的展示圖，配上專業的背景，效果很驚豔。
發出去以後，發現很多朋友都有類似的需求：
自己做了個小工具或開源項目，需要個圖標或 Logo。
但讓 AI 畫圖總是畫不好——要麼細節不對，要麼文字必錯，要麼就是太隨機。
找設計師吧，又覺得"不值得"，畢竟只是個小項目。
最後只能用個醜陋的字母縮寫，或者隨便找個 icon 湊合。
其實大家的需求很簡單：不需要多獨特，只要乾淨、規整、稍微好看點就行。
所以我就想，能不能把這個流程做成一個 Skill，讓每個人都能快速生成"夠用的好 Logo"？
Skill 核心能力：三步生成 Logo 和高級展示圖
推薦在 Gemini CLI 或者其他用 Gemini 驅動的 Agent 裏面用，Gemini 的 SVG 生成能力還是很強的。
當然，你在 Claude Code 裏也可以。
這個 Logo Generator Skill 的核心邏輯就三步。
第一步：信息收集
Skill 會問你幾個簡單的問題：
產品名稱是什麼？
屬於什麼行業或類別？（比如 AI、金融科技、設計工具）
核心概念是什麼？（比如連接、流動、安全、簡潔）
有什麼設計偏好？（比如極簡/複雜、冷色/暖色、專業/友好）
當然你也可以直接把你的項目介紹發給 AI。
好的設計來自理解，而不是隨機生成。
第二步：生成 6+ 設計變體
基於你提供的信息，Skill 會自動匹配設計模式庫，生成至少 6 個不同風格的 SVG Logo。
比如這裏我把 Pi 這個開源項目的介紹發給他，他就給了六個選項：
核心 Pi：希臘字母 π 的現代抽象化設計，由三條核心筆畫構成。
二進制指令：利用圓角矩形點陣表現擴展系統的模塊化特性。
流動智能：粗細不一的平行線代表代碼和數據在終端中的持續流動。
系統原點：幾何六邊形核心代表引擎高效、結構化的基礎。
語法殼：使用粗體括號將"支架"表現為一種保護殼。下劃線光標代表工具的 CLI 屬性。
膠囊支架：對項目中支架概念的進階詮釋。
每個變體都會生成一個交互式網頁，你可以在瀏覽器裏對比查看，選擇最喜歡的。
由於 AI 的特性，生成的作品一定會有好的也有差的。
如果你覺得這 6 個裏邊有哪個不喜歡，或者覺得比較醜，你可以跟它說"換一個"。
它就會找其他可以套用的設計模式幫你替換。
你要是有具體的指導意見也可以提供給它，它也會幫你修改。
第三步：高級展示圖
選好 Logo 之後，Skill 會幫你生成專業的展示圖。這一步提供兩種方案：
方案 1：Nano Banana 圖片生成（12 種專業背景）
用 Nano Banana（Gemini 的圖片生成能力）生成高質量的靜態展示圖，提供 12 種專業背景風格：
暗色系（6 種）：
The Void（絕對虛空）：純黑 + 銀色微噪點，硬核科技感
Frosted Horizon（磨砂穹頂）：鈦灰色 + 有機紋理，高端產品感
Fluid Abyss（流體深淵）：深紫/深藍 + 流體融合，AI 原生感
Studio Spotlight（物理影棚）：碳灰色 + 編輯級打光，雜誌質感
Analog Liquid（物理流體）：純色底（橙/藍/綠）+ 金屬光澤，創意品牌感
LED Matrix（數字硬件）：發光點陣 + 數字復古，賽博朋克感
亮色系（6 種）：
Editorial Paper（紙本編輯）：米白色 + 紙張紋理，人文品牌感
Iridescent Frost（幻彩透砂）：銀灰色 + 全息暗示，科技硬件感
Morning Aura（晨霧光域）：暖象牙色 + 柔和色彩，親和 AI 感
Clinical Studio（無菌影棚）：純白 + 幾何陰影，算法驅動感
UI Container（容器化界面）：磨砂玻璃容器，SaaS 平台感
Swiss Flat（瑞士扁平）：絕對扁平 + 純色塊，永恆權威感
每種風格都有特定的視覺特徵和適用場景。
比如做 AI 產品，可以選 Fluid Abyss 或 Morning Aura；
做硬件產品，可以選 Iridescent Frost 或 LED Matrix。
注意這裏需要填寫你的 AI Studio 的 API 才行，但是也支持三方的 Nano Banana API。
方案 2：WebGL 動態背景（6 種交互式背景）
用 WebGL Shader 生成的動態背景，可以隨意縮放、支持鼠標交互，非常適合放在官網首頁或產品頁：
6 種動態風格：
LED Matrix（LED 矩陣）：90×90 高密度 LED 網格 + 流動波浪動畫，自適應主題色
Fluid Warping（流體扭曲）：域扭曲 + 分形布朗運動（FBM），3 色漸變混合 + 鼠標交互
Fabric Wave（織物波浪）：絲綢般起伏 + 交叉波紋，深灰底色 + 微光閃爍
Off-Center Ripple（角落漣漪）：雙漣漪從對角發散 + 指數衰減，中灰底色
Holographic Dispersion（全息色散）：虹彩流體 + RGB 色差，深鈦灰底 + 稜鏡般色彩分離
Spiral Vortex（螺旋漩渦）：旋轉螺旋 + 角動量，淺灰底色 + 色帶
WebGL 背景的優勢：
動態交互：鼠標移動時背景會實時響應，漣漪、扭曲、流動效果
無限縮放：基於代碼生成，放大縮小都不失真
性能優化：60 FPS 流暢運行，自動適配設備像素比
直接可用：生成的是 HTML 代碼，可以直接嵌入網頁
你可以把這些放在官網首頁，PPT 或動態背景都可以用。
同一個 Logo，在不同背景下的感覺完全不同。
靜態圖片適合社交媒體、文檔、海報；
動態背景適合網頁、演示、交互場景。
最終交付物：完成這三步之後，你會得到一個完整的設計資產包：
SVG 文件：可編輯的矢量格式
PNG 導出：多種尺寸（1024x1024、2048x2048 等）
展示圖：4 種專業背景風格
交互式網頁：可以隨時查看和對比所有變體
為什麼不直接讓 AI 畫 Logo？
大家看到了我是先讓 Gemini 生成 SVG ，再生成展示圖"。
而不是直接讓 Nano Banana 一步到位生成 Logo 圖片。
簡單聊一下為什麼這麼做。
圖片模型生成 Logo 的侷限性：
控制精度差：你想要一個圓角半徑 8px 的圓角矩形？AI 畫圖很難精準控制這些參數。
無法編輯：生成的是位圖，想調整顏色、改個形狀、調整間距？只能重新生成，碰運氣。
不是矢量：放大就糊，做不了響應式設計，也沒法用在不同尺寸的場景。
SVG 有非常多的優勢。
SVG 是代碼，可以直接複製到 Figma 這些專業設計軟件裏，進行精細化調整。
可以做成設計體系，可以做動效，可以變成 loading 動畫。
可以用在不同場景（網站、App、文檔）。
矢量無損，放大縮小都不失真，適配各種分辨率。
比如這裏，我用 Gemini 生成的 CodePilot Logo SVG，導入 Figma 後：
加了漸變色（從單色變成漸變）、加了內陰影和外發光、調整了點陣數量和大小
最終的 Logo 比原始 SVG 精緻很多，但基礎幾何結構是 AI 生成的。
這就是"AI 生成基礎，人工精修細節"的工作流。
所以這個 Skill 的設計思路是：用 AI 生成可編輯的 SVG 基礎，再用 AI 生成高級的展示圖。
兩步結合，既保證了可控性，又有專業的視覺效果。
使用場景拓展：不只是 Logo
這個 Skill 的使用場景其實挺廣的：
快速生成 Vibecoding 項目圖標，不需要獨特性，但要專業、乾淨。
創業團隊早期品牌：預算有限，但需要視覺資產。
可以先用 Skill 生成，後期再找設計師優化。
設計師的輔助工具：
快速生成多個方案給客戶選擇，或者作為靈感來源。
12 種背景風格不只能用來展示 Logo，還可以：
用在網頁設計的背景
截圖做 PPT 背景
展示其他產品截圖（比如 App 界面、網站首頁）
開源 + 安裝方式
這個 Skill 是完全開源的。
GitHub 地址：https://github.com/op7418/logo-generator-skill
安裝方式：
結尾
這個 Skill 的價值，是降低設計門檻，讓每個開發者都能快速獲得"夠用的好 Logo"。
它不是要替代專業設計師。
設計師做的是"獨特性"和"品牌故事"，而 Skill 做的是"快速可用"。
就像 Canva 沒有替代設計師，而是讓更多人能做出"夠用的海報"一樣。
工具應該是開放的，讓更多人能用上 AI 的設計能力。
歡迎試用、反饋和貢獻，覺得有幫助可以幫我點個贊，或者轉發給需要的朋友。
✦