別只讓 AI 畫個標(biāo)把 logo-design-skill 的 7 步品牌流程跑一遍小團(tuán)隊也能三天交付全套 VI【免費下載鏈接】logo-design-skillA comprehensive logo-design skill for Claude, Gemini CLI, Codex and other AI agents: principles, process, SVG craft, testing tools and a 1,400 logo reference library.項目地址: https://gitcode.com/gh_mirrors/lo/logo-design-skillAI 生成 Logo 早已不是新鮮事——從 2023 年 CSDN 上那些「一鍵生成 LOGO」的教程到掘金上各式各樣的 FLUX、Logocreator 實測幾乎每篇都在告訴你「會打字就會設(shè)計」。但它們大多停在「畫個標(biāo)」這一步給你一張位圖、一個帶漸變的小圖標(biāo)交付即結(jié)束。真正讓小團(tuán)隊頭疼的從來不是「有沒有一個圖形」而是從品牌簡報、概念選擇、幾何構(gòu)建到 16px 下依然清晰的 favicon、各場景樣機(jī)演示板、一整套交付文件的完整品牌資產(chǎn)。logo-design-skill 的思路恰好相反它不是又一個生成器而是一個把專業(yè)品牌設(shè)計師的工作方法「流程化」的 Agent 技能包——支持 Claude、Gemini CLI、Codex CLI、Cursor 等任何遵循 Agent Skills 格式的客戶端。本文基于倉庫源碼把它從安裝、7 步流程到交付清單完整跑一遍看小團(tuán)隊如何用三天交付一套像樣的 VI。一、安裝與 CLI 接入一份 SKILL.md 打通 Claude / Gemini 雙端這個項目沒有私有格式核心就是一個帶SKILL.md的目錄外加一堆純 Python 腳本。這也決定了它的接入方式極其簡單。在 Claude Code 中官方推薦走插件市場/plugin marketplace add kaankiziltug/logo-design-skill /plugin install logo-designlogo-design-skill手動安裝則是把skills/logo-design整個目錄復(fù)制到個人級或項目級技能目錄。Gemini CLI、Codex CLI 的接入路徑在 README.md 中有明確表格Agent個人級所有項目項目級Gemini CLI~/.gemini/skills/logo-design.gemini/skills/logo-designCodex CLI~/.codex/skills/logo-design.codex/skills/logo-designgit clone https://github.com/kaankiziltug/logo-design-skill.git cp -r logo-design-skill/skills/logo-design ~/.gemini/skills/logo-design # Gemini CLI cp -r logo-design-skill/skills/logo-design ~/.codex/skills/logo-design # Codex CLI關(guān)鍵點在于技能本身是純 Markdown 指令 純標(biāo)準(zhǔn)庫 Python要求 Python 3.8零第三方依賴任何支持 skills 的 Agent 都能直接讀取。唯一的前提是模型能看圖——因為工作流會自己把草稿渲染成 PNG 檢查后再給你看。值得一提的還有.claude-plugin/目錄只服務(wù)于 Claude Code其他 Agent 會忽略它tools/package_skill.py 可以打包出logo-design.zip與logo-design-lite.zip后者剔除 1400 個 SVG僅保留目錄、腳本與元數(shù)據(jù)專門給有上傳大小限制的平臺這意味著它同樣能作為普通技能包上傳到 Claude.ai / Claude Desktop。二、7 步流程走讀從一句需求到三套概念啟動后技能不會直接開畫。它在 SKILL.md 里內(nèi)置了一套與專業(yè)設(shè)計公司幾乎同構(gòu)的流程可按 7 步來理解。Phase 1 — 品牌簡報。先問清楚「名字的確切拼寫、做什么、給誰看、3–5 個品牌形容詞、競品、約束條件」并寫成一段簡短的 design brief。discovery-brief.md 提供了完整的提問庫與模板同時也提供「快車道」最多一次問 5 個問題用戶不愿答就直接陳述假設(shè)開干——三天交付靠的就是這個「先跑起來、再迭代」的機(jī)制。Phase 2 — 策略研究與詞圖。這一階段是區(qū)分「畫個標(biāo)」和「做品牌」的分水嶺用search_library.py查詢所屬品類的視覺慣例明確列出品類陳詞濫調(diào)比如 fintech 的藍(lán)色、上箭頭、盾牌咖啡的豆子、蒸汽、杯子并把它們列為禁區(qū)。然后用「詞圖」把品牌形容詞轉(zhuǎn)譯成可畫的意象Brand: Harbor — 儲蓄 App。形容詞: safe, calm, patient。 harbor → 船、錨、燈塔、防波堤、港灣形、潮汐 safe → 盾牌、鎖、巢、屋頂、合攏的手、圍合 calm → 地平線、靜水、圓、慢波 patient→ 年輪、堆疊、漲潮、日出 交叉點H 的橫杠是一條平靜的水線 / 堆疊的波浪構(gòu)成上升的條形圖 / 港灣形圍合出一個負(fù)空間庇護(hù)著一枚硬幣Phase 3 — 概念發(fā)散。寫出 8–12 個一句話概念橫跨不同 mark typemark-types.md 中列出了 wordmark、letterform、pictorial、abstract、mascot、emblem、combination 八類及各自適用場景快速打分后只挑最強的三個去構(gòu)建。鐵律是一句說不清的概念一眼也讀不懂。Phase 4 — SVG 幾何構(gòu)建。所有概念先做純黑版本畫布統(tǒng)一viewBox0 0 256 256。svg-construction.md 給出了 AI 直接寫 SVG 的完整規(guī)范用圓弧表達(dá)圓形幾何、錨點越少越好、角度對齊 0/15/30/45/60/90°、負(fù)空間用fill-ruleevenodd做真孔洞、禁止在成品里用text活字字體依賴會跨機(jī)器失效——字標(biāo)必須手寫路徑。倉庫甚至內(nèi)置了構(gòu)造配方例如正圓形切出缺口、圓角方形容器App 圖標(biāo) 22% 圓角、等邊三角形、字母 A 的 letterform 構(gòu)造等。Phase 5 — 測試與打磨至少循環(huán)兩輪。這是整個技能最硬核的部分全部由腳本驅(qū)動python3 scripts/svg_audit.py concept-a.svg concept-b.svg concept-c.svg python3 scripts/preview_sheet.py concept-a.svg concept-b.svg concept-c.svg --refs-industry industry -o preview.htmlsvg_audit.py把工匠規(guī)則變成機(jī)器檢查是否含活字/位圖/濾鏡、顏色數(shù)量、錨點復(fù)雜度對照參考庫的分位數(shù)、0.3–3° 的「差一度角度」、小于畫布 1/48 的微細(xì)節(jié)、viewBox 居中與出血。visual-techniques.md 則補充了人類設(shè)計師才懂的光學(xué)修正——圓角字形的 overshoot超出版面約 1–3%、圓角方形的「骨頭效應(yīng)」、白字在黑底上的「光暈膨脹」irradiation反轉(zhuǎn)版要減細(xì) 2–5%、水平筆畫視覺上偏粗需減細(xì) 5–10%、光學(xué)中心略高于幾何中心等。倉庫在 28 個示例品牌里如實記錄了這些細(xì)節(jié)Ralli 的 R 腿被精確吸附到 60°Relaydesk 的 y 被吸附到 60°、掛鉤縫隙從 1.7 個單位重新打開Driftwell 的 W/R 對角被吸附到 75° 與 45°——這些都是「AI 畫圖最容易翻車、而流程能兜底」的地方。Phase 6 — 概念檢查點checkpoint。生成一張概念總覽圖展示給用戶看python3 scripts/concept_sheet.py a-symbol.svg b-symbol.svg c-symbol.svg --lockups ... \ --names ... --notes ... --recommend 1 --greyscale -o concepts.png注意兩個細(xì)節(jié)一是強制灰度——先談形狀避免顏色引發(fā)口味之爭二是技能在此停下來給出推薦并等待用戶拍板絕不擅自進(jìn)入下一步。README 里的 28 個示例中有 4 個品牌Hearsay、Brawnhall、Solenne、Roamwheel客戶在檢查點選了技能推薦之外的方向技能隨即按新方向細(xì)化——這正是檢查點存在的意義。Phase 7 — 全套交付。用戶選定方向后才進(jìn)入色彩1–2 個主色、可復(fù)制的 HEX/RGB/CMYK/Pantone、滿足 3:1 對比、字體與鎖版橫排/豎排/純符號/純字標(biāo)、演示板與文件導(dǎo)出。至此完整流程走完。三、多尺寸測試16px 是 Logo 的照妖鏡絕大多數(shù) AI 生成物死在小尺寸上——放大看很漂亮縮到瀏覽器標(biāo)簽頁糊成一團(tuán)。preview_sheet.py 生成的測試表把這件事變成了標(biāo)準(zhǔn)化流程從 16px 起逐級放大的尺寸階梯、16/32/48px 的像素級放大測試、白/淺灰/黑/品牌色/照片/紋理八種背景、灰度/單色黑/單色白/瞇眼模糊/鏡像/180° 旋轉(zhuǎn)等「暴露弱點」的處理外加瀏覽器標(biāo)簽、App 圖標(biāo)、頭像圓形裁剪、網(wǎng)頁頁頭、名片五種真實場景以及把候選標(biāo)放進(jìn)參考庫同尺寸「貨架」的 shelf test瞇眼判斷它是否從競品中跳出來。測試表自帶的檢查清單非常直接16–24px 時想法還清晰嗎瞇眼測試剪影還成立嗎單色黑版還扛得住嗎反轉(zhuǎn)版看起來是不是更重光暈效應(yīng)鏡像和旋轉(zhuǎn) 180° 有沒有意外讀法放進(jìn) favicon/App 圖標(biāo)測試時符號是否光學(xué)居中貨架上它與參考標(biāo)的差別足夠大嗎這些「拷問」每一項都對應(yīng)交付前必須想清楚的問題。四、演示板與全套圖標(biāo)導(dǎo)出把「設(shè)計」變成「文件」行業(yè)相關(guān)的樣機(jī)演示板presentation_board.py按行業(yè)預(yù)設(shè)了樣機(jī)組合——咖啡行業(yè)自動匹配杯子、紙袋、門頭招牌、名片、社媒、托特包SaaS 匹配網(wǎng)站、favicon 標(biāo)簽頁、App 圖標(biāo)、社媒、貼紙、名片金融匹配銀行卡、App 圖標(biāo)、網(wǎng)站……配置寫在一個 JSON 規(guī)格文件里模板見 presentation-spec.example.json一條命令生成整張演示板--png-dir還能把每頁導(dǎo)出為圖片方便分享。28 個示例品牌的封面墻可以直觀感受這套流程的輸出廣度——從精品咖啡、奢侈時裝、音樂節(jié)到 B2B SaaS、金融科技與醫(yī)療健康一鍵導(dǎo)出全套 VI 變體最后一個腳本 export_variants.py 把「交付物」從一份 SVG 擴(kuò)展成整套品牌資產(chǎn)。看它的 docstring 就明白輸出有多完整黑色單色版、白色反轉(zhuǎn)版、品牌單色版可重復(fù)指定多個--mono、256×256 居中正方形版頭像/社交主圖、緊裁 favicon 版、白標(biāo)圓角磚格 App 圖標(biāo)版--png指定尺寸輸出透明 PNG--web-icons更是直接生成favicon.ico16/32/48、favicon-16/32/48.png、apple-touch-icon.png180、icon-192.png、icon-512.png、maskable-512.png以及site.webmanifest和head引用片段——也就是一套完整 PWA 圖標(biāo)包。python3 scripts/export_variants.py final-symbol.svg --title Brand logo --mono #0F7C80 --icon-bg #0F7C80 --web-icons --favicon-source final-symbol-small.svg python3 scripts/export_variants.py final-horizontal.svg --title Brand logo --only black white mono --mono #0F7C80 --png 1200兩個細(xì)節(jié)非?！腹こ袒?-favicon-source允許為小尺寸單獨準(zhǔn)備一張簡化版圖形favicon 應(yīng)該為 favicon 而設(shè)計而不是硬縮主標(biāo)maskable-512.png把符號限制在 80% 安全區(qū)內(nèi)避免被 Android 自適應(yīng)圖標(biāo)裁切。此外腳本還會善意提醒master 里若含白色「偽挖空」形狀單色版會變成白斑——真正的孔洞必須用fill-ruleevenodd做出來。五、交付前的檢查點品牌資產(chǎn)清單流程的收尾不是「圖好看」而是一份可逐項勾選的交付標(biāo)準(zhǔn)。倉庫里至少有三層檢查測試清單testing-checklist.md16px favicon 核心想法不糊、24–32px 一眼可辨、大尺寸曲線順滑、單色黑/白都成立且反轉(zhuǎn)版不顯重、灰度下色塊按明度分離、CMYK/Pantone 可復(fù)制、瞇眼/鏡像/旋轉(zhuǎn)無意外讀法、letter test每個被改過的字母第一眼還讀得出來嗎、junction check筆畫交匯處無毛刺墨坑、peer test與 3–4 個典范庫標(biāo)并排時同樣精致、shelf test、familiarity test、商標(biāo)檢索建議。最終文件清單process.md §7無重復(fù)/多余錨點、角度準(zhǔn)確、文字全部轉(zhuǎn)輪廓、無活字無位圖無濾鏡、描邊已擴(kuò)展為填充、形狀已合并無接縫、viewBox 緊貼圖形并光學(xué)居中、顏色為品牌精確值、提供單色與反轉(zhuǎn)版、文件集與約定交付物一致。品牌使用指南brand-guidelines-template.md一頁紙講清楚 logo 的 idea、各版本文件、留白區(qū)1×元素高度、隨比例縮放、最小尺寸橫向版 96px 屏顯/25mm 印刷符號 16px/6mm、四套色彩體系HEX/RGB/CMYK/Pantone、字體許可、以及一整頁「禁止事項」——不得拉伸壓縮、不得隨意換色、不得加陰影描邊漸變、不得重新排版鎖版、不得重新打字復(fù)刻字標(biāo)。這套交付標(biāo)準(zhǔn)的底氣來自參考庫本身svg_audit.py會把你的錨點數(shù)量與 1432 個真實 Logo 的分布做對比方形符號中位數(shù)約 53 個錨點p90 ≈ 194復(fù)雜的標(biāo)記會收到「比 95% 的參考 Logo 都復(fù)雜」的警告。換句話說它的質(zhì)量標(biāo)尺不是「看起來還行」而是「與真實世界的品牌資產(chǎn)同分布」。六、1400 參考庫為什么它既當(dāng)靈感源又當(dāng)質(zhì)量錨最后必須提這個庫本身——它才是這個技能和普通提示詞工程的本質(zhì)區(qū)別。assets/library/下存放著 1432 個真實世界 Logo 的 SVG、按 mark type、technique、geometry、subject、mood、industry 多維人工標(biāo)注的分類數(shù)據(jù)catalog.json / classifications.json / stats.json以及一個可視化瀏覽的畫廊gallery.html。它有三種用法研究品類慣例search_library.py --industry payments-fintech --summary會告訴你該品類的常用標(biāo)記類型、顏色、技法分布——即「該避開什么」學(xué)習(xí)幾何構(gòu)建--technique negative-space --exemplary --format paths拉出典范文件直接讀 SVG 源碼規(guī)避撞車設(shè)計前先--subject bird搜一遍確保你沒在重造已有標(biāo)識。統(tǒng)計口徑非常誠實庫整體偏向科技品牌developer tools 21%、frameworks 17%、cloud 7%藍(lán)色是「偽裝色」約 22% 的 Logo 主色為藍(lán)幾何上圓是最大基底26%containment 是最常見技法32%——而這些數(shù)據(jù)反過來正是svg_audit.py和檢查清單判斷「你的標(biāo)夠不夠出挑」的量化基準(zhǔn)。庫內(nèi)所有 Logo 均為各自持有者的商標(biāo)僅作研究與教學(xué)用途不屬 MIT 許可見 TRADEMARKS.md技能也明確要求「學(xué)習(xí)、絕不描摹」。結(jié)語回到標(biāo)題的問題小團(tuán)隊真的能三天交付全套 VI 嗎這套流程給出的答案是「可以但有前提」。前提一是把決策前置——先花半天在簡報和詞圖上把「形容詞」翻譯成「視覺線索」避免 AI 在錯誤的賽道上畫出漂亮的廢稿前提二是把測試自動化——16px 像素測試、單色反轉(zhuǎn)、貨架測試全部腳本化肉眼審查留給人做判斷前提三是接受檢查點——概念階段強制停下來讓客戶拍板交付階段按清單逐項驗收。當(dāng)「畫標(biāo)」被 7 個階段、9 個腳本、1432 個參考樣本和一頁使用指南包裹起來AI 產(chǎn)出的就不再是裝飾而是可以進(jìn)入印刷、App 商店與品牌手冊的正式資產(chǎn)?！久赓M下載鏈接】logo-design-skillA comprehensive logo-design skill for Claude, Gemini CLI, Codex and other AI agents: principles, process, SVG craft, testing tools and a 1,400 logo reference library.項目地址: https://gitcode.com/gh_mirrors/lo/logo-design-skill創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考