Community影像github.com

logo(標誌設計)

設計標誌與品牌標記:摘要、跨類型概念、簡潔幾何 SVG、光學微調、色彩與字體、測試(16 px、單色、反白)、交付(SVG、PNG、favicon、應用程式圖示)及迷你指南。在需要 logo、字標、字母組合、符號、應用程式圖示、favicon,或想要進行標誌評論或翻新時使用。不適用於品牌色/字型/符記(lll:design-system)或畫面(lll:ui)。

logo(標誌設計) 是什麼?

Logo(標誌設計)技能提供了一套完整的端到端工作流程,從初始摘要和概念發想,到打造精確的幾何 SVG 標誌,再到最終交付。它能協助你設計一個「識別而非解釋」的標誌:一個清晰的概念,以乾淨的 SVG 構建,並在 16 px 和單色下驗證。此技能專為 Claude Code、Cursor 或 Codex 等 AI 代理工具設計,完全整合於 lll 生態系統中,透過結構化步驟(學習、摘要、掃描類別、概念發想、建構、檢查、檢查點、完整套件、結案)來引導設計流程。它支援多種標誌類型(字標、字母組合、圖形符號、抽象標記、徽章、組合標記、動態系統),並提供嚴格的規則(例如:先在黑色中建構、避免抄襲、概念檢查點)以及內建測試(使用 svg-check 腳本進行大小階梯、單色、反白、背景測試)。在引導模式下,它僅提供概念與建議,不寫入倉庫;在完整模式下,則會產生品牌資料夾中的所有最終檔案,包括 SVG、PNG、favicon、應用程式圖示和迷你指南。此技能不適用於品牌設計系統(lll:design-system)或 UI 畫面(lll:ui)。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/lilly-logic-labs/lll-skills/tree/HEAD/skills/logo

Installed? Explore more 影像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

標誌 (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將概念轉換為 SVGreferences/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

硬性規則

  1. 標誌是識別符,不是解釋。一個概念,一句話能說完。一句話也能描述競爭對手標誌的,不算概念。
  2. 先學習再繪製:確認名稱的拼寫、業務內容、目標對象、三到五個形容詞、競爭對手、限制條件。要尊重既有資產(人們熟悉的顏色、形狀),除非業主另有指示。
  3. 先在黑色中建構。形式確定後再加入顏色。不要使用漸層、陰影或效果來挽救一個薄弱的形式。
  4. 檢視你的作品。盲目繪製 SVG 是導致不良標誌的主要原因。每次迭代都要渲染和檢視。
  5. 切勿臨摹、模仿或「更新」一個可辨識的現有標誌。如果它讓你感到熟悉但又不是客戶的,那就是別人的。
  6. 最終成品必須是向量:文字轉為外框、筆畫擴展、無點陣圖、無濾鏡、無腳本。
  7. 絕不聲稱商標清理或字型授權保障。說明你假設使用了哪些字型,並且業主必須透過專業搜尋來清理此標誌。
  8. 在概念檢查點停止。展示三個概念和一個推薦,然後等待。只有在選擇方向後,才建構完整套件。只有當業主明確要求不要等待時,才能跳過暫停。
  9. 測試是結果,不是意圖:報告什麼通過了、你做了哪些修改、還有什麼留給業主處理。
  10. 只撰寫通用內容。絕不在交付物中放入其他客戶的名稱或標誌。

步驟

  1. 了解專案。 閱讀 ../../shared/stack-detect.md 的基本資訊,然後尋找現有的標誌(public/、assets/、brand/、*.svg、應用程式圖示集、manifest.json)、DESIGN.md、README 和登陸頁面文案。記錄精確名稱、平台(Web、iOS、Android、桌面)、以及已使用的顏色。
  2. 摘要。 填寫摘要(references/brief.md):名稱、提供的服務、受眾、形容詞與反形容詞、競爭對手、限制條件、標誌必須適用的場景。快速通道:一次訊息最多五個問題,或直接陳述假設並開始進行。形容詞是最有價值的輸入。
  3. 掃描類別。 列出常見套路(金融科技:盾牌和向上的箭頭;咖啡:豆子和蒸氣;AI:閃光和腦)。除非賦予其全新形式,否則應視為禁區。在允許的情況下,使用瀏覽器工具檢視競爭對手的標誌(僅限唯讀)。
  4. 概念。 撰寫 8 到 12 個一句話概念,涵蓋至少兩種標誌類型(references/mark-types.md、references/concepts.md)。根據構想清晰度、區別性、簡潔性、相關性和縮小後的強度進行評分。保留最強且差異最大的三個。撰寫概念成本低,建構成本高:只建構三個。
  5. 為每個概念建構黑色優先的 SVG(references/svg-construction.md)。先用文字描述結構(基本形狀、半徑、角度、網格單位),然後撰寫 SVG。儲存每次迭代(例如 a-v1.svg、a-v2.svg)。
  6. 檢查並微調,至少兩個循環。
    • 執行 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)。重複此步驟。
  7. 檢查點。 以灰階並排展示三個概念(大尺寸和小尺寸),每個概念一行說明,加上一個推薦(每個概念附帶一個誠實的風險說明)(references/presentation-guide.md)。提供完整套件的選項。等待回覆。如果業主希望修改,則返回步驟 5。
  8. 完整套件 (完整模式,核准後)。 最終幾何形狀和小尺寸裁切;顏色(一或兩種顏色,附帶單色和反白版本,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 尺寸。
  9. 結案。 執行最終檢查清單(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 設定品牌顏色)。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能