品牌套件
為每個客戶在 studio/brands/<slug>/ 建立一個可重複使用的套件：
studio/brands/<slug>/
├── brand.json 依角色區分的顏色、字體、標誌、語調、事實、團隊、服務、推薦（+ 自動計算的檢查）
├── assets.json 資產庫索引（每張圖片顯示的內容、品質、來源）
├── assets/ 人物/ 服務/ 推薦/ 地點/ 作品/ 證明/
├── swatch.png 顏色的預覽圖
├── logo/ 實際使用的標誌檔案
└── source/ 原始掃描輸出（site.json、probe.json、candidates.json、聯絡表）
腳本 和 渲染 技能會讀取 colors、fonts、logo 和 computed；撰寫 技能會讀取 voice 和 facts。結構和角色規則請參考：references/brand-schema.md。
腳本進行測量；Claude 進行判斷。請閱讀腳本的 JSON 和主控台摘要——不要讀取原始 HTML/CSS 或截取全頁螢幕截圖來尋找顏色。從工作室根目錄執行腳本（node .claude/skills/brand-kit/scripts/...）。
步驟 0 — 檢查現有套件？
在建立任何東西之前，先在現有套件中尋找該品牌：比對使用者的描述與每個 studio/brands/*/brand.json 中的 slug、name、aka 以及 sources 中的網站（例如：「Stargate」、「Sanjay Aggarwal Classes」和「stargate.net.in」是相同的套件）。只有在沒有任何符合項時，才選擇一個新的短 kebab-case 格式的 slug。
- 已核准的套件： 從
brand.json回答，並顯示swatch.png——不需要掃描，不需要執行腳本。對於單純的提問（例如「Stargate 的顏色是什麼？」），直接回答即可。只有當使用者要求重新整理或更新時才重建。 - 草稿套件： 從步驟 7（核准）繼續，使用現有的 swatch；不要重新掃描。
- 已核准但沒有資產庫的套件（缺少
assets.json）：僅執行步驟 5，然後重新核准。腳本在需要圖片時會提出此要求。 - 重新整理： 從步驟 1 重新執行，保留使用者手動設定的任何項目（
from: "user"），並增加version。
步驟 1 — 收集來源
使用所有可用的東西，按以下權威順序：
- 使用者的指示（例如「我們的藍色是 #1F3C88」）——永遠優先。
- 使用者提供或放在影片
assets/中的品牌指南 / 標誌檔案。 - 網站。
對於任何會影響結果但尚未取得的東西，詢問一次——通常只是「你有標誌檔案或品牌指南嗎？不然我就從網站上擷取。」不要因此卡住。
步驟 2 — 掃描網站
- 靜態掃描（總是執行）：
node .claude/skills/brand-kit/scripts/site-extract.mjs <網址> studio/brands/<slug>/source/site.json提供 CSS 顏色（網站 vs 框架計數、品牌 CSS 變數）、字體、標誌候選、meta、聯絡資訊和標題。 - 渲染探測（當內建瀏覽器可用時——這更準確，因為它測量的是實際顯示在螢幕上的內容）：開啟網站，然後使用
javascript_tool執行 scripts/browser-probe.js 的內容。將其 JSON 儲存到source/probe.json。它會根據螢幕區域回報背景顏色、根據文字量回報文字顏色、按鈕顏色、標題和正文字體，以及標誌圖片。
如果靜態掃描沒有找到任何網站顏色（完全由 JS 渲染的網站）且沒有任何瀏覽器可用，則依賴標誌並說明此情況。
步驟 3 — 標誌
選擇最佳候選（score、alt、大小，以及 probe 的 logos）；偏好 SVG 或最大的 PNG，除非沒有其他東西，否則避免使用 favicon。然後執行：
node .claude/skills/brand-kit/scripts/logo-palette.mjs studio/brands/<slug>/logo <標誌網址或路徑> [...]
這會儲存檔案，並根據佔比（忽略透明像素）回報每個檔案的實際顏色及其色調（需要的背景）。刪除任何下載後發現不是標誌的檔案。如果只有 favicon 或照片存在，請告知使用者並要求提供合適的標誌檔案。
步驟 4 — 決定角色
填寫 brand.json（格式請參考結構參考）。判斷規則：
- 品牌顏色來自品牌，而非來自外掛。 忽略
framework顏色和主題預設值，除非探測顯示它們確實主導了頁面。 - 主要色 = 標誌的主要彩色顏色，並經由網站（頁首、大區塊、品牌變數）確認。如果標誌和網站不一致，偏好標誌並註明。
- 強調色 = 網站主要按鈕/CTA 的顏色，如果與主要色不同；否則為標誌的第二顏色；否則推導出一個（互補色或暖色調對比色）並標記為
derived。 - 輔助色 僅在品牌明確使用第二種顏色時設定。不要為了設定而設定。
- 背景色、表面色、文字色、柔和色 來自網站的實際背景和文字顏色，並針對螢幕進行調整：純 #000 文字 → 調整為接近黑色並帶有主要色調是可行的。
- 螢光筆色（可選）：一種淺色、高飽和度的顏色，用於螢光標記，如果品牌有這樣的顏色或有自然適用的顏色。
- 字體 來自探測（或靜態掃描）：標題字體 = 標題使用的字體，正文字體 = 內文使用的字體。
- 語調和事實 來自網站的標題、meta 和聯絡資訊：標語、口語名稱、預設 CTA 和聯絡資訊、語氣詞、應避免的主張（無法證明的最高級用語、網站未實際顯示的數字）。每個事實都帶有來源和日期。
設定 status: draft，version: 1（或增加），updated: <今天>。
步驟 5 — 資產庫
一次性收集品牌自己的圖片，這樣每個影片都可以使用真實的人物、產品和證明，而不是純文字的場景。適用於任何類型的企業——類別是通用的：
| 種類 | 涵蓋內容 |
|---|---|
people | 創辦人、團隊、員工、專家（醫生、廚師、教師、顧問…） |
offering | 產品、服務、課程、菜單項目、套裝方案、方案 |
testimonial | 客戶照片、評論截圖、結果/成果證明圖片 |
place | 場所、店面、診所、教室、辦公室、活動 |
work | 作品集、圖庫、專案、前後對比 |
proof | 獎項、證書、合作夥伴/客戶標誌、媒體報導 |
node .claude/skills/brand-kit/scripts/collect-assets.mjs studio/brands/<slug> <網站網址>（對於不應遺漏的頁面，加上--pages 網址1,網址2）。它會跨越所有種類選取頁面，下載每張圖片的最高解析度版本，丟棄圖示/重複/過小的檔案，並寫入source/candidates.json（大小、品質、猜測的種類、alt、附近文字）以及 一張 聯絡表source/candidates-sheet.png。- 查看聯絡表一次；使用
candidates.json中的文字（名稱、引述、標題）來識別主體。保留影片可能實際使用的部分；跳過佔位符、其他品牌的素材和近似重複的內容。 - 寫入
assets.json（格式請參考結構參考）：為每個保留的圖片記錄其candidateID、目標file（<種類>/<描述性名稱>.jpg）、kind、subject、一行description、bakedText（如果圖片上有文字/價格則為 true）、可選的crop以移除內嵌的標籤或邊框，以及source。在描述中註記任何有時效性的內容（價格、日期）。 node .claude/skills/brand-kit/scripts/finalize-assets.mjs studio/brands/<slug>— 將選定的檔案複製/裁剪到assets/中，記錄大小和quality（full≥ 700 像素，card≥ 300 像素，低於則為avatar-only），移除候選檔案。- 將相符的 文字事實 加入
brand.json（每個都附上來源 + 日期）：team（姓名、角色、證照、資產 ID）、offerings（名稱、詳細資訊、資產 ID）、testimonials（姓名、簡短逐字引述、詳細資訊、資產 ID），以及proof（如果有的話）。在儲存前，根據頁面文字驗證這些主張——引述必須逐字。
告知使用者需要與客戶確認客戶照片的使用權限。
步驟 6 — 建置和檢查
node .claude/skills/brand-kit/scripts/build-kit.mjs studio/brands/<slug>
它會計算搭配色、色調比例、對比度檢查以及 Google Font 可用性，將其寫入 computed，並渲染 swatch.png。修復每個有解決方法的警告（調整 muted/ink 的亮度，將字體替換為最接近的 Google Font，並保留原始字體在 original 中），並重新執行直到沒有警告，或直到剩下的警告已有解釋。對於你接受而非修復的每個警告，在 usage 中建立一行規則（例如：「強調色是填充色；永遠不要在白色上使用強調色文字」），以便腳本和渲染階段能夠遵循。然後查看 swatch.png 一次——這是此技能需要查看的唯一圖片。
步驟 7 — 核准
向使用者顯示 swatch 和一個簡短摘要：
- 每個角色 → 十六進位色碼、顏色名稱、來源（標記任何
derived的項目） - 字體（以及任何替換）
- 使用的標誌檔案及其需要的背景
- 標語、預設 CTA、聯絡資訊、應避免清單
- 資產庫：各類別數量、任何解析度較低或帶有內嵌價格的項目、權限說明
- 任何剩餘的警告
套用使用者要求的變更（使用者設定的值會帶有 from: "user"），重新執行 build-kit.mjs，一旦核准，設定 status: approved 並再執行一次，以便 swatch 顯示最終狀態。
交接
當套件核准後，如果影片正在進行中，將 brand: <slug> 放入影片的 brief.md 中，並告知使用者哪些階段會使用它。保持結尾簡短：套件路徑、主要色/強調色十六進位色碼、字體。