别只让 AI 画个标把 logo-design-skill 的 7 步品牌流程跑一遍小团队也能三天交付全套 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 实测几乎每篇都在告诉你「会打字就会设计」。但它们大多停在「画个标」这一步给你一张位图、一个带渐变的小图标交付即结束。真正让小团队头疼的从来不是「有没有一个图形」而是从品牌简报、概念选择、几何构建到 16px 下依然清晰的 favicon、各场景样机演示板、一整套交付文件的完整品牌资产。logo-design-skill 的思路恰好相反它不是又一个生成器而是一个把专业品牌设计师的工作方法「流程化」的 Agent 技能包——支持 Claude、Gemini CLI、Codex CLI、Cursor 等任何遵循 Agent Skills 格式的客户端。本文基于仓库源码把它从安装、7 步流程到交付清单完整跑一遍看小团队如何用三天交付一套像样的 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整个目录复制到个人级或项目级技能目录。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关键点在于技能本身是纯 Markdown 指令 纯标准库 Python要求 Python 3.8零第三方依赖任何支持 skills 的 Agent 都能直接读取。唯一的前提是模型能看图——因为工作流会自己把草稿渲染成 PNG 检查后再给你看。值得一提的还有.claude-plugin/目录只服务于 Claude Code其他 Agent 会忽略它tools/package_skill.py 可以打包出logo-design.zip与logo-design-lite.zip后者剔除 1400 个 SVG仅保留目录、脚本与元数据专门给有上传大小限制的平台这意味着它同样能作为普通技能包上传到 Claude.ai / Claude Desktop。二、7 步流程走读从一句需求到三套概念启动后技能不会直接开画。它在 SKILL.md 里内置了一套与专业设计公司几乎同构的流程可按 7 步来理解。Phase 1 — 品牌简报。先问清楚「名字的确切拼写、做什么、给谁看、3–5 个品牌形容词、竞品、约束条件」并写成一段简短的 design brief。discovery-brief.md 提供了完整的提问库与模板同时也提供「快车道」最多一次问 5 个问题用户不愿答就直接陈述假设开干——三天交付靠的就是这个「先跑起来、再迭代」的机制。Phase 2 — 策略研究与词图。这一阶段是区分「画个标」和「做品牌」的分水岭用search_library.py查询所属品类的视觉惯例明确列出品类陈词滥调比如 fintech 的蓝色、上箭头、盾牌咖啡的豆子、蒸汽、杯子并把它们列为禁区。然后用「词图」把品牌形容词转译成可画的意象Brand: Harbor — 储蓄 App。形容词: safe, calm, patient。 harbor → 船、锚、灯塔、防波堤、港湾形、潮汐 safe → 盾牌、锁、巢、屋顶、合拢的手、围合 calm → 地平线、静水、圆、慢波 patient→ 年轮、堆叠、涨潮、日出 交叉点H 的横杠是一条平静的水线 / 堆叠的波浪构成上升的条形图 / 港湾形围合出一个负空间庇护着一枚硬币Phase 3 — 概念发散。写出 8–12 个一句话概念横跨不同 mark typemark-types.md 中列出了 wordmark、letterform、pictorial、abstract、mascot、emblem、combination 八类及各自适用场景快速打分后只挑最强的三个去构建。铁律是一句说不清的概念一眼也读不懂。Phase 4 — SVG 几何构建。所有概念先做纯黑版本画布统一viewBox0 0 256 256。svg-construction.md 给出了 AI 直接写 SVG 的完整规范用圆弧表达圆形几何、锚点越少越好、角度对齐 0/15/30/45/60/90°、负空间用fill-ruleevenodd做真孔洞、禁止在成品里用text活字字体依赖会跨机器失效——字标必须手写路径。仓库甚至内置了构造配方例如正圆形切出缺口、圆角方形容器App 图标 22% 圆角、等边三角形、字母 A 的 letterform 构造等。Phase 5 — 测试与打磨至少循环两轮。这是整个技能最硬核的部分全部由脚本驱动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把工匠规则变成机器检查是否含活字/位图/滤镜、颜色数量、锚点复杂度对照参考库的分位数、0.3–3° 的「差一度角度」、小于画布 1/48 的微细节、viewBox 居中与出血。visual-techniques.md 则补充了人类设计师才懂的光学修正——圆角字形的 overshoot超出版面约 1–3%、圆角方形的「骨头效应」、白字在黑底上的「光晕膨胀」irradiation反转版要减细 2–5%、水平笔画视觉上偏粗需减细 5–10%、光学中心略高于几何中心等。仓库在 28 个示例品牌里如实记录了这些细节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注意两个细节一是强制灰度——先谈形状避免颜色引发口味之争二是技能在此停下来给出推荐并等待用户拍板绝不擅自进入下一步。README 里的 28 个示例中有 4 个品牌Hearsay、Brawnhall、Solenne、Roamwheel客户在检查点选了技能推荐之外的方向技能随即按新方向细化——这正是检查点存在的意义。Phase 7 — 全套交付。用户选定方向后才进入色彩1–2 个主色、可复制的 HEX/RGB/CMYK/Pantone、满足 3:1 对比、字体与锁版横排/竖排/纯符号/纯字标、演示板与文件导出。至此完整流程走完。三、多尺寸测试16px 是 Logo 的照妖镜绝大多数 AI 生成物死在小尺寸上——放大看很漂亮缩到浏览器标签页糊成一团。preview_sheet.py 生成的测试表把这件事变成了标准化流程从 16px 起逐级放大的尺寸阶梯、16/32/48px 的像素级放大测试、白/浅灰/黑/品牌色/照片/纹理八种背景、灰度/单色黑/单色白/眯眼模糊/镜像/180° 旋转等「暴露弱点」的处理外加浏览器标签、App 图标、头像圆形裁剪、网页页头、名片五种真实场景以及把候选标放进参考库同尺寸「货架」的 shelf test眯眼判断它是否从竞品中跳出来。测试表自带的检查清单非常直接16–24px 时想法还清晰吗眯眼测试剪影还成立吗单色黑版还扛得住吗反转版看起来是不是更重光晕效应镜像和旋转 180° 有没有意外读法放进 favicon/App 图标测试时符号是否光学居中货架上它与参考标的差别足够大吗这些「拷问」每一项都对应交付前必须想清楚的问题。四、演示板与全套图标导出把「设计」变成「文件」行业相关的样机演示板presentation_board.py按行业预设了样机组合——咖啡行业自动匹配杯子、纸袋、门头招牌、名片、社媒、托特包SaaS 匹配网站、favicon 标签页、App 图标、社媒、贴纸、名片金融匹配银行卡、App 图标、网站……配置写在一个 JSON 规格文件里模板见 presentation-spec.example.json一条命令生成整张演示板--png-dir还能把每页导出为图片方便分享。28 个示例品牌的封面墙可以直观感受这套流程的输出广度——从精品咖啡、奢侈时装、音乐节到 B2B SaaS、金融科技与医疗健康一键导出全套 VI 变体最后一个脚本 export_variants.py 把「交付物」从一份 SVG 扩展成整套品牌资产。看它的 docstring 就明白输出有多完整黑色单色版、白色反转版、品牌单色版可重复指定多个--mono、256×256 居中正方形版头像/社交主图、紧裁 favicon 版、白标圆角砖格 App 图标版--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 图标包。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两个细节非常「工程化」--favicon-source允许为小尺寸单独准备一张简化版图形favicon 应该为 favicon 而设计而不是硬缩主标maskable-512.png把符号限制在 80% 安全区内避免被 Android 自适应图标裁切。此外脚本还会善意提醒master 里若含白色「伪挖空」形状单色版会变成白斑——真正的孔洞必须用fill-ruleevenodd做出来。五、交付前的检查点品牌资产清单流程的收尾不是「图好看」而是一份可逐项勾选的交付标准。仓库里至少有三层检查测试清单testing-checklist.md16px favicon 核心想法不糊、24–32px 一眼可辨、大尺寸曲线顺滑、单色黑/白都成立且反转版不显重、灰度下色块按明度分离、CMYK/Pantone 可复制、眯眼/镜像/旋转无意外读法、letter test每个被改过的字母第一眼还读得出来吗、junction check笔画交汇处无毛刺墨坑、peer test与 3–4 个典范库标并排时同样精致、shelf test、familiarity test、商标检索建议。最终文件清单process.md §7无重复/多余锚点、角度准确、文字全部转轮廓、无活字无位图无滤镜、描边已扩展为填充、形状已合并无接缝、viewBox 紧贴图形并光学居中、颜色为品牌精确值、提供单色与反转版、文件集与约定交付物一致。品牌使用指南brand-guidelines-template.md一页纸讲清楚 logo 的 idea、各版本文件、留白区1×元素高度、随比例缩放、最小尺寸横向版 96px 屏显/25mm 印刷符号 16px/6mm、四套色彩体系HEX/RGB/CMYK/Pantone、字体许可、以及一整页「禁止事项」——不得拉伸压缩、不得随意换色、不得加阴影描边渐变、不得重新排版锁版、不得重新打字复刻字标。这套交付标准的底气来自参考库本身svg_audit.py会把你的锚点数量与 1432 个真实 Logo 的分布做对比方形符号中位数约 53 个锚点p90 ≈ 194复杂的标记会收到「比 95% 的参考 Logo 都复杂」的警告。换句话说它的质量标尺不是「看起来还行」而是「与真实世界的品牌资产同分布」。六、1400 参考库为什么它既当灵感源又当质量锚最后必须提这个库本身——它才是这个技能和普通提示词工程的本质区别。assets/library/下存放着 1432 个真实世界 Logo 的 SVG、按 mark type、technique、geometry、subject、mood、industry 多维人工标注的分类数据catalog.json / classifications.json / stats.json以及一个可视化浏览的画廊gallery.html。它有三种用法研究品类惯例search_library.py --industry payments-fintech --summary会告诉你该品类的常用标记类型、颜色、技法分布——即「该避开什么」学习几何构建--technique negative-space --exemplary --format paths拉出典范文件直接读 SVG 源码规避撞车设计前先--subject bird搜一遍确保你没在重造已有标识。统计口径非常诚实库整体偏向科技品牌developer tools 21%、frameworks 17%、cloud 7%蓝色是「伪装色」约 22% 的 Logo 主色为蓝几何上圆是最大基底26%containment 是最常见技法32%——而这些数据反过来正是svg_audit.py和检查清单判断「你的标够不够出挑」的量化基准。库内所有 Logo 均为各自持有者的商标仅作研究与教学用途不属 MIT 许可见 TRADEMARKS.md技能也明确要求「学习、绝不描摹」。结语回到标题的问题小团队真的能三天交付全套 VI 吗这套流程给出的答案是「可以但有前提」。前提一是把决策前置——先花半天在简报和词图上把「形容词」翻译成「视觉线索」避免 AI 在错误的赛道上画出漂亮的废稿前提二是把测试自动化——16px 像素测试、单色反转、货架测试全部脚本化肉眼审查留给人做判断前提三是接受检查点——概念阶段强制停下来让客户拍板交付阶段按清单逐项验收。当「画标」被 7 个阶段、9 个脚本、1432 个参考样本和一页使用指南包裹起来AI 产出的就不再是装饰而是可以进入印刷、App 商店与品牌手册的正式资产。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考