LucasH1225/paleta-restaurante-web

Paleta de Marca para Restaurante

Convierte la evidencia visual de un restaurante en un sistema de colores pequeño y accesible para un sitio web. Trata los colores repetidos de letreros, logotipos, menús e interiores como evidencia. Trata los roles y proporciones finales de los tokens como una decisión de diseño que debe preservar esa evidencia manteniendo el sitio legible.

Lee references/brand-palette-playbook.md antes de extraer o elegir colores. Lee references/palette-combinations.md al seleccionar una familia de combinación reutilizable. Copia assets/brand-palette-template.json y usa assets/palette-combo-library.json en lugar de inventar una paleta no registrada.

Elegir el Modo

• Extraer: Muestra candidatos de muestras de regiones de imagen seleccionadas sin decidir su significado.
• Auditar: Clasifica los colores como anclas de marca, colores de soporte, neutros, colores incidentales o ruido rechazado.
• Crear: Selecciona un ancla, una familia de combinación y un sistema completo de tokens para el sitio web.
• Actualizar: Vuelve a verificar la evidencia o el contraste y actualiza un bloqueo de paleta existente sin cambiar la estructura del diseño.
• Revisar: Renderiza la vista previa, valida cada combinación requerida e informa el contrato de integración.

Deja que $restaurant-demo-builder elija la receta, la gramática de diseño, la audiencia y el objetivo de conversión. Usa esta habilidad después de que la evidencia de identidad esté establecida y antes de que se finalice el estilo visual. Deja que $restaurant-exterior-image-studio produzca un activo de fachada; esta habilidad puede inspeccionar su fuente factual intacta en busca de evidencia de color, pero no debe tratar una salida reestilizada por IA como nueva verdad de marca.

Preparar el Bloqueo de Paleta

Guarda brand-palette.json junto al registro de investigación de la demostración o al bloqueo de receta. Registra:

• identidad del restaurante y fuentes de evidencia;
• colores observados, regiones, IDs de fuente, confianza y clasificación;
• colores rechazados y motivos de rechazo;
• ancla seleccionada e ID de combinación reutilizable;
• derivación de colores observados a tokens del sitio web;
• combinaciones requeridas de primer plano/fondo;
• proporciones de color previstas y notas de uso;
• estado de revisión y si el resultado deriva de evidencia o es un respaldo claramente etiquetado.

Mantén las URLs de origen, las fechas de verificación y los valores SHA-256. Nunca almacenes tokens API ni credenciales privadas.

Inspeccionar la Evidencia Antes de Muestrear

Prefiere superficies repetidas y portadoras de identidad:

1. logotipo o marca denominativa oficial;
2. letrero de fachada, toldo o pintura deliberada de fachada;
3. encabezados de menú impresos, reglas y paneles con marca;
4. colores repetidos de paredes, cabinas, azulejos o mostradores interiores;
5. empaques, uniformes o gráficos sociales solo cuando se verifique su identidad actual de restaurante.

Rechaza o aísla colores de comida, piel, cielo, nubes, árboles, césped, asfalto, negocios vecinos, reflejos, decoración temporal, brillo de pantalla, tonos de bombilla cálida, sombras profundas de cámara y errores automáticos de balance de blancos. No elijas "el píxel más común" como color de marca.

Inspecciona cada fuente con view_image. Cuando el muestreo exacto sea útil, recorta solo la región verificada con marca:

python3 <palette-skill>/scripts/extract_swatches.py \
  --image <source-image> \
  --crop <left> <top> <right> <bottom> \
  --colors 8 \
  --output <work-order>/sampled-storefront-colors.json

El script informa píxeles, no significado de marca. Registra por qué un color muestreado es relevante antes de promocionarlo.

Seleccionar un Ancla y una Familia de Combinación

Elige el ancla de evidencia repetida y de alta confianza. Prefiere la concordancia entre dos tipos de fuentes diferentes, como letrero más menú, sobre la repetición dentro de una sola fotografía. Cuando solo exista un logotipo o menú limpio controlado por el propietario, puede ser suficiente si la región no es ambigua.

