op7418/logo-generator-skill

# Logo Generator / Logo 生成器  [英文](#english) | [中文](#中文) ## 英文 专业的 SVG Logo 生成器，提供高端展示效果。根据产品特性生成 6 种以上的设计变体，然后使用 12 种专业背景风格创建令人惊叹的展示图像。 ### 关于 创建此技能是为了解决一个常见问题：在不牺牲质量的情况下快速生成专业 Logo。传统的 Logo 设计需要与设计师进行大量反复沟通，而 AI 生成的 Logo 通常缺乏真实产品所需的精致度和展示质量。 **Logo Generator** 通过以下方式弥合了这一差距： - 应用经过验证的设计原则（极致简洁、大量留白、精准比例） - 生成多个变体以探索不同方向 - 创建具有专业背景的、可用于生产的展示图像 - 提供 SVG（可编辑）和 PNG（即用型）两种格式 非常适合： - 需要快速获得专业 Logo 的**初创公司** - 构建 side project 的**开发者** - 探索初始概念的**设计师** - 迭代品牌标识的**产品团队** 该技能利用 Gemini 3.1 Flash Image Preview (Nano Banana) 生成高端展示图像，看起来就像出自专业设计工作室之手。 ### 功能 - **SVG Logo 生成**：创建具有点阵、线条系统和混合构图的几何 Logo - **设计多样性**：根据不同的模式类型，每次请求生成 6 种以上的独特变体 - **专业展示**：12 种精选背景风格（虚空、磨砂、流体、聚光灯、模拟液体、LED 矩阵、编辑、幻彩、晨光、临床、UI 容器、瑞士平面） - **Nano Banana 集成**：使用 Gemini 3.1 Flash Image Preview 生成高端展示图像 - **交互式预览**：带有悬停效果和平滑过渡的精美 HTML 展示 ### 安装 #### 方法 1：自动安装（推荐） ``` npx skills add https://github.com/op7418/logo-generator-skill.git ``` 这将自动把该技能安装到正确的目录中。 #### 方法 2：Git Clone ``` git clone https://github.com/op7418/logo-generator-skill.git ~/.claude/skills/logo-generator ``` #### 方法 3：手动安装 1. 下载此仓库 2. 将 `logo-generator` 文件夹复制到您的 Claude Code 技能目录： - **macOS/Linux**: `~/.claude/skills/` - **Windows**: `%USERPROFILE%\.claude\skills\` 3. 确保文件夹结构包含 `SKILL.md` 和 `README.md` #### 安装后设置 安装完成后，设置所需的依赖项： ``` cd ~/.claude/skills/logo-generator pip install -r requirements.txt ``` 配置您的 Gemini API key： ``` cp .env.example .env # 编辑 .env 并添加你的 GEMINI_API_KEY ``` 重启 Claude Code，并在对话中输入 `/logo-generator` 进行验证。 ### 用法 #### 基本工作流 1. **启动一个 Logo 项目**： 为我的名为 "DataFlow" 的 AI 产品生成一个 Logo 2. **提供上下文**（AI 会询问）： - 行业/类别（例如：AI、金融科技、设计工具） - 核心概念（例如：连接、流动、安全） - 设计偏好（极简/复杂、冷色调/暖色调） 3. **查看变体**：AI 会生成 6 种以上的 SVG Logo 变体并附带设计理念 4. **选择和优化**：选择您最喜欢的方案，并要求进行调整 5. **生成展示**：使用多种背景风格创建专业的展示图像 #### 示例命令 ``` Create a logo for a blockchain security platform Generate 6 logo variants for "CloudSync" - a file sync tool Show me the logo in different background styles Export the logo as PNG at 2048x2048 ``` ### 工作流阶段 **阶段 1：信息收集** 收集产品名称、行业、核心概念和设计偏好 **阶段 2：模式匹配与 SVG 生成** - 生成 6 种以上独特的设计变体 - 创建交互式 HTML 展示 - 解释每个变体的设计理念 **阶段 3：迭代与优化** - 选择最喜欢的变体 - 调整参数（大小、间距、旋转） - 组合来自不同变体的元素 **阶段 4：高端展示生成** - 将 SVG 导出为 PNG (1024x1024px) - 根据产品类型选择 4 种展示风格 - 使用 Nano Banana 生成展示图像 - 创建最终的演示网页 **阶段 5：交付** - 交互式 HTML 展示页面 - SVG 文件（可编辑矢量格式） - PNG 导出（各种尺寸） - 展示图像（4 种专业背景） ### 背景风格 #### 深色风格 (6) - **虚空** - 纯黑搭配银色微小噪点（硬核科技） - **磨砂地平线** - 钛灰色搭配有机纹理（高端产品） - **流体深渊** - 深紫色搭配流体融合（AI 原生） - **工作室聚光灯** - 碳灰色搭配编辑照明（杂志级品质） - **模拟液体** - 纯色底色上的金属微光（创意品牌） - **LED 矩阵** - 带有发光点的数字复古风（赛博朋克） #### 浅色风格 (6) - **编辑纸张** - 米白色搭配纸张纹理（人文品牌） - **幻彩霜雾** - 银灰色搭配全息暗示（科技硬件） - **晨间光环** - 暖象牙色搭配柔和色彩（平易近人的 AI） - **临床工作室** - 纯白搭配几何阴影（算法驱动） - **UI 容器** - 磨砂玻璃容器效果（SaaS 平台） - **瑞士平面** - 纯色，零效果（永恒权威） ### 设计原则 1. **极致简洁** - 最多 1-2 个核心元素 2. **大量留白** - 至少 40-50% 的空白画布 3. **精准比例** - 线条粗细 2.5-4px，合适的间距 4. **视觉张力** - 刻意的不对称创造趣味 5. **克制而非装饰** - 每个元素都必须证明其存在的价值 6. **单一焦点** - 清晰的视觉层级 ### 文件结构 ``` logo-generator/ ├── SKILL.md # Skill definition and workflow ├── README.md # This file ├── requirements.txt # Python dependencies ├── .env.example # Environment variables template ├── scripts/ │ ├── svg_to_png.py # SVG to PNG converter │ └── generate_showcase.py # Showcase image generator ├── references/ │ ├── design_patterns.md # Comprehensive design guide │ ├── background_styles.md # Background style specifications │ └── webgl_backgrounds.md # WebGL dynamic backgrounds └── assets/ ├── showcase_template.html # HTML template for showcases └── background_library.html # Interactive WebGL backgrounds ``` ### 要求 - Python 3.8+ - 依赖项：`google-genai`, `python-dotenv`, `cairosvg`, `Pillow` - Gemini API key（用于生成展示图像） ### API 配置 #### 官方 Google Gemini API ``` GEMINI_API_KEY=your_api_key_here GEMINI_MODEL=gemini-3.1-flash-image-preview ``` #### 第三方 API 端点 ``` GEMINI_API_KEY=your_api_key_here GEMINI_API_BASE_URL=https://api.example.com/v1 GEMINI_MODEL=gemini-3.1-flash-image-preview ``` ### 许可证 MIT License - 可自由用于个人或商业项目 ## 中文 专业的 SVG Logo 生成器，配备高端展示效果。基于产品特性生成 6+ 个设计变体，并使用 12 种专业背景风格创建精美的展示图。 ### 关于本项目 这个技能的诞生源于一个常见痛点：如何在不牺牲质量的前提下快速生成专业 Logo。传统设计流程需要与设计师反复沟通，而 AI 生成的 Logo 往往缺乏精致度和展示效果。 **Logo Generator** 通过以下方式解决这个问题： - 应用经过验证的设计原则（极致简洁、慷慨留白、精准比例） - 生成多个变体以探索不同方向 - 创建可直接使用的专业展示图 - 提供 SVG（可编辑）和 PNG（即用）两种格式 适用场景： - **创业公司** 需要快速获得专业 Logo - **开发者** 构建个人项目 - **设计师** 探索初期概念 - **产品团队** 迭代品牌形象 本技能利用 Gemini 3.1 Flash Image Preview (Nano Banana) 生成高端展示图，效果媲美专业设计工作室。 ### 功能特性 - **SVG Logo 生成**：创建几何 Logo，支持点阵、线条系统和混合构图 - **设计多样性**：每次请求生成 6+ 个不同范式的设计变体 - **专业展示**：12 种精选背景风格（绝对虚空、磨砂穹顶、流体深渊、聚光灯、物理流体、LED 矩阵、编辑纸张、幻彩透砂、晨曦光晕、临床工作室、UI 容器、瑞士扁平） - **Nano Banana 集成**：使用 Gemini 3.1 Flash Image Preview 生成高端展示图 - **交互式预览**：精美的 HTML 展示页面，带悬停效果和流畅过渡 ### 安装方式 #### 方法 1：自动安装（推荐） ``` npx skills add https://github.com/op7418/logo-generator-skill.git ``` 这将自动将技能安装到正确的目录。 #### 方法 2：Git 克隆 ``` git clone https://github.com/op7418/logo-generator-skill.git ~/.claude/skills/logo-generator ``` #### 方法 3：手动安装 1. 下载本仓库 2. 将 `logo-generator` 文件夹复制到 Claude Code 技能目录： - **macOS/Linux**：`~/.claude/skills/` - **Windows**：`%USERPROFILE%\.claude\skills\` 3. 确保文件夹结构包含 `SKILL.md` 和 `README.md` #### 安装后配置 安装完成后，设置所需的依赖： ``` cd ~/.claude/skills/logo-generator pip install -r requirements.txt ``` 配置 Gemini API 密钥： ``` cp .env.example .env # 编辑 .env 文件并添加你的 GEMINI_API_KEY ``` 重启 Claude Code 并在对话中输入 `/logo-generator` 验证安装成功。 ### 使用方法 #### 基本工作流 1. **启动 Logo 项目**： 为我的 AI 产品 "DataFlow" 生成一个 Logo 2. **提供上下文**（AI 会询问）： - 行业/类别（如：AI、金融科技、设计工具） - 核心概念（如：连接、流动、安全） - 设计偏好（极简/复杂、冷色/暖色） 3. **查看变体**：AI 生成 6+ 个 SVG Logo 变体并说明设计理念 4. **选择和优化**：选择你喜欢的方案，请求调整 5. **生成展示**：创建多种背景风格的专业展示图 #### 示例命令 ``` 为区块链安全平台创建一个 Logo 为 "CloudSync" 文件同步工具生成 6 个 Logo 变体 展示不同背景风格下的 Logo 效果 导出 2048x2048 的 PNG 格式 Logo ``` ### 工作流程阶段 **阶段 1：信息收集** 收集产品名称、行业、核心概念和设计偏好 **阶段 2：范式匹配与 SVG 生成** - 生成 6+ 个不同的设计变体 - 创建交互式 HTML 展示页面 - 解释每个变体的设计理念 **阶段 3：迭代与优化** - 选择喜欢的变体 - 调整参数（大小、间距、旋转） - 组合不同变体的元素 **阶段 4：高端展示图生成** - 导出 SVG 为 PNG（1024x1024px） - 根据产品类型选择 4 种展示风格 - 使用 Nano Banana 生成展示图 - 创建最终展示网页 **阶段 5：交付** - 交互式 HTML 展示页面 - SVG 文件（可编辑矢量格式） - PNG 导出（多种尺寸） - 展示图（4 种专业背景） ### 背景风格 #### 深色风格（6 种） - **绝对虚空** - 纯黑 + 银色微噪点（硬核科技） - **磨砂穹顶** - 钛灰 + 有机纹理（高端产品） - **流体深渊** - 深紫 + 流体融合（AI 原生） - **聚光灯** - 碳灰 + 编辑光效（杂志质感） - **物理流体** - 纯色底 + 金属质感（创意品牌） - **LED 矩阵** - 数字复古 + 发光点阵（赛博朋克） #### 浅色风格（6 种） - **编辑纸张** - 米白 + 纸张纹理（人文品牌） - **幻彩透砂** - 银灰 + 全息微光（科技硬件） - **晨曦光晕** - 暖象牙 + 柔和色彩（亲和 AI） - **临床工作室** - 纯白 + 几何阴影（算法驱动） - **UI 容器** - 磨砂玻璃容器效果（SaaS 平台） - **瑞士扁平** - 纯色无效果（永恒权威） ### 设计原则 1. **极致简洁** - 最多 1-2 个核心元素 2. **慷慨留白** - 至少 40-50% 空白画布 3. **精准比例** - 线条粗细 2.5-4px，合理间距 4. **视觉张力** - 有意的不对称创造趣味 5. **克制而非装饰** - 每个元素必须证明其存在价值 6. **单一焦点** - 清晰的视觉层级 ### 文件结构 ``` logo-generator/ ├── SKILL.md # Skill 定义和工作流程 ├── README.md # 本文件 ├── requirements.txt # Python 依赖 ├── .env.example # 环境变量模板 ├── scripts/ │ ├── svg_to_png.py # SVG 转 PNG 工具 │ └── generate_showcase.py # 展示图生成器 ├── references/ │ ├── design_patterns.md # 综合设计指南 │ ├── background_styles.md # 背景风格规范 │ └── webgl_backgrounds.md # WebGL 动态背景 └── assets/ ├── showcase_template.html # 展示页面模板 └── background_library.html # 交互式 WebGL 背景库 ``` ### 系统要求 - Python 3.8+ - 依赖：`google-genai`、`python-dotenv`、`cairosvg`、`Pillow` - Gemini API 密钥（用于展示图生成） ### API 配置 #### 官方 Google Gemini API ``` GEMINI_API_KEY=your_api_key_here GEMINI_MODEL=gemini-3.1-flash-image-preview ``` #### 第三方 API 端点 ``` GEMINI_API_KEY=your_api_key_here GEMINI_API_BASE_URL=https://api.example.com/v1 GEMINI_MODEL=gemini-3.1-flash-image-preview ``` ### 开源协议 MIT License - 可自由用于个人或商业项目 ### 致谢 - 设计范式灵感来自现代品牌识别系统 - 展示风格精选自高端设计展示 - 由 Gemini 3.1 Flash Image Preview (Nano Banana) 驱动 ### 贡献 欢迎贡献！请随时提交 issue 或 pull request。

标签：AI生成, Gemini, Logo生成器, SVG, 后端开发, 图像生成, 多模态安全, 设计工具, 逆向工具