品牌識別 (Brand identity)
品牌識別是一小套能在各處支撐全局的決策：一個理念、一個承載該理念的符號、與其相符的色彩與字體，以及維持一致性的規則。常見的失敗是沒有理念的裝飾：一個漸層色塊、一個通用的無襯線字體、一個由情緒選擇的調色板，以及在 favicon 尺寸或單色時就失去效用的標誌。這項技能將這些決策產出為檔案，並在真實的渲染器中進行檢查。
在品牌識別與介面相遇之處，應用 interface-guidelines 的排名原則（每個人都能使用它 > 它說出真相 > 它表達其意圖 > 答案優先 > 錯誤是可恢復的 > 它保持穩定 > 可能性是可見的 > 慣例 > 打磨）。如果安裝了該技能，其審計腳本會檢查此技能產生的指南頁面。
簡報 (Brief)
在繪製任何東西之前回答這些問題。如果使用者不在現場，在 brand.json 中陳述假設並繼續進行。
- 它是什麼，為誰，對抗誰？ 類別、受眾、兩到三個競爭對手。品牌識別必須能與這些競爭對手區分開來，而不是與一般品牌區分。
- 唯一理念 (The one idea)。 一個關於品牌是什麼的單一句子，且符號能承載它（「窯爐將軟黏土變成永久的東西」）。從主題本身、其材料、過程、地點或承諾中獲取，而不是從風格中獲取。請參閱
references/strategy.md。 - 個性 (Personality)： 三個特質，每個特質都要說明它在實踐中意味著什麼以及它排除了什麼。「溫暖：大地色調和樸實的文字，絕不油滑。」
- 必須作用的場景： favicon 和應用程式圖示、手機螢幕、標示、印刷、刺繡、社群媒體頭像、深色模式、電子郵件。最困難的場景設定了複雜度的上限。
- 限制條件 (Constraints)： 需要保留的現有資產（顧客認識的顏色、名稱）、授權字體的預算、文化市場（顏色和符號的含義各不相同）。
- 符號的複雜度等級 (
references/logo.md第2節)：純文字標誌、簡單幾何符號，或分層象徵符號。根據情境和理念選擇，而不是根據野心。複雜的符號需要為小尺寸提供簡化版本。
工作流程 (Workflow)
1. 方向，然後一個決定
發展三個在理念上有所不同的方向，而不僅僅是顏色不同。針對每個方向：一句話的核心理念、標誌概念方法 (references/logo.md 第3節)、調色板草稿（兩到三種種子色）、字體配對，以及一句話說明其感覺。如果使用者在場，寫下並展示它們；如果不在場，選擇一個並說明原因。不要混合方向；混合通常會失去使每個方向奏效的理念。
2. 編寫 brand.json
它是每個腳本讀取的唯一事實來源。最小化的形狀：
{
"name": "Kiln", "tagline": "Small-batch ceramics, fired in Leeds.", "url": "https://kiln.example",
"idea": "One sentence the mark carries.",
"personality": [{ "trait": "Warm", "means": "Earth tones and plain words, never slick." }],
"voice": { "is": ["Plain", "Specific"], "isnt": ["Twee", "Salesy"], "examples": [{ "say": "Fired at 1,260°C.", "not": "Lovingly handcrafted!" }] },
"colors": { "primary": "#d9480f", "accent": "#0b7285", "neutral": { "chroma": 0.01 } },
"type": { "display": { "family": "Fraunces", "weights": [400, 700] }, "text": { "family": "Inter", "weights": [400, 600] }, "scale": { "base": 16, "ratio": 1.25 } },
"logo": { "primary": "logo/lockup.svg", "mark": "logo/mark.svg", "story": "Why the mark looks like this.", "minSizePx": 16 }
}
3. 色彩 (Color)
選擇兩到三種具有意義的種子色 (references/color.md)，然後：
node <skill-dir>/scripts/palette.mjs brand.json
它會建立感知均勻的 OKLCH 漸層，在最近的階梯上保持每種種子色精確，將中性色調朝向品牌色偏移，保持狀態色（成功、警告、危險、資訊）與品牌色分離，使危險總是讀起來像危險，為淺色和深色主題映射語義角色，並根據 WCAG 2.2 檢查每個可見的顏色配對。透過更改種子色或角色來修正失敗，而不是忽略它們。開啟 tokens/palette.html 並查看淺色和深色示範。
4. 字體 (Typography)
選擇一個展示用字體和一個內文字體（通常一個字體家族就足夠），並提供一個與理念和閱讀情境相關的理由 (references/typography.md)。檢查授權、語言覆蓋率、字重、如果數字很重要則檢查表格數字，以及它在 14 到 16 像素時的渲染效果。除非使用者擁有授權，否則偏好開源授權的字體家族 (SIL OFL)。
5. 標誌 (Logo)
手繪 SVG 符號：在網格上規劃幾何形狀，有目的地編寫路徑，並使鏤空成為真正的孔洞（fill-rule="evenodd" 或合併路徑），絕非在上面繪製白色形狀。將文字標誌轉換為輪廓，使其不依賴已安裝的字體：
node <skill-dir>/scripts/logo.mjs outline --text "Kiln" --google "Fraunces:700" --tracking -0.01 --out logo/wordmark.svg
node <skill-dir>/scripts/logo.mjs check logo/*.svg
node <skill-dir>/scripts/logo.mjs sheet logo/lockup.svg --mark logo/mark.svg --colors tokens/tokens.json --out logo/sheet.png
查看這張圖。在 16 和 24 像素時，符號必須仍然能被辨識為其本身；在單色黑色、反白以及放在繁忙的圖片上時，每個部分都必須能存活。如果細節消失，簡化它或繪製一個單獨的小尺寸符號。迭代：大多數優秀的符號都需要好幾輪的簡化。構建組合標誌（符號加上文字標誌）時，使用光學對齊而非數學對齊，並定義留白區域和最小尺寸。細節和 SVG 工藝：references/logo.md。
6. 素材與系統 (Assets and system)
node <skill-dir>/scripts/assets.mjs brand.json # favicons, ICO, Apple touch, PWA and maskable icons, Open Graph card, manifest, head tags
node <skill-dir>/scripts/book.mjs brand.json # brand guidelines page + type.css
然後加入簡報所需的其他內容：社群媒體頭像、電子郵件頁首、從符號衍生出來的圖案或紋理、圖示風格、插圖或攝影方向 (references/system.md)。每個素材都使用權杖，而不是複製的十六進位值。
7. 驗證與交接 (Verify and hand off)
- 如果適用的話，在指南頁面上執行界面指南審計：
node <interface-guidelines>/scripts/audit.mjs brand-book。 - 親自閱讀標誌圖、調色板頁面、Open Graph 卡片和圖示。修正看起來不對的地方。
- 在上下文中測試品牌識別：將標誌和權杖放在產品的一個真實畫面上（至少一個頁首和一個按鈕），包括淺色和深色模式。
- 交接：理念、每個檔案是什麼、你驗證了什麼、你沒有驗證什麼（商標搜尋、目標市場的文化審查、印刷打樣），以及任何已接受的對比度例外及其原因。
陷阱 (Traps)
- 沒有理念，只有風格。 選擇「現代、乾淨、大膽」不是一個理念。如果你無法用一句話說出符號的意義，它就還沒有任何意義。
- 通用的符號： 閃電、旋風、火花、六邊形、漸層球體、一個什麼都沒做的圓圈中的字母縮寫。只有當理念要求時才使用它們，並且它們的某些方面是可擁有的。
- 繪製的鏤空。 彩色符號上的白色形狀在單色、照片上以及反白時會變成實心區塊。
logo.mjs check會標記它們。 - 細節在小尺寸時會消失。 細線條和內部細節在 16 像素時會消失。圖表會顯示這一點；請提供一個小尺寸的符號。
- 標誌 SVG 中的
<text>。 無論字體在哪裡缺失，它都會以後備字體渲染。請將其轉為外框。 - 品牌色作為危險色，或危險色作為品牌色。 紅色品牌仍然需要一個獨特、可識別的危險色，並且其錯誤文字必須通過對比度測試。
- 將顏色意義視為事實。 「藍色代表信任」是一個薄弱、受限於文化的聯想，而不是法則 (
references/color.md第1節)。要根據在類別中的區分度和理念來選擇。 - 抄襲。 不要重新建立或密切模仿現有品牌的符號、名稱或商業表徵。請注意，真正的商標搜尋是使用者在上線前的步驟。
- 模仿真實組織 如果使用者不是該組織，這不是品牌建立；應予以拒絕。
參考資料 (References)
| 檔案 | 何時閱讀 |
|---|---|
references/strategy.md | 尋找理念、個性、為氛圍命名、編寫方向時 |
references/logo.md | 任何標誌工作：類型、複雜度等級、概念方法、建構、SVG 工藝、組合標誌、測試 |
references/color.md | 選擇種子色、顏色意義證據、OKLCH、角色、深色模式、可訪問性 |
references/typography.md | 選擇和配對字體、授權、尺度、數字、網路載入 |
references/system.md | 圖示、紋理、意象、動態、語音、素材、權杖、指南 |