Logo Design
像專業品牌識別設計師一樣設計標誌：先了解品牌，探索真正不同的概念，然後將一個概念精煉為可生產、可縮放的標誌。輸出為手寫 SVG，具有精確、可編輯且不依賴解析度的特性。
基本規則
- 原創性。 絕不複製、描繪或緊密模仿真實公司的標誌、吉祥物或商標，即使被要求「讓它看起來像 X」。你可以借用一般風格（例如「像現代科技品牌一樣的扁平幾何風格」），但標誌本身必須是新的。如果使用者提供他們自己的現有標誌，你可以進行精煉或重新繪製。
- 向量優先。 每個標誌都是基於簡單幾何形狀（
rect、circle、path、polygon）構建的 SVG。核心標誌中不得嵌入點陣圖像、不得使用濾鏡或模糊效果，最終交付檔案中不得使用外部字型（請參閱「字體排印學」）。 - 可單色運作。 一個依賴漸層才能運作的標誌是不完整的。務必驗證單色版本。
- 小尺寸可運作。 在 16 px 和 32 px 下檢查標誌。如果變得模糊不清，請簡化它。
工作流程
1. 簡報（只詢問你無法推斷的資訊）
從對話中或透過一系列簡短問題收集以下資訊：
| 項目 | 為何重要 |
|---|---|
| 名稱（確切拼寫、大小寫）和標語（如果有的話） | 驅動文字商標和鎖定組合 |
| 該企業做什麼、服務對象 | 概念來源 |
| 3 個個性形容詞（例如 溫暖、手工、值得信賴） | 驅動形狀語言、字體、顏色 |
| 偏好 / 禁止的顏色 | 限制條件 |
| 將在何處使用（招牌、應用程式圖示、包裝、社群頭像、刺繡） | 驅動細節程度 |
| 如果有的話，偏好的標誌類型（見下文） | 縮小探索範圍 |
| 他們喜歡或不喜歡的標誌，以及原因 | 品味校準（不要複製它們） |
如果使用者提供的資訊很少，則做出合理的假設，用一兩行文字說明，然後繼續進行。不要因為問卷調查而卡住。
2. 概念探索（3–4 個概念）
產出 3–4 個意義上不同的概念，而不是僅更換顏色。在以下這些軸線上進行變化：
- 標誌類型：文字商標、字母組合/字母標記、圖形標記、抽象標記、徽章/徽章、組合標記（符號 + 文字商標）。
- 理念：具象（他們做什麼）、隱喻（他們代表什麼）、字體排印（玩弄字母形狀）、負空間技巧。
- 形狀語言：幾何 vs. 有機、圓角 vs. 銳利、厚重 vs. 輕盈。
針對每個概念，寫一句話的設計理念：這個想法以及它為何符合簡報。參閱 references/concepts.md 以了解概念產出技巧。
將概念並排呈現（一個 HTML 頁面或單一複合 SVG），讓使用者可以比較它們，然後詢問要發展哪個方向。如果使用者要求一個單一的最終標誌而沒有選項，則自己挑選最強的概念並說明原因。
3. 精煉
針對被選中的概念：
- 在網格上建構。 符號使用像
0 0 512 512這樣的 viewBox；將關鍵點對齊整數或一致的模組（例如 8 或 16 的倍數）。 - 光學校正。 圓形和點在平坦邊緣處稍微超出（約 1–3 %）以達到視覺上相同的大小；水平筆畫看起來比相同寬度的垂直筆畫更粗，因此稍微細化它們。
- 簡化。 移除所有在 32 px 下無法保留或無法傳達理念的元素。
- 平衡鎖定組合。 符號高度通常約為大寫字母高度的 1.5–2.5 倍（針對水平鎖定組合）；符號與文字商標之間的間距約為關鍵字母筆畫寬度的 0.5–1 倍。進行光學置中，而非數學置中。
- 顏色。 從黑色開始。僅在形狀確定後才添加顏色。參閱
references/color-and-type.md。
4. 驗證
執行預覽腳本，然後查看 PNG 圖檔（使用「Read」工具查看圖片）並修正你看到的問題：
node <skill-dir>/scripts/preview.mjs path/to/logo.svg [more.svg ...] --out previews/
它會在白色、黑色及中間色調背景上，以 16、32、64、128 和 512 px 渲染每個 SVG，並產生一張總覽圖 previews/<name>-sheet.png。檢查：
- 在 16 px 和 32 px 下可讀且可辨識
- 在淺色和深色背景上都能運作（如果需要，提供反白版本）
- 單色版本依然穩固
- 沒有意外的形狀或不需要的解讀（旋轉它、瞇著眼看它）
- 不像任何知名的現有標誌
- 文字拼寫完全按照給定的內容
5. 交付
產出一個小型、命名良好的套件（根據要求進行調整）：
<brand>-logo/
<brand>-primary.svg # 全彩組合標誌 / 主要鎖定組合
<brand>-horizontal.svg # 符號在左，文字商標在右
<brand>-stacked.svg # 符號在文字商標上方
<brand>-symbol.svg # 僅符號（頭像、應用程式圖示）
<brand>-wordmark.svg # 僅名稱
<brand>-mono-black.svg
<brand>-mono-white.svg
<brand>-favicon.svg # 簡化符號，方形 viewBox
png/ # 從 preview.mjs 匯出（例如 512, 1024）
brand-sheet.html # 單一頁面：標誌、留白區域、顏色（十六進位/RGB/CMYK 近似值）、字體
scripts/export.mjs 將任何 SVG 以選定尺寸渲染為 PNG：
node <skill-dir>/scripts/export.mjs logo.svg --sizes 512,1024 --out png/
最後附上一段簡短說明：概念設計理念、包含十六進位值的色板、所使用的字體，以及建議的留白區域與最小尺寸。
SVG 撰寫規則
- 根元素：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="…">，主檔案中不要有固定的width/height（僅在需要匯出的情況下才添加）。 - 包含
<title>並帶有品牌名稱以利無障礙存取。 - 在形狀上使用
fill；在最終檔案中盡量避免使用筆畫（透過繪製輪廓路徑的方式，在腦中將筆畫轉換為填充輪廓），因為在某些工具中筆畫的縮放行為不可預測。在探索階段使用筆畫是可以的。 - 確保 ID 唯一且加上前綴（例如
acme-grad-1），以便多個標誌可以嵌入在同一頁面中。 - 顏色僅定義一次：將品牌顏色放入帶有類別的
<style>中，或重複使用精確的十六進位值。主檔案中不要使用currentColor；如果使用者想要可跟隨主題的圖示，請在單獨的圖示變體中使用currentColor。 - 座標四捨五入至最多小數點後 2 位。
- 不得使用
<image>、<foreignObject>及腳本。
字體排印學
SVG 中的文字取決於檢視者是否擁有該字體，因此：
- 探索階段：使用穩健的字體堆疊的
<text>是可以的（font-family="Inter, Helvetica, Arial, sans-serif"），並且你可以在 HTML 比較頁面中載入 Google Fonts。 - 最終文字商標：偏好將字母繪製為路徑（自訂字體很適合標誌），或者如果工具有提供（例如
fonttools/opentype.js— 請參閱scripts/text-to-path.mjs），則將文字轉換為輪廓。如果兩者都不可行，則保留<text>，但在交付說明中註明確切字體名稱與授權，並隨附一個開源授權的字體（來自 Google Fonts 的 SIL OFL 字體是安全的預設選擇）。 - 透過目測調整字距（tracking）；全大寫的文字商標通常需要 +2 % 到 +10 % 的字距，小寫通常需要 0 到 −2 %。為難以處理的字母對（AV、To、LT、ry）進行手動字距調整。
應避免的常見失敗模式
- 概念只是同一想法換四種顏色。
- 剪貼畫般的具象主義（咖啡館用咖啡杯，房地產商用房子）且沒有任何巧思。如果要走具象路線，找到一個意想不到的角度或巧妙的負空間。
- 太多細節、漸層、投影或細微的髮絲線。
- 徽章內文字太小，在實際尺寸下無法閱讀。
- 除非使用者要求，否則使用容易過時的流行效果。
- 不平衡：一個厚重的符號旁邊配一個纖細的文字商標（或反過來）。匹配筆畫粗細。
參考資料
references/concepts.md— 概念產出技巧與標誌類型指南references/color-and-type.md— 色彩心理學、色板建構、對比、字體搭配examples/— 展示結構與慣例的 SVG 範例（虛構品牌）