brand-intake:真實 Token 輸入,brand.json 輸出
影片必須與產品外觀一致,因此 Token 來自於產品本身,絕非來自個人品味。資訊來源順序如下,在找到某欄位的數值後即停止查詢,並記錄該數值的來源:
- 使用者的儲存庫(最佳:精確 Token、真實字型名稱、真實 Logo 檔案)。
- 即時網站 URL(計算後的樣式、meta 標籤、頁首 SVG)。
- 使用者提供的螢幕截圖(像素取樣)。
- 針對仍遺漏的項目向使用者提問。請勿猜測。
輸出(路徑相對於 launch-video/):films/<slug>/brand.json、films/<slug>/BRAND-SOURCES.md,以及 Logo 檔案原封不動複製到 public/films/<slug>/brand/(以便場景可使用 staticFile() 載入)。
萃取配方:references/sources.md。欄位對應、字型後備方案、對比度計算:references/brand-json.md。
步驟
- 尋找產品根目錄。 若
launch-video/位於產品儲存庫內,根目錄為上一層。否則要求提供 URL 與螢幕截圖。注意技術棧:package.json的依賴項(tailwindcss 版本、next、@fontsource/*、shadcn)。 - 從儲存庫取得色彩。 依序:Tailwind v4 的
@theme變數(CSS 中)、Tailwind v3 的tailwind.config.{js,ts,cjs,mjs}theme.extend.colors、shadcn 的globals.cssToken(--background、--foreground、--primary、--muted、--card、--accent)、其他:root自訂屬性。將 HSL/OKLCH/RGB 轉換為 6 位十六進位色碼。使用行銷網站所使用的主題(深色或淺色),不要混合兩者。 - 從儲存庫取得字型。
next/font/google或next/font/local導入、@fontsource*依賴項、@font-face、body/html/h1上的font-family、Tailwind 的fontFamily。記錄實際使用的字型家族名稱與字重。 - 從儲存庫取得 Logo。 優先尋找 SVG:
public/logo*.svg、public/*mark*.svg、app/icon.svg、public/favicon.svg、src/assets/*logo*、src/components/*Logo*(內嵌 JSX SVG:擷取<svg>),然後是 PNG ≥ 512 px(apple-touch-icon.png為 180 px:僅作為標記的最後手段,絕不用於字標)。原封不動複製到public/films/<slug>/brand/。 - 取得圓角半徑與主題。
--radius或 Tailwind 的borderRadius;若背景相對亮度 < 0.2 則主題為深色。 - 從即時網站填補空缺(
references/sources.md§ 即時 URL):theme-color meta、og:image、link rel=icon、頁頭內嵌 SVG、body、主要按鈕、h1的計算樣式。 - 從螢幕截圖填補空缺: 在指定點(頁面背景、正文文字、主要按鈕、卡片)取樣像素。在 BRAND-SOURCES.md 中寫入像素座標。
- 名稱、標語、URL: 來自
package.json的name/description、網站的<title>、首頁h1、og:description、README 第一行。使用使用者自己的用語;請勿在此處編寫新的標語(文案由 story 負責)。 - 將無法出貨或載入的字型 根據角色對應至已出貨的 OFL 字型(brand-json.md § 字型)並加以說明。
- 對比度檢查(brand-json.md § 對比度):前景色相對於背景色 ≥ 4.5:1(目標 7:1),強調色相對於背景色 ≥ 3:1。寫出數值。強調色未通過檢查 → 保留它用於形狀,選取
fg作為其上文字的色彩。 - 寫入
brand.json,然後若存在schemas/brand.schema.json則進行驗證:npx -y -p ajv-cli@5 -p ajv-formats ajv validate --spec=draft2020 -c ajv-formats -s schemas/brand.schema.json -d films/<slug>/brand.json - 寫入
BRAND-SOURCES.md:每個數值一行 → 來源(檔案:行號、URL + 選擇器,或螢幕截圖 + x,y)。 - 向使用者顯示 6 行摘要(名稱、主題、6 個十六進位色票、字型、Logo 檔案、任何已對應或已詢問的項目)。
強制停止(請勿繼續流程)
| 情況 | 應做 | 絕不做 |
|---|---|---|
| 儲存庫、網站或螢幕截圖中無 Logo 檔案 | 詢問:「請以 SVG(最佳)或 ≥ 512 px 且含透明背景的 PNG 格式傳送 Logo。」 | 繪製、描摹、生成或近似 Logo |
| Logo 僅為小型 favicon | 請求較大檔案 | 將 32 px 的 favicon 放大為英雄標記 |
| 未擷取到任何色彩(無法存取儲存庫、網站被封鎖、無螢幕截圖) | 請求提供 URL 或 2–3 張螢幕截圖,或十六進位色碼 | 挑選「好看的」色彩或預設色板 |
| 衝突的色板(應用程式 vs 行銷) | 詢問影片應使用哪一個;預設為行銷網站 | 混合兩者 |
| 使用者希望使用文字字標(無 Logo 時) | 僅在明確回覆「是」時允許:產品名稱使用顯示字型、前景色 | 將其呈現為使用者的 Logo |
規則
- 以位元組為單位完整複製 Logo 檔案。除非使用者要求,否則請勿重新著色、裁切或「清理」Logo。
- 未經使用者確認擁有權利,絕不使用其他公司的 Logo 或使用者的客戶 Logo。
- 絕對不要從其授權禁止重新分發至儲存庫的來源獲取字型(例如 Fontshare FFL 系列字型如 Satoshi 或 General Sans、Apple SF Pro):將它們對應至其他字型(brand-json.md § 字型)。
brand.json不包含機密資訊,亦不包含超出公開產品名稱與 URL 的個人資料。- 重新執行導入僅會覆寫來源已變更的欄位;保留使用者手動編輯的欄位(先進行差異比對)。
- 下游技能僅讀取
brand.json;切勿在場景中硬編碼品牌十六進位色票[craft/06#grade-discipline]。