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:

• Product/Brand Name (required)

• Industry/Category (e.g., AI, fintech, design tools)

• Core Concept (e.g., connection, flow, security, simplicity)

• 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:

-

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

-

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)

-

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:

-

Export SVG to PNG

• Use scripts/svg_to_png.py to convert SVG to PNG

• Default size: 1024x1024px

• Ensure transparent background

-

Select showcase styles

• Review references/background_styles.md

• Recommend 4 styles based on product type and mood

• Explain why each style fits

-

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

-

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

• Provide Variety: Generate at least 6 distinct variants to give users real choices

• Start Simple: Begin with basic patterns, add complexity only when needed

• Meaningful Design: Connect visual elements to product concepts

• Scalability: Ensure logos work at all sizes

• Professional Quality: Match high-end brand identity standards

• 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

<svg viewBox="0 0 100 100">

  <g>

    <!-- Inner ring: 6 dots -->

    <circle cx="50" cy="38" r="3" fill="currentColor"/>

    <!-- Add more dots in circular arrangement -->

  </g>

</svg>

Pattern: Geometric Shape with Line Accent

<svg viewBox="0 0 100 100">

  <polygon points="50,30 70,60 30,60" fill="none" stroke="currentColor" stroke-width="2"/>

  <circle cx="50" cy="30" r="4" fill="currentColor"/>

</svg>

Pattern: Node Network

<svg viewBox="0 0 100 100">

  <path d="M 30 70 Q 50 70, 50 50 T 70 30" stroke="currentColor" stroke-width="2" fill="none"/>

  <circle cx="30" cy="70" r="4" fill="currentColor"/>

  <circle cx="50" cy="50" r="5" fill="currentColor"/>

  <circle cx="70" cy="30" r="4" fill="currentColor"/>

</svg>

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)