餐廳品牌調色板
將餐廳視覺證據轉換為一個小型、可存取的網站色彩系統。將重複出現的招牌、標誌、菜單和室內顏色視為證據。將最終的記號角色和比例視為一項設計決策,必須在保留該證據的同時,確保網站的可讀性。
在提取或選擇顏色之前,請先閱讀 references/brand-palette-playbook.md。在選擇可重複使用的組合系列之前,請先閱讀 references/palette-combinations.md。複製 assets/brand-palette-template.json,並使用 assets/palette-combo-library.json,而不是憑空發明一個未經記錄的調色板。
選擇模式
- 提取: 從選定的影像區域取樣候選色票,而不決定其含義。
- 審計: 將顏色分類為品牌錨點色、輔助色、中性色、偶然色或被拒絕的雜訊。
- 建立: 選擇一個錨點色、一個組合系列和一個完整的網站記號系統。
- 刷新: 重新檢查證據或對比度,並更新現有的調色板鎖,而不改變佈局結構。
- 審查: 渲染預覽,驗證所有必需的配對,並報告整合契約。
讓 $restaurant-demo-builder 選擇 Recipe、佈局語法、目標受眾和轉換目標。在身份證據建立之後、視覺樣式最終確定之前使用此技能。讓 $restaurant-exterior-image-studio 產出店面資產;此技能可以檢查其未經修改的真實來源以獲取顏色證據,但不得將 AI 重新設計的輸出視為新的品牌真相。
準備調色板鎖
將 brand-palette.json 保存在 Demo 研究記錄或 recipe 鎖旁邊。記錄:
- 餐廳身份和證據來源;
- 觀察到的顏色、區域、來源 ID、信心度和分類;
- 被拒絕的顏色及拒絕原因;
- 選定的錨點色和可重複使用的組合 ID;
- 從觀察到的顏色到網站記號的推導過程;
- 必要的前景色/背景色配對;
- 預期的顏色比例和使用說明;
- 審查狀態,以及結果是來自證據推導還是有明確標籤的備用方案。
保留來源 URL、檢查日期和 SHA-256 值。絕不儲存 API 權杖或私人憑證。
在取樣前檢查證據
優先選擇重複出現、帶有身份識別的表面:
- 官方標誌或文字商標;
- 店面招牌、遮陽篷或刻意塗裝的外牆;
- 印刷菜單的標題、分隔線和品牌面板;
- 重複出現的室內牆壁、卡座、瓷磚或服務櫃檯顏色;
- 包裝、制服或社交圖形,僅在驗證其為當前餐廳身份時使用。
拒絕或隔離食物顏色、膚色、天空、雲彩、樹木、草地、柏油路、鄰近商家、反光、臨時裝飾、螢幕發光、暖色燈泡光暈、深色相機陰影以及自動白平衡錯誤。不要選擇「最常見的像素」作為品牌顏色。
使用 view_image 檢查每個來源。當精確取樣有幫助時,只裁剪經過驗證的品牌區域:
python3 <palette-skill>/scripts/extract_swatches.py \
--image <source-image> \
--crop <left> <top> <right> <bottom> \
--colors 8 \
--output <work-order>/sampled-storefront-colors.json
該腳本報告的是像素,而非品牌含義。在將取樣的顏色提升為品牌顏色之前,請記錄其相關性。
選擇一個錨點色和一個組合系列
從重複出現的高信心度證據中選擇錨點色。優先考慮來自兩種不同來源類型(例如招牌加菜單)的一致性,而不是來自同一張照片的重複。當只有一個乾淨的、由所有者控制的標誌或菜單時,如果該區域不含糊,這可能就足夠了。
不要強迫將字面上的錨點色覆蓋頁面的大部分區域。將其視為用於操作、標題、分隔線或結構性色塊的品牌錨點色。推導出一個平靜的畫布和表面中性色,以便食物、菜單文字和方向指示仍然易於瀏覽。70 / 20 / 10 的畫布和表面 / 結構 / 強調色比例只是一個起點,不是固定公式。
從組合庫中選擇最接近的系列,然後根據證據調整其角色。該庫是角色與和諧的指南,而不是餐廳品牌的證明。在 derivations 中記錄每一次的變暗、變亮、去飽和度或中性化處理。限制色相變化;如果需要不同的色相來提高可讀性或和諧度,則僅將其用作輔助色,並解釋選擇原因。
當沒有可靠的品牌顏色時,使用與 Recipe 相容的中性備用色,將 selection.mode 設定為 recipe-fallback,並將調色板標記為創意提案。不要聲稱它來自餐廳。
建立網站記號
提供範本中的所有記號,包括畫布、表面、正文文字、淡化文字、主要操作、懸停狀態、主要文字上的顏色、強調色、強調色文字上的顏色、邊框、控制項邊框和焦點。盡可能使用錨點色作為 primary 的來源,但在需要文字對比度時對其進行變暗或變亮處理。
記錄普通文字、大字型文字和非文字控制項的必需配對。驗證普通文字的對比度為 4.5:1,大字型文字為 3:1,有意義的控制項或焦點邊界為 3:1。不要僅依賴顏色來傳達選中、錯誤或可用狀態。
在記號工作之前執行證據關卡,在所有記號完成後執行交接關卡:
python3 <palette-skill>/scripts/validate_palette.py \
--palette <demo>/brand-palette.json \
--combo-library <palette-skill>/assets/palette-combo-library.json \
--stage evidence
python3 <palette-skill>/scripts/validate_palette.py \
--palette <demo>/brand-palette.json \
--combo-library <palette-skill>/assets/palette-combo-library.json \
--stage handoff
在整合前預覽
渲染一個獨立的預覽,顯示記號、按鈕、選單列、證據表面和測量配對:
python3 <palette-skill>/scripts/render_palette_preview.py \
--palette <demo>/brand-palette.json \
--out <demo>/brand-palette-preview.html
視覺檢查預覽。檢查結果是否感覺像該餐廳,是否沒有變成錨點色的無差別牆面,是否保留食物的食慾,以及在手機上淡化文字是否可讀。
交接給 Demo 建置工具
將經過驗證的 brand-palette.json、預覽和以下約束傳遞給 $restaurant-demo-builder:
- 保留選定的 Recipe 和佈局指紋;
- 將記錄的記號對應到 CSS 變數,而不是引入臨時的十六進位值;
- 根據記錄的角色和比例使用錨點色;
- 保持攝影色彩分級與 UI 顏色分開;
- 在任何記號更改後重新運行調色板驗證;
- 在桌面和手機上進行視覺驗證,包括文字覆蓋圖片和所有按鈕狀態。
不要讓調色板選擇強制使用舊的頁面骨架或覆蓋經過驗證的餐廳證據。佈局、品牌顏色和攝影是獨立的鎖,它們在最終的 Demo 中匯合。
交接報告
報告已接受和已拒絕的證據顏色、錨點色信心度、選定的組合、記號推導、測量的對比度結果、預覽路徑、備用狀態以及任何需要所有者驗證的問題。未經明確授權,不得發布或聯繫餐廳。
範例呼叫
$restaurant-brand-palette 檢查這個店面、菜單和用餐區照片,然後建立一個網站調色板鎖。$restaurant-brand-palette 提取真實的品牌顏色,並解釋你拒絕了哪些照片顏色,因為它們是光線或環境因素。$restaurant-brand-palette 審查這個 Demo 調色板,修復薄弱的組合,並將經過驗證的 CSS 角色交給 restaurant-demo-builder。