Agent Skills

logo-generator

logo-generator-skill

Instalação
CLI
npx skills add https://github.com/op7418/logo-generator-skill --skill logo-generator

Instale esta skill com a CLI e comece a usar o fluxo de trabalho SKILL.md em seu espaço de trabalho.

Última atualização em 4/22/2026

Logo Generator / Logo 生成器

Showcase

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

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

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:

cd ~/.claude/skills/logo-generator
pip install -r requirements.txt

Configure your Gemini API key:

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

GEMINI_API_KEY=your_api_key_here
GEMINI_MODEL=gemini-3.1-flash-image-preview

Third-Party API Endpoint

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：自动安装（推荐）

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。