No fuerces el ancla literal a cubrir la mayor parte de la página. Trátala como el ancla de marca para acciones, encabezados, reglas o bandas estructurales. Deriva un lienzo tranquilo y una superficie neutra para que la comida, el texto del menú y las indicaciones sigan siendo fáciles de escanear. Una proporción de 70 / 20 / 10 (lienzo y superficie / estructural / acento) es un punto de partida, no una fórmula fija.

Elige la familia más cercana en la biblioteca de combinaciones, luego adapta sus roles a la evidencia. La biblioteca es una guía de roles y armonía, no una prueba de la marca del restaurante. Registra cada oscurecimiento, aclarado, desaturación o neutralización en derivations. Mantén los cambios de tono restringidos; si se requiere un tono diferente para la legibilidad o la armonía, úsalo solo como color de soporte y explica la elección.

Cuando no exista un color de marca confiable, usa un respaldo neutro compatible con la receta, establece selection.mode en recipe-fallback y etiqueta la paleta como propuesta creativa. No afirmes que proviene del restaurante.

Construir Tokens del Sitio Web

Proporciona todos los tokens en la plantilla, incluidos lienzo, superficies, texto del cuerpo, texto atenuado, acción primaria, estado de hover, texto sobre primario, acento, texto sobre acento, borde, borde de control y foco. Usa el ancla como fuente para primary cuando sea posible, pero oscurécelo o acláralo cuando sea necesario para el contraste de texto.

Registra las combinaciones requeridas para texto normal, texto grande y controles no textuales. Valida el texto normal en 4.5:1, el texto grande en 3:1 y los límites de control o foco significativos en 3:1. No confíes solo en el color para comunicar estados seleccionados, de error o de disponibilidad.

Ejecuta la puerta de evidencia antes del trabajo de tokens y la puerta de entrega después de que todos los tokens estén completos:

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

Vista Previa Antes de la Integración

Renderiza una vista previa independiente que muestre tokens, botones, filas de menú, superficies de prueba y combinaciones medidas:

python3 <palette-skill>/scripts/render_palette_preview.py \
  --palette <demo>/brand-palette.json \
  --out <demo>/brand-palette-preview.html

Inspecciona la vista previa visualmente. Verifica que el resultado se sienta como el restaurante, no se convierta en un muro indiferenciado del color ancla, preserve el apetito por la comida y mantenga el texto atenuado legible en dispositivos móviles.

Entregar al Constructor de Demos

Pasa a $restaurant-demo-builder el brand-palette.json validado, la vista previa y estas restricciones:

• preserva la receta seleccionada y la huella de diseño;
• mapea los tokens registrados en variables CSS en lugar de introducir valores hex ad hoc;
• usa el ancla según el rol y la proporción registrados;
• mantén la gradación de color de la fotografía separada de los colores de la IU;
• vuelve a ejecutar la validación de la paleta después de cualquier cambio de token;
• verifica visualmente en escritorio y móvil, incluido el texto sobre imágenes y todos los estados de botones.

No permitas que la selección de paleta fuerce un esqueleto de página antiguo ni anule la evidencia verificada del restaurante. El diseño, el color de marca y la fotografía son bloqueos separados que se encuentran en la demostración final.

Entrega

Informa los colores de evidencia aceptados y rechazados, la confianza del ancla, la combinación seleccionada, las derivaciones de tokens, los resultados de contraste medidos, la ruta de vista previa, el estado de respaldo y cualquier pregunta de verificación del propietario. No publiques ni contactes al restaurante sin autorización explícita.

Ejemplos de Invocación

• $restaurant-brand-palette Inspecciona esta foto de fachada, menú y comedor, luego crea un bloqueo de paleta para el sitio web.
• $restaurant-brand-palette Extrae los colores reales de la marca y explica qué colores de la foto rechazaste como iluminación o entorno.
• $restaurant-brand-palette Revisa esta paleta de demostración, repara las combinaciones débiles y entrega roles CSS validados a restaurant-demo-builder.