logo-generator

Logo 生成器

为产品和品牌生成专业的 SVG Logo 和高端展示方案。

工作流程

阶段 1：信息收集

向用户收集必要信息：

1. 产品/品牌名称（必填）
2. 行业/类别（例如：AI、金融科技、设计工具）
3. 核心概念（例如：连接、流动、安全、简约）
4. 设计偏好：
   • 风格：极简/复杂、几何/有机
   • 颜色偏好：单色/特定颜色
   • 氛围：冷峻/温暖、专业/友好

通过简洁的问题收集这些信息。不要一次提出太多问题，以免让用户应接不暇。

阶段 2：模式匹配与 SVG 生成

根据收集到的信息：

1. 基于 references/design_patterns.md 至少生成 6 个设计变体

   • 根据产品特征匹配模式
   • 使用不同的模式类型和组合，确保多样性
   • 同时包含单模式和混合模式构图
   • 调整复杂度，涵盖从简单几何图形到分层构图
   • 每个变体都应明显不同，而不是仅调整参数
   • 说明每个变体的设计思路

2. 为每个变体生成 SVG 代码

   • 使用 viewBox="0 0 100 100"，方便缩放
   • 保持代码简洁且结构清晰
   • 使用 currentColor，灵活控制颜色
   • 添加细腻的动画效果，用于网页展示（可选）

3. 创建交互式展示网页

   • 以网格布局展示所有 6 个或更多 Logo 变体
   • 使用 assets/showcase_template.html 中的模板
   • 添加悬停效果和平滑过渡
   • 为每个变体添加设计思路说明
   • 方便用户比较不同变体

阶段 3：迭代与优化

允许用户提供反馈：

• 选择喜爱的变体（从 6 个或更多缩小至 2–3 个）
• 调整特定参数（尺寸、间距、旋转角度）
• 组合不同变体中的元素
• 更改颜色或添加渐变
• 修改动画或效果
• 沿特定方向探索并生成其他变体

根据反馈进行有针对性的调整。除非用户提出要求，否则不要重新生成所有内容。

阶段 4：生成高端展示方案

用户选定偏好的 Logo 方向后：

1. 将 SVG 导出为 PNG

   • 使用 scripts/svg_to_png.py 将 SVG 转换为 PNG
   • 默认尺寸：1024x1024px
   • 确保背景透明

2. 选择展示风格

   • 查看 references/background_styles.md
   • 根据产品类型和氛围推荐 4 种风格
   • 说明每种风格的适用原因

3. 生成展示图片

   • 配置环境（将 .env.example 复制为 .env，并添加 API 密钥）
   • 使用带有 --all-styles 标志的 scripts/generate_showcase.py
   • 或分别生成指定风格的图片
   • 每张图片都使用 PNG 作为参考，并通过 Nano Banana API 生成

4. 创建最终展示网页

   • 整合 SVG 变体和展示图片
   • 采用专业布局和精细的字体排印
   • 添加所有资源的下载链接

阶段 5：交付

向用户提供：

• 交互式 HTML 展示页面
• SVG 文件（可编辑的矢量格式）
• PNG 导出文件（如有需要，可提供多种尺寸）
• 展示图片（4 种专业背景）

关键设计原则

1. 提供多样选择：至少生成 6 个不同的变体，让用户有真正的选择空间
2. 从简入手：先从基础模式开始，仅在需要时增加复杂度
3. 设计有意义：让视觉元素与产品概念相呼应
4. 可缩放性：确保 Logo 在各种尺寸下都能正常显示
5. 专业品质：达到高端品牌形象标准
6. 灵活性：针对不同使用场景提供多种变体

技术说明

SVG 最佳实践

• 将 viewBox 保持为 0 0 100 100，以确保一致性
• 使用 <g> 标签进行语义化分组
• 使用 <defs> 定义可复用元素
• 使用 <clipPath> 实现遮罩效果
• 条件允许时，优先使用几何图元，而非复杂路径

展示图片生成

generate_showcase.py 脚本需要：

• Python 3.8+
• 依赖项：pip install -r requirements.txt
• .env 文件中的环境变量
• 参考 PNG 图片（从 SVG 导出）

支持使用 Google Gemini 官方 API，也支持通过 GEMINI_API_BASE_URL 使用第三方端点。

可用的背景风格

来自 references/background_styles.md：

提供 12 种专业风格：

深色风格（6 种）：

• void（绝对虚空）- 极简主义，硬核科技
• frosted（磨砂穹顶）- 现代留白，高端产品
• fluid（流体深渊）- AI 原生流动感，动态系统
• spotlight（物理影棚）- 影棚布光，编辑级品质
• analog_liquid（物理流体）- 在纯色基底上呈现金属光泽，创意品牌
• led_matrix（数字硬件）- 数字复古，赛博朋克美学

浅色风格（6 种）：

• editorial（纸本编辑）- 特种纸张，人文品牌
• iridescent（幻彩透砂）- 光学材料，科技硬件
• morning（晨雾光域）- AI 柔和感，亲和力强的产品
• clinical（无菌影棚）- 空间秩序，算法驱动型品牌
• ui_container（容器化界面）- 原生数字产品，SaaS 平台
• swiss_flat（瑞士扁平）- 极致扁平，历久弥新的权威感

每种风格都有其特定的视觉特征和适用场景。详情请参阅参考文档。

常见模式

模式：同心圆点

<svg viewBox="0 0 100 100">
  <g>
    
    <circle cx="50" cy="38" r="3" fill="currentColor"/>
    
  </g>
</svg>

模式：带线条点缀的几何图形

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

模式：节点网络

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

更多模式和组合，请参阅 references/design_patterns.md。

故障排除

SVG 显示异常：检查 viewBox，并确保所有路径均已闭合

PNG 导出失败：确认已安装 cairosvg（pip install cairosvg）

展示生成失败：

• 检查 .env 文件中的 GEMINI_API_KEY 是否有效
• 确认参考 PNG 文件存在且可读
• 检查 API 配额和速率限制

第三方 API 无法使用：确保 GEMINI_API_BASE_URL 格式正确（例如：https://api.example.com/v1）