閱讀站

前幾天想給 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 這個開源項目的介紹發給他，他就給了六個選項：1.核心 Pi：希臘字母 π 的現代抽象化設計，由三條核心筆畫構成。2.二進制指令：利用圓角矩形點陣表現擴展系統的模塊化特性。3.流動智能：粗細不一的平行線代表代碼和數據在終端中的持續流動。4.系統原點：幾何六邊形核心代表引擎高效、結構化的基礎。5.語法殼：使用粗體括號將"支架"表現為一種保護殼。下劃線光標代表工具的 CLI 屬性。6.膠囊支架：對項目中支架概念的進階詮釋。每個變體都會生成一個交互式網頁，你可以在瀏覽器裏對比查看，選擇最喜歡的。由於 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 的侷限性：1.控制精度差：你想要一個圓角半徑 8px 的圓角矩形？AI 畫圖很難精準控制這些參數。2.無法編輯：生成的是位圖，想調整顏色、改個形狀、調整間距？只能重新生成，碰運氣。3.不是矢量：放大就糊，做不了響應式設計，也沒法用在不同尺寸的場景。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安裝方式：告訴你的 AI 助手： "幫我安裝 logo-generator skill，地址是：https://github.com/op7418/logo-generator-skill.git"結尾這個 Skill 的價值，是降低設計門檻，讓每個開發者都能快速獲得"夠用的好 Logo"。它不是要替代專業設計師。設計師做的是"獨特性"和"品牌故事"，而 Skill 做的是"快速可用"。就像 Canva 沒有替代設計師，而是讓更多人能做出"夠用的海報"一樣。工具應該是開放的，讓更多人能用上 AI 的設計能力。歡迎試用、反饋和貢獻，覺得有幫助可以幫我點個贊，或者轉發給需要的朋友。✦

完成