Restaurant-Markenpalette
Wandle visuelle Beweise aus Restaurants in ein kleines, zugängliches Website-Farbsystem um. Behandle wiederholte Schild-, Logo-, Speisekarten- und Innenraumfarben als Beweise. Behandle die finalen Token-Rollen und -Anteile als eine Designentscheidung, die diese Beweise bewahren und gleichzeitig die Lesbarkeit der Website sicherstellen muss.
Lies references/brand-palette-playbook.md, bevor du Farben extrahierst oder auswählst. Lies references/palette-combinations.md, wenn du eine wiederverwendbare Kombinationsfamilie auswählst. Kopiere assets/brand-palette-template.json und verwende assets/palette-combo-library.json, anstatt eine nicht dokumentierte Palette zu erfinden.
Wähle den Modus
- Extrahieren: Nimm Kandidatenfarbmuster aus ausgewählten Bildbereichen, ohne ihre Bedeutung zu bestimmen.
- Auditieren: Klassifiziere Farben als Markenanker, unterstützende Farben, Neutrale, beiläufige Farben oder abgelehntes Rauschen.
- Erstellen: Wähle einen Anker, eine Kombinationsfamilie und ein vollständiges Website-Token-System.
- Aktualisieren: Überprüfe Beweise oder Kontraste und aktualisiere eine bestehende Palette, ohne die Layout-Struktur zu ändern.
- Prüfen: Rendere die Vorschau, validiere jede erforderliche Paarung und melde den Integrationsvertrag.
Lasse $restaurant-demo-builder das Rezept, die Layout-Grammatik, die Zielgruppe und das Conversion-Ziel wählen. Verwende diese Skill, nachdem die Identitätsevidenz festgestellt wurde und bevor das visuelle Styling abgeschlossen ist. Lasse $restaurant-exterior-image-studio ein Ladenfront-Asset erstellen; Diese Skill darf dessen unberührte faktische Quelle auf Farbevidenz untersuchen, aber ein KI-neugestaltetes Ergebnis nicht als neue Markenwahrheit behandeln.
Bereite den Paletten-Lock vor
Speichere brand-palette.json neben dem Demo-Forschungsdokument oder Rezept-Lock. Dokumentiere:
- Restaurant-Identität und Evidenzquellen;
- beobachtete Farben, Regionen, Quell-IDs, Vertrauensgrad und Klassifizierung;
- abgelehnte Farben und Ablehnungsgründe;
- ausgewählter Anker und ID der wiederverwendbaren Kombination;
- Ableitung von beobachteten Farben zu Website-Tokens;
- erforderliche Vordergrund-/Hintergrund-Paarungen;
- beabsichtigte Farbanteile und Nutzungshinweise;
- Prüfstatus und ob das Ergebnis evidenzbasiert oder ein klar gekennzeichneter Fallback ist.
Behalte Quell-URLs, Prüfdatums- und SHA-256-Werte. Speichere niemals API-Tokens oder private Anmeldedaten.
Untersuche Evidenz vor dem Sampling
Bevorzuge wiederholte, identitätstragende Oberflächen:
- offizielles Logo oder Wortmarke;
- Ladenfront-Schild, Markise oder bewusste Fassadenfarbe;
- gedruckte Speisekartenüberschriften, Linien und gebrandete Paneele;
- wiederholte Innenraumwand-, Sitzbank-, Fliesen- oder Tresenfarben;
- Verpackungen, Uniformen oder Social-Grafiken nur, wenn ihre aktuelle Restaurant-Identität verifiziert ist.
Lehne Lebensmittelfarben, Haut, Himmel, Wolken, Bäume, Gras, Asphalt, benachbarte Geschäfte, Spiegelungen, temporäre Dekoration, Bildschirm-Licht, warme Glühbirnen-Abstrahlungen, tiefe Kameraschatten und automatische Weißabgleich-Fehler ab oder isoliere sie. Wähle nicht „das häufigste Pixel“ als Markenfarbe.
Untersuche jede Quelle mit view_image. Wenn genaues Sampling sinnvoll ist, schneide nur den verifizierten gebrandeten Bereich zu:
python3 <palette-skill>/scripts/extract_swatches.py \
--image <source-image> \
--crop <left> <top> <right> <bottom> \
--colors 8 \
--output <work-order>/sampled-storefront-colors.json
Das Skript meldet Pixel, nicht Markenbedeutung. Dokumentiere, warum eine gesampelte Farbe relevant ist, bevor du sie beförderst.
Wähle einen Anker und eine Kombinationsfamilie
Wähle den Anker aus wiederholten, hochvertrauenswürdigen Beweisen. Bevorzuge Übereinstimmung zwischen zwei verschiedenen Quelltypen, z. B. Schild plus Speisekarte, gegenüber Wiederholung in einem einzigen Foto. Wenn nur ein sauberes, inhabergeführtes Logo oder eine Speisekarte existiert, reicht dies möglicherweise aus, wenn der Bereich eindeutig ist.
Zwinge den wörtlichen Anker nicht dazu, den größten Teil der Seite abzudecken. Behandle ihn als Markenanker für Aktionen, Überschriften, Regeln oder strukturelle Bänder. Leite eine ruhige Leinwand und Oberflächenneutralen ab, damit Lebensmittel, Menütext und Wegbeschreibungen leicht zu überfliegen bleiben. Ein 70 / 20 / 10-Verhältnis von Leinwand-und-Oberfläche / Struktur / Akzent ist ein Ausgangspunkt, keine feste Formel.
Wähle die nächstgelegene Familie in der Kombinationsbibliothek aus und passe dann ihre Rollen an die Beweise an. Die Bibliothek ist ein Leitfaden für Rollen und Harmonien, kein Beweis für die Restaurant-Markenidentität. Dokumentiere jede Abdunklung, Aufhellung, Entsättigung oder Neutralisierung in derivations. Halte Farbtonänderungen zurückhaltend; wenn ein anderer Farbton aus Gründen der Lesbarkeit oder Harmonie erforderlich ist, verwende ihn nur als unterstützende Farbe und erkläre die Wahl.
Wenn keine zuverlässige Markenfarbe existiert, verwende einen rezeptkompatiblen neutralen Fallback, setze selection.mode auf recipe-fallback und kennzeichne die Palette als kreativen Vorschlag. Behandle sie nicht als vom Restaurant stammend.
Erstelle Website-Tokens
Biete alle Tokens in der Vorlage an, einschließlich Leinwand, Oberflächen, Fließtext, gedämpfter Text, primäre Aktion, Hover-Zustand, Text auf primär, Akzent, Text auf Akzent, Rahmen, Steuerrahmen und Fokus. Verwende den Anker als Quelle für primary, wenn möglich; dunkle ihn jedoch ab oder helle ihn auf, wenn dies für den Textkontrast erforderlich ist.
Dokumentiere erforderliche Paarungen für normalen Text, großen Text und nicht-textuelle Steuerelemente. Validiere normalen Text mit 4.5:1, großen Text mit 3:1 und sinnvolle Steuer- oder Fokusgrenzen mit 3:1. Verlasse dich nicht ausschließlich auf Farbe, um ausgewählte, fehlerhafte oder Verfügbarkeitszustände zu kommunizieren.
Führe das Evidenz-Gate vor der Token-Arbeit und das Übergabe-Gate nach Abschluss aller Tokens aus:
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
Vorschau vor der Integration
Rendere eine eigenständige Vorschau mit Tokens, Schaltflächen, Menüzeilen, Beweisoberflächen und gemessenen Paarungen:
python3 <palette-skill>/scripts/render_palette_preview.py \
--palette <demo>/brand-palette.json \
--out <demo>/brand-palette-preview.html
Prüfe die Vorschau visuell. Stelle sicher, dass das Ergebnis sich nach dem Restaurant anfühlt, nicht zu einer undifferenzierten Wand der Ankerfarbe wird, den Appetit auf Lebensmittel bewahrt und gedämpfter Text auf mobilen Geräten lesbar bleibt.
Übergabe an den Demo-Builder
Übergib $restaurant-demo-builder die validierte brand-palette.json, die Vorschau und diese Einschränkungen:
- bewahre das ausgewählte Rezept und den Layout-Fingerabdruck;
- bilde die dokumentierten Tokens in CSS-Variablen ab, anstatt ad hoc Hex-Werte einzuführen;
- verwende den Anker gemäß der dokumentierten Rolle und des dokumentierten Anteils;
- halte den Farbabgleich von Fotos getrennt von UI-Farben;
- führe die Palettenvalidierung nach jeder Token-Änderung erneut durch;
- überprüfe visuell Desktop und Mobilgerät, einschließlich Text über Bildern und aller Schaltflächenzustände.
Lasse nicht zu, dass die Palettenauswahl ein altes Seiten-Skelett erzwingt oder verifizierte Restaurant-Evidenz überschreibt. Layout, Markenfarbe und Fotografie sind separate Locks, die sich in der finalen Demo treffen.
Übergabe
Melde akzeptierte und abgelehnte Evidenzfarben, Ankervertrauen, ausgewählte Kombination, Token-Ableitungen, gemessene Kontrastergebnisse, Vorschau-Pfad, Fallback-Status und etwaige Fragen zur Inhaberverifikation. Veröffentliche oder kontaktiere das Restaurant nicht ohne ausdrückliche Genehmigung.
Beispiel-Aufrufe
$restaurant-brand-palette Untersuche dieses Ladenfront-, Speisekarten- und Gastraumfoto und erstelle dann einen Website-Paletten-Lock.$restaurant-brand-palette Extrahiere die echten Markenfarben und erkläre, welche Fotofarben du als Beleuchtung oder Umgebung abgelehnt hast.$restaurant-brand-palette Prüfe diese Demo-Palette, repariere die schwachen Kombinationen und übergebe validierte CSS-Rollen an restaurant-demo-builder.