AI Logo 生成器 Skill 架構解析

原始來源與檔名：AI-Logo-生成器架構解析.md

來源：@op7418 on X — 2026-04-14

NAPKIN | 餐巾纸

餐巾紙公式

夠用的好 Logo = Gemini 生成基礎向量 (SVG) + 模式替換 + AI 生成高級背景 (Nano Banana/WebGL)

一句話

作者開發了一個開源的 AI Skill，巧妙地避開了 AI 畫圖生成位圖的缺陷，改用 LLM 生成可編輯的幾何 SVG 基礎圖形，再疊加高質感的靜態/動態背景，為個人專案快速產出「夠用且專業」的 Logo 視覺資產。

餐巾紙草圖

[ User Input (Project Info) ]
       |
       v
[ LLM (Gemini) SVG Generation ] ---> Generates 6 Variants (Abstract, Geometric, etc.)
       |
  (User Selects One)
       |
       v
[ Presentation Layer ]
  ├─> Nano Banana: 12 High-End Static Backgrounds (Dark/Light)
  └─> WebGL Shaders: 6 Interactive Dynamic Backgrounds
       |
       v
[ Final Deliverables: SVG, PNGs, HTML Showcase ]

ROUND 1: SKELETON | 骨架掃描

• 核心問題: 個人開發者或早期團隊需要 Logo，但請設計師太貴/不划算，而直接用 Midjourney 等圖片 AI 生成的 Logo 又無法控制幾何細節、無法修改、且不是向量圖。
• 核心答案: 建立一個兩階段的 AI 工作流 Skill。第一步用大模型（如 Gemini）撰寫程式碼生成精確的 SVG 向量圖形；第二步用圖片生成模型或 WebGL 渲染高級的展示背景。

ROUND 2: DISSECTION | 血肉解剖

• 生成策略的轉換: 不讓 AI 「畫圖」，而是讓 AI 「寫 SVG 程式碼」。這樣產出的 Logo 是幾何規整的，隨時可以匯入 Figma 加入漸層或陰影進行人工精修。
• Skill 的三步流程:
  1. 資訊收集: 詢問產品名稱、行業、核心概念與設計偏好。
  2. 套用設計模式: AI 根據資訊，套用內建的設計模式庫（如：抽象幾何、字體變化、流動線條），輸出 6 個 SVG 變體供選擇。
  3. 套殼展示 (Mockup): 將扁平的 SVG 疊加在 AI 生成的物理影棚、磨砂玻璃背景，或是 WebGL 互動特效背景上，大幅提升視覺高級感。

ROUND 3: SOUL | 靈魂提取

• 深層洞見: 「工具的降級，體驗的升級」。直接生成點陣圖 Logo 看似先進，實質上是設計工作流的死胡同。作者退回一步，利用 LLM 的代碼能力生成最基礎的 SVG 骨架，保留了向量編輯的自由度，完美詮釋了「AI 生成基礎，人類精修細節」的人機協作典範。

Generative Design Workflow (Architectural Deep Dive)

媒介即控制：為什麼選 SVG 而非 Pixels？

這篇文章點出了目前生成式設計 (Generative Design) 中一個非常關鍵的架構決策：格式的選擇決定了後續的可編輯性。

• Diffusion Models (Midjourney/DALL-E): 輸出像素矩陣 (Pixels)。優勢是光影與質感的細節極其豐富，缺點是不可參數化。若要將圓角從 8px 改為 12px，模型無能為力。
• LLM as a SVG Coder (Gemini/Claude): 輸出 DOM/XML 結構。優勢是絕對精準的幾何控制 (Paths, Radii, Coordinates)，且天然支援響應式 (Responsive) 與設計軟體無縫銜接。

設計模式庫 (Design Pattern Libraries) 的價值

Skill 的成功在於它不是讓 AI 隨機發揮。它在 Prompt 中內建了大量的設計模式庫（例如：抽象字母、物理流體、光點矩陣）。 這種做法將非結構化的設計需求，收斂到了結構化的框架內。這與軟體工程中套用 Design Patterns 是一樣的道理，確保了生成的下限（永遠「乾淨、規整、夠用」），消除了 AI 生成常有的隨機性災難。