Communitygithub.com

LucasH1225/restaurant-website-skills

提取、解讀、記錄並驗證基於證據的餐廳色彩系統,用於網站示範。當 Codex 需要檢查店面、招牌、標誌、菜單、包裝或室內照片以找出重複的品牌顏色時使用;將品牌證據與食物、天空、樹葉、燈光色調、柏油路或相機雜訊分開;選擇和諧的調色板組合;將真實的錨點顏色轉換為可存取的 CSS 設計記號;預覽色彩角色;或將調色板鎖交給 restaurant-demo-builder。

restaurant-website-skills 是什麼?

此技能旨在協助 AI 代理(例如 Codex)從餐廳的視覺證據(如招牌、標誌、菜單和室內照片)中提取、解讀並建立一個可用於網站示範的、基於證據的色彩系統。它不僅僅是隨意選色,而是透過嚴謹的證據審核流程,區分真正的品牌顏色與環境光線、食物等不相關元素。技能支援 Extract、Audit、Create、Refresh、Review 等多種模式,並提供腳本(例如 extract_swatches.py)來自動化取樣。最終會生成一個完整的品牌調色板鎖(brand-palette.json),包含 CSS 設計記號,並確保所有顏色組合符合無障礙對比度標準。此技能特別適合在確認餐廳品牌身份後、視覺風格定稿前使用,並與 `restaurant-demo-builder` 等工具協作,確保最終的網站示範忠於原始品牌證據。

相容平台~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/LucasH1225/restaurant-website-skills/tree/HEAD/skills/restaurant-brand-palette

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

餐廳品牌調色板

將餐廳視覺證據轉換為一個小型、可存取的網站色彩系統。將重複出現的招牌、標誌、菜單和室內顏色視為證據。將最終的記號角色和比例視為一項設計決策,必須在保留該證據的同時,確保網站的可讀性。

在提取或選擇顏色之前,請先閱讀 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 權杖或私人憑證。

在取樣前檢查證據

優先選擇重複出現、帶有身份識別的表面:

  1. 官方標誌或文字商標;
  2. 店面招牌、遮陽篷或刻意塗裝的外牆;
  3. 印刷菜單的標題、分隔線和品牌面板;
  4. 重複出現的室內牆壁、卡座、瓷磚或服務櫃檯顏色;
  5. 包裝、制服或社交圖形,僅在驗證其為當前餐廳身份時使用。

拒絕或隔離食物顏色、膚色、天空、雲彩、樹木、草地、柏油路、鄰近商家、反光、臨時裝飾、螢幕發光、暖色燈泡光暈、深色相機陰影以及自動白平衡錯誤。不要選擇「最常見的像素」作為品牌顏色。

使用 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。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

LucasH1225/restaurant-website-skills

Research, position, design, build, and visually verify persuasive mobile-first website demos for independent restaurants with missing, broken, Facebook-only, outdated, or poor websites. Use when Codex is asked to analyze a restaurant lead, plan or create an outreach-ready restaurant website demo, turn Maps/Facebook/menu/review evidence into a tailored site, structure a clear mobile menu, coordinate evidence-backed food and storefront imagery, or integrate a restaurant-derived brand palette. Use restaurant-food-image-studio for food-image production, restaurant-exterior-image-studio for storefront-image production, and restaurant-brand-palette for photo-to-token color work. Do not use for generic restaurant directories, delivery marketplaces, or unverified production claims.

LucasH1225/restaurant-website-skills

Initialize, parallelize, resume, integrate, and validate evidence-gated restaurant website Demo work orders across restaurant-demo-builder, restaurant-brand-palette, restaurant-food-image-studio, and restaurant-exterior-image-studio. Use when Codex needs to start a new restaurant Demo from a lead, coordinate design/food/storefront subagents, run the complete multi-Skill workflow, continue interrupted work without repeating passed stages, inspect blockers or artifacts, or verify that a private Demo is ready for review. Do not use it to publish a site, contact a restaurant, bypass a specialist manifest, or generate unsupported food or storefront imagery.

LucasH1225/restaurant-website-skills

Audit, restore, recreate, and verify evidence-backed restaurant storefront and arrival photography for private website demos. Use when Codex needs to turn real venue exterior references into a faithful AI-assisted door-front image, repair exposure or perspective, create a recognizable arrival band, preserve signage and architecture, record source-versus-output evidence, or decide whether an exterior image is safe for Demo or public use. Do not use for invented storefront concepts, interior-only work, food photography, generic architecture renders, detached Street View screenshots, or any image that cannot be grounded in current real venue evidence.

LucasH1225/restaurant-website-skills

Collect, restage, harmonize, and verify evidence-backed food photography for independent restaurant website demos. Use when Codex needs to retrieve real restaurant dish photos through Apify Google Maps or Masa, turn mixed phone snapshots into one coherent customer-facing camera and lighting system, improve exposure or source-supported appetite cues, prevent visible AI artifacts, bind every designed image to a real served-dish source, or retain source-versus-output evidence and timing records. Do not use for text-only food generation, generic stock-food requests, full-menu illustration, or any realistic dish image that lacks a matching real restaurant photo.

相關技能