logo-generator
Generate professional SVG logos and high-end showcase images. Use when the user wants to: (1) Create a logo or icon for their product/brand, (2) Generate logo design concepts based on product information, (3) Create professional logo showcase presentations with multiple background styles, (4) Export
By op7418 · 3,092 installs
npx skills add op7418/logo-generator-skill --skill logo-generator
Source repository · Upstream listing
Logo Generator
Generate professional SVG logos and high end showcase presentations for products and brands.
Workflow
Phase 1: Information Gathering
Collect essential information from the user:
1. Product/Brand Name (required)
2. Industry/Category (e.g., AI, fintech, design tools)
3. Core Concept (e.g., connection, flow, security, simplicity)
4. Design Preferences :
Style: minimal/complex, geometric/organic
Color preference: monochrome/specific colors
Mood: cold/warm, professional/friendly
Ask concise questions to gather this information. Don't overwhelm the user with too many questions at once.
Phase 2: Pattern Matching & SVG Generation
Based on the gathered information:
1. Generate at least 6 design variants based on references/design patterns.md
Match patterns to product characteristics
Use different pattern types and combinations for diversity
Include both single pattern and mixed pattern compositions
Vary complexity levels (simple geometric to layered compositions)
Each variant should feel distinctly different, not just parameter tweaks
Explain the design rationale for each variant
2. Generate SVG code for each variant
Use viewBox="0 0 100 100" for easy scaling
Keep code clean and well structured
Use currentColor for flexible color control
Add subtle animations for web display (optional)
3. Create interactive showcase webpage
Display all 6+ logo variants in a grid layout
Use the template from assets/showcase template.html
Include hover effects and smooth transitions
Add design rationale for each variant
Allow easy comparison between variants
Phase 3: Iteration & Refinement
Allow user to provide feedback:
Select favorite variants (narrow down from 6+ to 2 3)
Adjust specific parameters (size, spacing, rotation)
Combine elements from different variants
Change colors or add gradients
Modify animations or effects
Generate additional variants exploring specific directions
Make targeted adjustments based on feedback. Don't regenerate everything unless requested.
Phase 4: High End Showcase Generation
Once the user selects a preferred logo direction:
1. Export SVG to PNG
Use scripts/svg to png.py to convert SVG to PNG
Default size: 1024x1024px
Ensure transparent background
2. Select showcase styles
Review references/background styles.md
Recommend 4 styles based on product type and mood
Explain why each style fits
3. Generate showcase images
Set up environment (copy .env.example to .env , add API key)
Use scripts/generate showcase.py with all styles flag
Or generate specific styles individually
Each image uses the PNG as reference with Nano Banana API
4. Create final presentation webpage
Combine SVG variants and showcase images
Use professional layout with micro typography
Include download links for all assets
Phase 5: Delivery
Provide the user with:
Interactive HTML showcase page
SVG files (editable vector format)
PNG exports (various sizes if requested)
Showcase images (4 professional backgrounds)
Key Design Principles
1. Provide Variety : Generate at least 6 distinct variants to give users real choices
2. Start Simple : Begin with basic patterns, add complexity only when needed
3. Meaningful Design : Connect visual elements to product concepts
4. Scalability : Ensure logos work at all sizes
5. Professional Quality : Match high end brand identity standards
6. Flexibility : Provide multiple variants for different use cases
Technical Notes
SVG Best Practices
Keep viewBox at 0 0 100 100 for consistency
Use semantic grouping with <g tags
Leverage <defs for reusable elements
Use <clipPath for masking effects
Prefer geometric primitives over complex paths when possible
Showcase Image Generation
The generate showcase.py script requires:
Python 3.8+
Dependencies: pip install r requirements.txt
Environment variables in .env file
Reference PNG image (exported from SVG)
Supports both official Google Gemini API and third party endpoints via GEMINI API BASE URL .
Available Background Styles
From references/background styles.md :
12 Professional Styles Available :
Dark Styles (6):
void (绝对虚空) Absolute minimalism, hardcore tech
frosted (磨砂穹顶) Modern breathing space, premium products
fluid (流体深渊) AI native fluidity, dynamic systems
spotlight (物理影棚) Studio lighting, editorial quality
analog liquid (物理流体) Metallic shimmer on solid color base, creative brands
led matrix (数字硬件) Digital retro, cyberpunk aesthetics
Light Styles (6):
editorial (纸本编辑) Specialty paper, humanistic brands
iridescent (幻彩透砂) Optical materials, tech hardware
morning (晨雾光域) AI softness, approachable products
clinical (无菌影棚) Spatial order, algorithm driven brands
ui container (容器化界面) Digital product native, SaaS platforms
swiss flat (瑞士扁平) Absolute flatness, timeless authority
Each style has specific visual characteristics and suitable use cases. Consult the reference document for details.
Common Patterns
Pattern: Concentric Circle Dots
Pattern: Geometric Shape with Line Accent
Pattern: Node Network
For more patterns and combinations, see references/design patterns.md .
Troubleshooting
SVG not displaying correctly : Check viewBox and ensure all paths are closed
PNG export fails : Verify cairosvg is installed ( pip install cairosvg )
Showcase generation fails :
Check .env file has valid GEMINI API KEY
Verify reference PNG exists and is readable
Check API quota/rate limits
Third party API not working : Ensure GEMINI API BASE URL is correctly formatted (e.g., https://api.example.com/v1 )