標誌 (Logo)
設計一個能「識別」而非「解釋」的標誌:一個清晰的概念,以乾淨的 SVG 構建,並在 16 px 和單色下驗證,最終交付的檔案能讓開發人員和印刷人員都能使用。輸出成果是一個推薦標誌,以及證明其有效性的證據。
使用時機
- 為公司、產品或專案設計全新的標誌、字標、字首標誌、字母組合、符號或徽章。
- 設計應用程式圖示、favicon 或社交頭貼(從零開始或基於現有標誌)。
- 對現有標誌進行評論、比較或翻新(例如「縮小時看起來很糟」、「感覺過時了」)。
- 為已存在的標誌產出變體和一份簡短的使用指南。
不應使用時機
- 品牌色彩、字型、符記、語調、
DESIGN.md、「顯示網站的外觀」:請使用lll:design-system。 - 產品 UI 內的畫面、元件、插圖:請使用
lll:ui。 - 為企業命名、定位、商標建議:請使用
lll:business;商標搜尋需要專業人士。 - 社群貼文、活動、廣告創意:請使用
lll:marketing。 - 照片、影片或 3D 品牌素材:超出範圍,請直接說明。
模式
引導模式 (預設)。 透過對話進行摘要、概念發想、評論和建議。概念 SVG 會在倉庫外的草稿資料夾中繪製、渲染、檢視並展示(貼上 SVG 或作為圖片);不會寫入專案中。不使用子代理。在概念檢查點處停止。
完整模式。 只有在業主選擇方向並要求完整套件(或要求端到端執行)時才會啟用。將最終檔案寫入專案的品牌資料夾(brand/logo/,或專案已使用的資料夾):主檔、變體、favicon 與應用程式圖示集、測試表、迷你指南。交付清單與檔名請參考:references/delivery.md。可選用子代理;最多一個用於渲染和匯出雜務的廣泛摘要(請參閱 ../../shared/agents.md)。
任務
| 任務 | 觸發條件 | 參考文件 |
|---|---|---|
| design | 全新標誌 | references/brief.md, references/mark-types.md, references/concepts.md |
| build | 將概念轉換為 SVG | references/svg-construction.md, references/optical-refinement.md |
| critique | 對現有標誌提供回饋 | references/critique-redesign.md, references/testing.md |
| redesign | 現代化或替換 | references/critique-redesign.md,然後執行 design |
| assets | 變體、favicon、應用程式圖示 | references/delivery.md, references/app-icons.md |
| present | 展示概念、撰寫指南 | references/presentation-guide.md |
硬性規則
- 標誌是識別符,不是解釋。一個概念,一句話能說完。一句話也能描述競爭對手標誌的,不算概念。
- 先學習再繪製:確認名稱的拼寫、業務內容、目標對象、三到五個形容詞、競爭對手、限制條件。要尊重既有資產(人們熟悉的顏色、形狀),除非業主另有指示。
- 先在黑色中建構。形式確定後再加入顏色。不要使用漸層、陰影或效果來挽救一個薄弱的形式。
- 檢視你的作品。盲目繪製 SVG 是導致不良標誌的主要原因。每次迭代都要渲染和檢視。
- 切勿臨摹、模仿或「更新」一個可辨識的現有標誌。如果它讓你感到熟悉但又不是客戶的,那就是別人的。
- 最終成品必須是向量:文字轉為外框、筆畫擴展、無點陣圖、無濾鏡、無腳本。
- 絕不聲稱商標清理或字型授權保障。說明你假設使用了哪些字型,並且業主必須透過專業搜尋來清理此標誌。
- 在概念檢查點停止。展示三個概念和一個推薦,然後等待。只有在選擇方向後,才建構完整套件。只有當業主明確要求不要等待時,才能跳過暫停。
- 測試是結果,不是意圖:報告什麼通過了、你做了哪些修改、還有什麼留給業主處理。
- 只撰寫通用內容。絕不在交付物中放入其他客戶的名稱或標誌。
步驟
- 了解專案。 閱讀
../../shared/stack-detect.md的基本資訊,然後尋找現有的標誌(public/、assets/、brand/、*.svg、應用程式圖示集、manifest.json)、DESIGN.md、README 和登陸頁面文案。記錄精確名稱、平台(Web、iOS、Android、桌面)、以及已使用的顏色。 - 摘要。 填寫摘要(
references/brief.md):名稱、提供的服務、受眾、形容詞與反形容詞、競爭對手、限制條件、標誌必須適用的場景。快速通道:一次訊息最多五個問題,或直接陳述假設並開始進行。形容詞是最有價值的輸入。 - 掃描類別。 列出常見套路(金融科技:盾牌和向上的箭頭;咖啡:豆子和蒸氣;AI:閃光和腦)。除非賦予其全新形式,否則應視為禁區。在允許的情況下,使用瀏覽器工具檢視競爭對手的標誌(僅限唯讀)。
- 概念。 撰寫 8 到 12 個一句話概念,涵蓋至少兩種標誌類型(
references/mark-types.md、references/concepts.md)。根據構想清晰度、區別性、簡潔性、相關性和縮小後的強度進行評分。保留最強且差異最大的三個。撰寫概念成本低,建構成本高:只建構三個。 - 為每個概念建構黑色優先的 SVG(
references/svg-construction.md)。先用文字描述結構(基本形狀、半徑、角度、網格單位),然後撰寫 SVG。儲存每次迭代(例如a-v1.svg、a-v2.svg)。 - 檢查並微調,至少兩個循環。
- 執行
node scripts/svg-check.mjs check a.svg來檢查結構、顏色、筆畫、接近正確的角度和置中情況。 - 執行
node scripts/svg-check.mjs sheet a.svg -o sheet-a.html來建立測試表:大小階梯、16 px 和 32 px、單色、反白、背景、瞇眼測試、鏡像、favicon 分頁、應用程式磚、頭貼裁切。 - 使用瀏覽器工具開啟測試表並仔細檢視。修正失敗的部分(
references/testing.md、references/optical-refinement.md)。重複此步驟。
- 執行
- 檢查點。 以灰階並排展示三個概念(大尺寸和小尺寸),每個概念一行說明,加上一個推薦(每個概念附帶一個誠實的風險說明)(
references/presentation-guide.md)。提供完整套件的選項。等待回覆。如果業主希望修改,則返回步驟 5。 - 完整套件 (完整模式,核准後)。 最終幾何形狀和小尺寸裁切;顏色(一或兩種顏色,附帶單色和反白版本,
references/colour-type.md);字體與鎖定組合(水平、堆疊、僅符號、僅字標);交付檔案(references/delivery.md);應用程式圖示(references/app-icons.md);迷你指南(references/presentation-guide.md)。使用node scripts/svg-check.mjs variants logo.svg產生黑色、白色和單色副本;使用node scripts/svg-check.mjs icon logo.svg --kind ios -o ios.svg建立應用程式圖示畫布;並使用node scripts/svg-check.mjs ico 16.png 32.png 48.png -o favicon.ico打包 favicon 尺寸。 - 結案。 執行最終檢查清單(
references/testing.md)。列出留給業主的待辦事項:商標搜尋、字型授權、印刷校樣、顏色校準。
各標誌類型一覽表
| 類型 | 選擇時機 | 注意事項 |
|---|---|---|
| 字標 (Wordmark) | 名稱具辨識度,且大多以文字形式出現 | 縮小到 16 px 時表現較弱;需要一個緊湊的輔助圖案 |
| 字首標誌/字母組合 (Lettermark / monogram) | 名稱較長,簡稱廣為人知或較短 | 除非字母形式經過訂製,否則容易流於普通 |
| 圖形符號 (Pictorial symbol) | 有一個簡單、可擁有的物件能契合概念 | 容易過於直白或落入俗套 |
| 抽象標記 (Abstract mark) | 提供的服務範圍廣泛或較為無形 | 需要時間來建立意義 |
| 徽章/徽章 (Emblem / badge) | 歷史悠久、工藝、機構 | 精細細節在縮小時會消失 |
| 組合標記 (Combination) | 大多數新品牌;符號與字標以鎖定組合呈現 | 必須在分開和組合時都能正常運作 |
| 動態/系統 (Dynamic / system) | 品牌擁有多個接觸點或產品 | 需要一個穩固的核心;不適用於小型品牌 |
推理與決策指南請參閱:references/mark-types.md。
產出
- 引導模式: 摘要與假設、三個概念(渲染圖或貼上的 SVG,每個概念一行說明)、推薦、目前的測試結果、待辦事項。不寫入倉庫。
- 完整模式: 包含一份清單的最終檔案資料夾、測試表、迷你指南、每個主檔案的
svg-check真實輸出,以及業主仍需完成的事項清單。 - 說明哪些部分未執行:未渲染、未進行裝置測試、未進行印刷校樣、未進行商標搜尋。
- 下一步:兩到四個重點(選擇方向、執行商標搜尋、透過
lll:ui將標誌應用於網站和應用程式、透過lll:design-system設定品牌顏色)。