开发者利用Gemini的SVG生成能力创建了一个三步生成Logo的Skill,旨在为小项目提供快速、专业且可编辑的设计解决方案,降低设计门槛。 ## 1. Logo生成Skill的核心功能 - **三步流程**:通过信息收集、生成6+设计变体、创建高级展示图,快速产出专业Logo。 - **SVG优势**:相比AI生成的位图,SVG可编辑、无损缩放,支持后续精细调整(如渐变色、阴影等)。 ## 2. 设计变体与交互选择 - **多风格选项**:基于行业、核心概念等输入生成至少6种风格(如“二进制指令”“流动智能”),用户可替换不满意的设计。 - **动态对比**:生成交互式网页便于预览和选择,支持实时反馈修改。 ## 3. 专业展示图的两种方案 - **静态背景**:提供12种风格(如“流体深渊”“LED矩阵”),适配不同场景(AI产品选深色系,硬件选科技感)。 - **动态WebGL背景**:6种交互式背景(如“流体扭曲”“螺旋漩涡”),支持鼠标交互、无限缩放,可直接嵌入网页。 ## 4. 使用场景与开源信息 - **广泛适用**:覆盖开源项目图标、创业品牌早期设计、设计师灵感辅助等场景。 - **开源工具**:Skill代码公开于GitHub,支持通过AI助手安装,强调“快速可用”而非替代专业设计。 ## 5. AI生成与人工精修的协作逻辑 - **局限性规避**:AI画图难以控制细节且不可编辑,SVG基础+人工调整(如Figma精修)实现可控性与专业效果。 - **核心价值**:降低设计门槛,提供“够用的好Logo”,类似Canva的定位。
我做了个Skill:让AI 帮你生成Logo 和图标
2026-04-16 08:45

我做了个Skill:让AI 帮你生成Logo 和图标

本文来自微信公众号: 歸藏的AI工具箱 ,作者:歸藏的 AI 工具箱,原文标题:《我做了个 Skill:让 AI 帮你生成 Logo 和图标》


前几天想给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的设计能力。

AI创投日报频道: 前沿科技
本内容由作者授权发布,观点仅代表作者本人,不代表虎嗅立场。
如对本稿件有异议或投诉,请联系 tougao@huxiu.com。
正在改变与想要改变世界的人,都在 虎嗅APP