tmj-90/brand

建立或審核品牌

一個交付 UI 但沒有品牌的工廠，只會產出模板。此技能賦予產品特定的視覺與語言行銷識別——或者審核並延伸現有品牌——並以交付代理可消費的形式記錄下來：BRAND.md 加上代碼。它擁有識別（方向、調色盤、字體配對、語調）的所有權。代碼的結構屬於 design-system 技能；表層執行則屬於 frontend-design 技能。

深度	參考文件
調色盤層級、oklch 代碼、對比度、字體配對與流暢縮放	references/color-and-typography.md
語調光譜、特質、訊息層級、一致性檢查表	references/voice-and-messaging.md

步驟

1. 偵測。 呼叫 search_lore 尋找品牌、定位、語調與設計 ADR。在儲存庫中尋找 BRAND.md、DESIGN.md、代碼檔（*.tokens.json、tokens.css、theme.ts）、:root 區塊的自訂屬性、標誌資產以及行銷文案。閱讀產品的 README 和任務單以了解目標受眾與目的。決定：品牌是否存在？

2. 品牌存在 → 以其風格審核並延伸。 請勿用你的個人喜好取代它。

   • 根據必要品質（第 4 步）與下方禁止清單為品牌評分；針對每個落差指出檔案與數值。
   • 衡量品牌在每個主題中用於每組文字/背景配對的 WCAG 對比度（內文 4.5:1，大字型與 UI 3:1）——計算比率；oklch 亮度不等於對比率。若品牌顏色作為文字使用時未達標，則建立較深的適文字變體，而不是豁免。
   • 填補現有方向的缺口：懸停/點擊步驟、缺少的表面層級、深色變體、適文字的重點色、缺少的語意角色。

3. 無品牌 → 決定一個方向，並說明為什麼它適合此產品與目標受眾：編輯/雜誌風、瑞士/國際風、新粗獷主義、便當盒風、具有真實深度的玻璃擬物風、淺色或深色奢華風、復古未來主義。「乾淨簡約」不是一個方向；深色模式是為使用者選擇的，而非出於習慣。接著定義：

   • 調色盤以 oklch 代碼表示，每種顏色要有明確的工作：表面（至少兩個層級）、文字（主要、淡化）、重點色，以及語意角色成功 / 警告 / 危險 / 資訊——每種角色都要有適文字變體，當填充色作為文字使用時未達標。
   • 字體配對——展示字體與內文字體家族，附上選擇理由（若產品顯示程式碼或資料，則加上等寬字體），使用 clamp() 流暢縮放比例，以及載入計畫：自託管、子集化、預先載入一個關鍵字重、使用等比例後備字型。
   • 語調——目標受眾、一句話承諾、3–5 個語調特質，每個特質要有「我們會說 / 我們不會說」的配對，以及語調在錯誤與空白狀態時如何變化。

4. 檢查必要品質。 品牌必須讓交付的 UI 展現 frontend-design 技能中所列的十項品質中至少四項（層級縮放、間距節奏、深度、字體特色、語意顏色、設計過的狀態、構圖、氛圍、清晰的動態、系統內的資料視覺化）。在 BRAND.md 中列出這四項（以上）品質。

5. 撰寫產出物。 BRAND.md：方向與理由、調色盤表格（代碼、值、工作、對比結果）、字體配對與縮放、語調、已實現的品質、開放問題。當工作為視覺性質時，同時產出儲存庫格式的代碼檔（DTCG JSON 或 CSS 自訂屬性——請參閱 design-system 技能），例如：

   :root {
     --color-surface: oklch(98% 0.01 95);
     --color-text: oklch(22% 0.02 265);
     --color-accent: oklch(64% 0.19 28); /* 僅用於填充；文字使用 --color-accent-text */
     --color-accent-text: oklch(50% 0.19 28);
     --text-display: clamp(2.5rem, 1rem + 6vw, 6rem);
     --text-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
     --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   }
   

6. 標記未知的策略，不要憑空虛構。 如果定位或目標受眾確實未定且任務單未解決，請勿自己捏造一個。作為交付技能，請使用具體問題呼叫 mark_ticket_blocked；作為知識庫種子，請使用開放問題命名來呼叫 suggest_lore 品牌。

7. 落地。 作為交付技能（你在任務單的工作樹分支上——使用 git branch --show-current 驗證），提交變更，使用 record-evidence 技能記錄每項驗收標準的證據（BRAND.md 的差異、對比表格、品質列表），然後停止；執行器會提交審查。作為知識庫種子，請呼叫 suggest_lore 品牌；它將維持建議狀態，直到有人類確認。

禁止事項（審核時必須抓出）

• 預設卡片網格，間距均勻且無層級。
• 置中標題加上漸層模糊的英雄區塊，搭配通用 CTA。
• 未經修改的函式庫/Tailwind/shadcn 預設值，當作完成設計。
• 每個元件使用相同的圓角、間距和陰影。
• 灰底白字加上一個裝飾性重點色。
• 無正當理由的預設字體堆疊；超過兩個字體家族卻無正當理由。
• 當重點色用於內文大小文字時，未達 4.5:1 對比度。
• 出於習慣而非適合性而反射性地選擇深色模式。

完成條件

BRAND.md 陳述一個方向及其理由；每個調色盤配對在每個主題中都有測量過的對比結果且通過標準；字體配對、縮放比例和載入計畫已定義；語調有特質與範例；已命名四項或更多必要品質；開放策略問題已列出而非猜測；代碼以儲存庫格式存在。

規則

• 致力於一個方向並說明原因；絕不允許「乾淨簡約」。
• 使用代碼而非字面值，以便交付代理能重複使用。
• 延伸現有品牌時應保持其風格；絕不以個人偏好覆蓋。
• 動態代碼僅用於 transform/opacity；絕不將與佈局相關的動畫嵌入系統中。
• 未知的策略應為命名的開放問題，絕非虛構的答案。