Brand Snapshot
在幾分鐘內將品牌的視覺與語調基礎濃縮成兩頁：你可放心使用的色彩、字型與其免費替代方案、Logo 與 UI 的表現方式、品牌的語調，以及官方檔案的連結。這是 Company Brief 技能中品牌部分的快速版本。
使用方式
/brand-snapshot <網址或品牌名稱> [tokens only]
純文字請求也可以運作：
- 「Brand snapshot for linear.app.」
- 「Patagonia 用了哪些顏色和字型？」
- 「從 stripe.com 擷取設計 Token 作為提案 mockup。」
- 「Oatly 和 Liquid Death 的快照，並排比較。」（各產生一份快照）
加上「tokens only」則跳過 PDF，只回傳 tokens.json 與 tokens.css。
檔案。 <skill-dir> 代表此技能所屬的資料夾，也就是存放這個 SKILL.md 的地方。範本在 assets/ 中，腳本在 scripts/ 中，共用的 PDF 步驟（字型、色彩、渲染、檢查）則在 references/rendering.md 中。
嚴格規則
- 以即時網站為優先。 色彩與字型來自網站的 computed styles（參考 references/brand-extraction.md），標記為「已驗證」並附上日期。若官方指南或新聞稿與網站不一致，以官方為準；兩者皆需記錄。第三方來源（如 Brandfetch）則標記為「回報」。
- 描述 Logo，不要複製。 以文字說明商標與字標，並附上官方新聞稿或品牌入口網站的連結。切勿重新繪製、描摹或嵌入 Logo、吉祥物或廣告圖像。色票與字型樣本可使用替代字型呈現。
- 標明替代字型。 若品牌字型為付費或自訂字型，請指名字型名稱與字型公司，並以最接近的免費字型設定樣本，且標示為「替代」。
- 適用使用條款。 提醒讀者品牌的資產屬於品牌本身，且須遵守其品牌指南。
- 版權標示： 快照結尾需附上小小的 Beautiful Engine 版權標示。除非使用者要求移除，否則請保留。
工作流程
- 開啟網站（若可使用瀏覽器，則先要求一次網域授權；否則直接擷取）。確認該網站正是使用者所指的品牌。
- 提取：依據 references/brand-extraction.md 第 1 節的腳本，在首頁與另一頁（定價、產品或關於我們）執行：標題樣式、使用的字型、依螢幕區域區分的色彩、樣式表中的色彩、CSS 自訂屬性、漸層、按鈕與卡片樣式，以及 Logo 資訊。放大 Logo 的螢幕截圖以便描述，並放大英雄區塊以描述圖像風格。
- 檢查官方來源：搜尋該品牌的新聞稿、品牌入口網站、設計系統網站或指南 PDF，以及字型的字型公司。若有子品牌（活動、產品線）則分別記錄。
- 選擇色盤：4–8 種色彩，依重要性排序（主色、次要色、強調色、中性色），每種顏色附上簡潔的名稱與角色。然後執行：
python3 <skill-dir>/scripts/palette.py --colors "名稱:#hex,..." --font-display "…" --font-body "…" --font-mono "…" --radius 8px --brand "<品牌>" > swatches.html這會產生tokens.json與tokens.css，並印出含對比度檢查的色票表格。 - 準備 PDF 字型：使用
scripts/fonts.py安裝品牌的免費字型或替代字型，再執行scripts/tokens.py並帶入品牌的主色與強調色，讓快照本身也穿上品牌外衣（參考 references/rendering.md）。 - 語調：3–4 個特質，每個特質附上一句來自網站的實際引述。
- 建置：從
assets/snapshot-template.html開始（複製base.css），貼入色票表格，渲染、審核，並檢查檢查表。共兩頁；寧可裁切也不要讓內容溢出到第三頁。 - 交付：PDF、
tokens.json與tokens.css。回覆內容須包含：主色與強調色的 Hex 碼、字型與替代字型，以及官方指南的位置（若無公開指南則註明）。
輸出檔名：<品牌>-Brand-Snapshot-<YYYY-MM>.pdf。