logo-generator

Logo Generator

生成专业的 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 脚本完成格式转换
   • 默认尺寸：1024x1024px
   • 确保背景透明

2. 挑选样机风格

   • 参考 references/background_styles.md
   • 根据产品类型和调性，推荐 4 种契合的风格
   • 解释每种风格的推荐理由

3. 生成样机图片

   • 配置环境（复制 .env.example 为 .env 并填写 API Key）
   • 运行 scripts/generate_showcase.py 并附带 --all-styles 参数
   • 或单独生成指定的某种风格
   • 借助 Nano Banana API，以导出 PNG 作为参考图生成样机

4. 打造最终展示网页

   • 整合 SVG 变体与高品质样机图
   • 采用精致的微型排版与专业布局
   • 提供所有相关资产的下载链接

阶段 5：交付

为用户交付：

• 交互式 HTML 展示页面
• SVG 矢量源文件（可编辑格式）
• PNG 导出图（若用户需要可提供多种尺寸）
• 高端样机展示图（包含 4 种专业背景风格）

核心设计原则

1. 提供多样性：至少生成 6 种迥异的方案，给用户真正的选择空间
2. 由简入繁：从基础图案起步，仅在有必要时增加复杂度
3. 寓意明确：将视觉元素与产品核心概念紧密连接
4. 强可扩展性：确保 Logo 在各种尺寸下均清晰可见
5. 专业品质：媲美高端品牌视觉形象标准
6. 高灵活性：提供适配不同应用场景的多种变体

技术说明

SVG 最佳实践

• 始终保持 viewBox 为 0 0 100 100 以确保一致性
• 使用语义化 <g> 标签进行分组
• 充分利用 <defs> 定义可复用元素
• 使用 <clipPath> 实现遮罩裁切效果
• 优先选择几何原语（primitives），尽量少用复杂的 path 路径

样机图片生成

运行 generate_showcase.py 脚本的前提条件：

• Python 3.8+
• 安装依赖：pip install -r requirements.txt
• 在 .env 文件中配置环境变量
• 提供参考 PNG 图片（由 SVG 导出）

同时支持官方 Google Gemini API 及通过 GEMINI_API_BASE_URL 配置的第三方 Endpoint。

可用背景风格

参考 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>
    <!-- 内圈：6个圆点 -->
    <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 属性，并确保所有路径（path）已正确闭合

PNG 导出失败：检查是否已安装 cairosvg（pip install cairosvg）

样机生成失败：

• 检查 .env 文件中是否配置了有效的 GEMINI_API_KEY
• 确认参考 PNG 图片存在且可正常读取
• 检查 API 配额及调用频率限制

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