logo-generator

Logo Generator

為產品與品牌生成專業 SVG Logo 與高質感展示簡報。

工作流程

階段 1：收集資訊

向使用者收集核心資訊：

1. 產品/品牌名稱（必填）
2. 產業/類別（例如：AI、金融科技、設計工具）
3. 核心概念（例如：連結、流動、安全、極簡）
4. 設計偏好：
   • 風格：極簡/複雜、幾何/有機
   • 色彩偏好：單色/特定色彩
   • 氛圍：冷色/暖色、專業/親切

使用精簡的提問來收集這些資訊，避免一次提出太多問題讓使用者不堪重負。

階段 2：模式比對與 SVG 生成

根據收集到的資訊：

1. 生成至少 6 種設計變體（依據 references/design_patterns.md）

   • 將設計模式與產品特性進行比對匹配
   • 運用不同的模式類型與組合來保持多樣性
   • 包含單一模式與混合模式的構圖
   • 調整複雜度層級（從簡單幾何到多層次構圖）
   • 每種變體都應有明顯區隔，而非僅是微調參數
   • 解釋每種變體的設計理念

2. 為每種變體生成 SVG 程式碼

   • 使用 viewBox="0 0 100 100" 以利彈性縮放
   • 保持程式碼乾淨且結構良好
   • 使用 currentColor 實現靈活的色彩控制
   • 加入微小的動畫效果以利網頁展示（選填）

3. 建立互動式展示網頁

   • 以網格佈局展示全部 6+ 種 Logo 變體
   • 使用 assets/showcase_template.html 的範本
   • 加入懸停效果（hover effects）與順暢轉場
   • 附上每種變體的設計理念
   • 方便使用者輕鬆比較不同變體

階段 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 key）
   • 使用 scripts/generate_showcase.py 並加上 --all-styles 旗標
   • 或分別生成特定風格
   • 每張圖片均以 PNG 作為參考圖，搭配 Nano Banana API 生成

4. 建立最終簡報網頁

   • 結合 SVG 變體與展示圖
   • 採用具備精細字型排版（micro-typography）的專業佈局
   • 附上所有資產的下載連結

階段 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>
    <!-- Inner ring: 6 dots -->
    <circle cx="50" cy="38" r="3" fill="currentColor"/>
    <!-- Add more dots in circular arrangement -->
  </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 並確保所有路徑（paths）均已封閉

PNG 匯出失敗：確認已安裝 cairosvg（pip install cairosvg）

展示圖生成失敗：

• 檢查 .env 檔案中是否包含有效的 GEMINI_API_KEY
• 確認參考 PNG 檔案存在且可讀取
• 檢查 API 配額/速率限制（rate limits）

第三方 API 無法運作：確保 GEMINI_API_BASE_URL 格式正確（例如 https://api.example.com/v1）