レストランブランドパレット

レストランの視覚的エビデンスを、小さなアクセシブルなWebサイトのカラーパレットに変換します。繰り返し現れる看板、ロゴ、メニュー、内装の色をエビデンスとして扱います。最終的なトークンの役割と比率は、そのエビデンスを保持しつつ、Webサイトの読みやすさを維持するデザイン上の決定として扱います。

色の抽出または選択を行う前に、references/brand-palette-playbook.md を読んでください。再利用可能な組み合わせファミリーを選択する際には references/palette-combinations.md を読んでください。assets/brand-palette-template.json をコピーし、assets/palette-combo-library.json を使用して、未記録のパレットを発明しないでください。

モードの選択

抽出: 選択した画像領域から候補スウォッチをサンプリングし、その意味は決定しません。
監査: 色をブランドアンカー、サポートカラー、ニュートラル、インシデンタルカラー、拒否されたノイズに分類します。
作成: 1つのアンカー、1つの組み合わせファミリー、および完全なWebサイトトークンシステムを選択します。
リフレッシュ: エビデンスまたはコントラストを再確認し、既存のパレットロックをレイアウト構造を変更せずに更新します。
レビュー: プレビューをレンダリングし、必要なすべてのペアリングを検証し、統合契約を報告します。

$restaurant-demo-builder にレシピ、レイアウト文法、オーディエンス、変換目標を選択させます。このスキルは、アイデンティティのエビデンスが確立され、ビジュアルスタイリングが確定される前に使用します。$restaurant-exterior-image-studio に店舗前面アセットを生成させます。このスキルは、その未加工の事実ソースを色のエビデンスとして検査できますが、AIにより再スタイリングされた出力を新しいブランドの真実として扱ってはいけません。

パレットロックの準備

brand-palette.json をデモの調査記録またはレシピロックの隣に保存します。以下を記録します:

レストランのアイデンティティとエビデンスソース;
観察された色、領域、ソースID、信頼度、分類;
拒否された色と拒否理由;
選択されたアンカーと再利用可能な組み合わせID;
観察された色からWebサイトトークンへの導出;
必要な前景/背景ペアリング;
意図された色の比率と使用上の注意;
レビューステータス、および結果がエビデンスに基づくか、明確にラベル付けされたフォールバックか。

ソース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

このスクリプトはピクセルを報告し、ブランドの意味を報告しません。サンプリングされた色を昇格させる前に、なぜその色が関連するのかを記録してください。

1つのアンカーと組み合わせファミリーを選択

繰り返される高信頼度のエビデンスからアンカーを選択します。1枚の写真内での繰り返しよりも、看板とメニューなど、異なる2つのソースタイプ間での一致を優先します。クリーンなオーナー管理のロゴまたはメニューが1つだけ存在する場合、その領域が曖昧でなければ十分な場合があります。

リテラルなアンカーカラーをページの大部分に強制しないでください。アクション、見出し、ルール、構造バンドのブランドアンカーとして扱います。食品、メニューテキスト、方向指示がスキャンしやすいように、静かなキャンバスとサーフェスニュートラルを導出します。70 / 20 / 10 のキャンバス・アンド・サーフェス / 構造 / アクセント比率は開始点であり、固定された式ではありません。

コンボライブラリ内の最も近いファミリーを選択し、その役割をエビデンスに合わせて調整します。ライブラリは役割とハーモニーのガイドであり、レストランのブランディングの証明ではありません。すべての暗くする、明るくする、彩度を下げる、またはニュートラルにする操作を derivations に記録します。色相の変更は控えめにします。読みやすさやハーモニーに別の色相が必要な場合、サポートカラーとしてのみ使用し、その選択を説明します。

信頼できるブランドカラーが存在しない場合、レシピ互換のニュートラルフォールバックを使用し、selection.mode を recipe-fallback に設定し、パレットをクリエイティブ提案としてラベル付けします。レストランから来たと主張しないでください。

Webサイトトークンの構築

テンプレート内のすべてのトークンを提供します。キャンバス、サーフェス、本文テキスト、ミュートテキスト、プライマリアクション、ホバーステート、オン・プライマリテキスト、アクセント、オン・アクセントテキスト、ボーダー、コントロールボーダー、フォーカスを含みます。可能な場合はアンカーを 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

プレビューを視覚的に検査します。結果がレストランらしく感じられ、アンカーカラーの未分化な壁にならず、食品の食欲を維持し、ミュートテキストがモバイルで読みやすいことを確認します。

デモビルダーへの引き渡し

$restaurant-demo-builder に、検証済みの brand-palette.json、プレビュー、および以下の制約を渡します:

選択されたレシピとレイアウトフィンガープリントを保持;
記録されたトークンを、アドホックな16進数値を導入するのではなく、CSS変数にマッピング;
記録された役割と比率に従ってアンカーを使用;
写真のカラーグレードをUIの色とは別に保つ;
トークンが変更された後はパレット検証を再実行;
デスクトップとモバイルを視覚的に確認（画像上のテキストとすべてのボタンステートを含む）。

パレット選択が古いページスケルトンを強制したり、確認されたレストランのエビデンスを上書きしたりしないでください。レイアウト、ブランドカラー、写真は別々のロックであり、最終的なデモで合流します。

引き渡し

受け入れられたエビデンスカラーと拒否されたエビデンスカラー、アンカーの信頼度、選択された組み合わせ、トークンの導出、測定されたコントラスト結果、プレビューパス、フォールバックステータス、およびオーナー検証の質問を報告します。明示的な許可なしに公開したり、レストランに連絡したりしないでください。

呼び出し例

$restaurant-brand-palette この店舗前面、メニュー、食堂の写真を検査し、Webサイト用のパレットロックを作成してください。
$restaurant-brand-palette 実際のブランドカラーを抽出し、照明や環境としてどの写真の色を拒否したかを説明してください。
$restaurant-brand-palette このデモパレットをレビューし、弱い組み合わせを修正し、検証済みのCSSロールをrestaurant-demo-builderに渡してください。

LucasH1225/restaurant-website-skills

restaurant-website-skills とは？

お気に入りのAIに質問する

ドキュメント