# Logo Generator / Logo 生成器
[English](#english) | [中文](#中文)
---
## English
Professional SVG logo generator with high-end showcase presentations. Generate 6+ design variants based on product characteristics, then create stunning showcase images with 12 professional background styles.
### About
This skill was created to solve a common problem: generating professional logos quickly without sacrificing quality. Traditional logo design requires extensive back-and-forth with designers, while AI-generated logos often lack the refinement and presentation quality needed for real products.
**Logo Generator** bridges this gap by:
- Applying proven design principles (extreme simplicity, generous negative space, precise proportions)
- Generating multiple variants to explore different directions
- Creating production-ready showcase images with professional backgrounds
- Providing both SVG (editable) and PNG (ready-to-use) formats
Perfect for:
- **Startups** needing a professional logo quickly
- **Developers** building side projects
- **Designers** exploring initial concepts
- **Product teams** iterating on brand identity
The skill leverages Gemini 3.1 Flash Image Preview (Nano Banana) to generate high-end showcase images that look like they came from a professional design studio.
### Features
- **SVG Logo Generation**: Create geometric logos with dot matrix, line systems, and mixed compositions
- **Design Variety**: Generate 6+ distinct variants per request with different pattern types
- **Professional Showcase**: 12 curated background styles (void, frosted, fluid, spotlight, analog liquid, LED matrix, editorial, iridescent, morning, clinical, UI container, Swiss flat)
- **Nano Banana Integration**: High-end showcase images using Gemini 3.1 Flash Image Preview
- **Interactive Previews**: Beautiful HTML showcases with hover effects and smooth transitions
### Installation
#### Method 1: Automatic Installation (Recommended)
```bash
npx skills add https://github.com/op7418/logo-generator-skill.git
```
This will automatically install the skill to the correct directory.
#### Method 2: Git Clone
```bash
git clone https://github.com/op7418/logo-generator-skill.git ~/.claude/skills/logo-generator
```
#### Method 3: Manual Installation
1. Download this repository
2. Copy the `logo-generator` folder to your Claude Code skills directory:
- **macOS/Linux**: `~/.claude/skills/`
- **Windows**: `%USERPROFILE%\.claude\skills\`
3. Ensure the folder structure contains `SKILL.md` and `README.md`
#### Post-Installation Setup
After installation, set up the required dependencies:
```bash
cd ~/.claude/skills/logo-generator
pip install -r requirements.txt
```
Configure your Gemini API key:
```bash
cp .env.example .env
# Edit .env and add your GEMINI_API_KEY
```
Restart Claude Code and verify by typing `/logo-generator` in the conversation.
### Usage
#### Basic Workflow
1. **Start a logo project**:
```
Generate a logo for my AI product called "DataFlow"
```
2. **Provide context** (the AI will ask):
- Industry/Category (e.g., AI, fintech, design tools)
- Core Concept (e.g., connection, flow, security)
- Design Preferences (minimal/complex, cold/warm)
3. **Review variants**: The AI generates 6+ SVG logo variants with design rationale
4. **Select and refine**: Choose your favorite, request adjustments
5. **Generate showcase**: Create professional presentation images with multiple background styles
#### Example Commands
```
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
```
### Workflow Phases
**Phase 1: Information Gathering**
Collect product name, industry, core concept, and design preferences
**Phase 2: Pattern Matching & SVG Generation**
- Generate 6+ distinct design variants
- Create interactive HTML showcase
- Explain design rationale for each variant
**Phase 3: Iteration & Refinement**
- Select favorite variants
- Adjust parameters (size, spacing, rotation)
- Combine elements from different variants
**Phase 4: High-End Showcase Generation**
- Export SVG to PNG (1024x1024px)
- Select 4 showcase styles based on product type
- Generate showcase images with Nano Banana
- Create final presentation webpage
**Phase 5: Delivery**
- Interactive HTML showcase page
- SVG files (editable vector format)
- PNG exports (various sizes)
- Showcase images (4 professional backgrounds)
### Background Styles
#### Dark Styles (6)
- **The Void** - Absolute black with silver micro noise (hardcore tech)
- **Frosted Horizon** - Titanium gray with organic texture (premium products)
- **Fluid Abyss** - Deep purple with fluid fusion (AI-native)
- **Studio Spotlight** - Carbon gray with editorial lighting (magazine quality)
- **Analog Liquid** - Metallic shimmer on solid color base (creative brands)
- **LED Matrix** - Digital retro with glowing dots (cyberpunk)
#### Light Styles (6)
- **Editorial Paper** - Off-white with paper texture (humanistic brands)
- **Iridescent Frost** - Silver-gray with holographic hints (tech hardware)
- **Morning Aura** - Warm ivory with pastel colors (approachable AI)
- **Clinical Studio** - Pure white with geometric shadows (algorithm-driven)
- **UI Container** - Frosted glass container effect (SaaS platforms)
- **Swiss Flat** - Pure solid color, zero effects (timeless authority)
### Design Principles
1. **Extreme Simplicity** - 1-2 core elements maximum
2. **Generous Negative Space** - At least 40-50% empty canvas
3. **Precise Proportions** - Line weights 2.5-4px, proper spacing
4. **Visual Tension** - Intentional asymmetry creates interest
5. **Restraint Over Decoration** - Every element must justify its existence
6. **Single Focal Point** - Clear visual hierarchy
### File Structure
```
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
```
### Requirements
- Python 3.8+
- Dependencies: `google-genai`, `python-dotenv`, `cairosvg`, `Pillow`
- Gemini API key (for showcase generation)
### API Configuration
#### Official Google Gemini API
```env
GEMINI_API_KEY=your_api_key_here
GEMINI_MODEL=gemini-3.1-flash-image-preview
```
#### Third-Party API Endpoint
```env
GEMINI_API_KEY=your_api_key_here
GEMINI_API_BASE_URL=https://api.example.com/v1
GEMINI_MODEL=gemini-3.1-flash-image-preview
```
### License
MIT License - feel free to use for personal or commercial projects
### Credits
- Design patterns inspired by modern brand identity systems
- Showcase styles curated from high-end design presentations
- Powered by Gemini 3.1 Flash Image Preview (Nano Banana)
### Contributing
Contributions welcome! Please feel free to submit issues or pull requests.
---
## 中文
专业的 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：自动安装（推荐）
```bash
npx skills add https://github.com/op7418/logo-generator-skill.git
```
这将自动将技能安装到正确的目录。
#### 方法 2：Git 克隆
```bash
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`
#### 安装后配置
安装完成后，设置所需的依赖：
```bash
cd ~/.claude/skills/logo-generator
pip install -r requirements.txt
```
配置 Gemini API 密钥：
```bash
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
```env
GEMINI_API_KEY=your_api_key_here
GEMINI_MODEL=gemini-3.1-flash-image-preview
```
#### 第三方 API 端点
```env
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。